Bootstrap 引入 栅栏系统 文本 表格 类

1.引入

<!-- 最新 Bootstrap 核心 CSS 文件 -->

<linkrel="stylesheet"href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<linkrel="stylesheet"href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<scriptsrc="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<scriptsrc="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

2.container

用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。

注意，由于设置了padding 和 固定宽度，.container不能嵌套。

<divclass="container"> ...</div>

3.前缀

超小屏幕设备 手机 (<768px)小屏幕设备 平板 (≥768px)中等屏幕设备 桌面 (≥992px)大屏幕设备 桌面 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，超过这些阈值将变为水平排列最大.container宽度None (自动)750px970px1170pxclass前缀.col-xs-.col-sm-.col-md-.col-lg-列数12最大列宽自动60px78px95px槽宽30px (每列左右均有15px)可嵌套Yes偏移（Offsets）Yes列排序Yes4.列偏移

使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

5.嵌套列

为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

6.在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。

7.通过添加.lead可以让段落突出显示。

8.行内元素赋予.small以代替任何<small>标签。

9.行对齐

text-left text-right text-center

块对齐

pull-left pull-right center-block

10.文本颜色

text-muted  

text-primary  

text-success 

text-info

text-warning

text-danger

11.列表

<ulclass="list-unstyled"><li>...</li></ul> 去除圆点

<ulclass="list-inline"><li>...</li></ul> 设置为行标签 使标签在同一行 相当于左浮动

dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起，随着导航条逐渐展开而排列在一样

通过text-overflow，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

12.表格

<tableclass="table"> ...</table>

利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式

利用.table-bordered为表格和其中的每个单元格增加边框。

利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。

通过这些状态class可以为行货单元格设置颜色。

Class描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作