Bootstrap中样式Jumbotron,row, table的实例应用

之前只是大概预览了下Bootstrap中涉及到的相关元素,插件等的使用。接下来将通过实例演练加强对Bootstrap的了解。实例来自http://www.runoob.com/有兴趣的可以上去学习跟w3cschool上的差不多。 为了加深理解,决定先在本地用google浏览器测试后,再写到这里。加深印象。

第一:首先是基本的网页标签的定义。采用的是html5的写法如下

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例<title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="script/jquery.min.js"  type="text/javascript" > </script>

<script src="script/boostrap.min.js" type="text/javascript" /></script>

</head>

<body>

</body>

</html>

第二: 我们将在<body></body>里面写class="jumbotron"所对应的代码:

<div class="container">

<div class="jumbotron">

<h2>这是我的第一个Bootstap 页面</h2>

<p>重置窗口大小查看响应式效果!</p>

</div>

</div>

第三:一行三列的div布局代码:

<div class="container">

<div class="row">

<div class="col-sm-4"> <h3>第一列<h3><p>学的不仅是技术,更是梦想</p></div>

<div class="col-sm-4"><h3>第二列</h3><p>长的丑不是你的错,不努力就是你的不对了</p></div>

<div class="col-sm-4"><h3>第三列</h3><p>梦想是要有的,万一实现了呢?</p></div>

</div>

</div>

第四:表格的基本呈现(响应式表格、加边框、行颜色的切换):

<div class="container">

<div class="table-responsive">

<div class="table table-striped table-bordered">

<caption>我是表格的标题</caption>

<thead>

<tr>

<th>序号</th>

<th>手机</th>

<th>理财</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>小米</td>

<td>股票</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>num</td>

<td>phone</td>

<td>money</td>

</tr>

<tfoot>

</div>

</div>

</div>

大体效果图如下:

时间: 2024-10-12 19:23:01

Bootstrap中样式Jumbotron,row, table的实例应用的相关文章

bootstrap 中的table样式

在bootstrap中,有丰富的表格样式,这里简单的记录下 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con

Bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里 那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性. 刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的.那么问题来了 若是滑动到

bootstrap中table的colspan不起作用

bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ table-layout: fixed !important; }

bootstrap中图标样式caret实现各种三角形

网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果.没想到用CSS也能实现这个效果. 看了下源码是这样的: .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px 

关于bootstrap中css样式与自己设置的css样式相撞问题

1.在对网页进行布局前就先将bootstrap包中的东西导入到自己的页面中去.自己定义的css样式导入在bootstrap之后,可以起到当类名与bootstrap重复时对bootstrap样式践行覆盖的作用. 2.尽量避免所取类名与bootstrap相撞 3.当页面显示效果与自己所想不符时,利用审查元素找到该元素对应的样式,有可能是因为bootstrap中定义的样式起了作用. 4.如若上一步成立,可在自己的css样式中对其进行覆盖. 原文地址:https://www.cnblogs.com/cc

Android studio 3.4.1 使用 bootstrap 中的组件实例

电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中,基本的布局是通过书写 HTML 而设计的. 因此, 若既想要使用android studio方便烧录手机的功能, 又想使用 bootstrap 简单的页面布局, 那么问题的关键就是要学会在 XML 文件中调用 HTML 格式的文件. 以设计一个按钮, 并且点击会跳转到下一个界面为例说明如何在and

Bootstrap 中文文档教程

Bootstrap 中文文档教程 全局样式和grid布局—Bootstrap中文使用指南 全局样式1.要求html5文档类型 Bootstrap使用的css属性和html元素依赖于html5的文档类型声明,请确保每个Bootstrap的页面包含下面的代码: <!DOCTYPE html> <html> ... </html> 2.排版和链接样式 全局的排版和链接样式放在scaffolding.less文件内(关于less教程后面会有详细说明).默认做了如下处理: 移除b

在bootstrap中让竖向排列的输入框水平排列

在bootstrap中可以使用自带的样式标记来控制样式,但是同时可以利用最原始的css样式来解决达到需求 如下所示可以看出来两个inline-block就可以使得两个水平排列 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说