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 (自动)	750px	970px	1170px
class前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12
最大列宽	自动	60px	78px	95px
槽宽	30px (每列左右均有15px)
可嵌套	Yes
偏移（Offsets）	Yes
列排序	Yes

4.列偏移

使用.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.列表

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

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

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

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

12.表格

<table class="table"> ...</table>

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

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

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

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

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

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