【表格】

.table 类指定基本样式，

.table-striped 条纹样式，

.table-bordered 类为边框样式，

.table-hover 类带鼠标悬停样式，

.table-condensed 类紧凑样式。

状态类(行或单元格设置颜色)：active，success，info，warning，info。

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其

响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

4

【表单】

1. 基本实例，所有设置了 .form-control 类的 、

不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

form-group，input-group，control-group，

2. 内联表单，

元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

在内联表单中单选/多选框控件的宽度设置为 width: auto;

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。

3. 水平排列的表单

通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）

4. 多选和单选框

.radio、.radio-inline、.checkbox、.checkbox-inline 。

5. 静态控件

水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为

元素添加 .form-control-static类即可。

6. 控件状态

.disabled类禁用控件，为

设置disabled 时则禁用包含的所有控件。

a标签不受此类影响。

readonly 属性可以禁止用户输入

.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。

7. 控件尺寸

通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

8. 辅助文本

help-block类，针对表单控件的“块（block）”级辅助文本。

5

【按钮】

1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2. 展现形式，btn-link、btn-block、close

3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。

可通过 、 或  元素应用按钮类，但建议用  元素来获得在各个浏览器上获得相匹配的绘制效果。

6

【图片】

图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。

7

【辅助】

text-muted、text-primary、text-success、text-info、text-warning、text-danger

bg-primary、bg-success、bg-info、bg-warning、bg-danger、

三角符号，caret

浮动

居中

组件样式

1

【图标】

200个来自 Glyphicon Halflings 的字体图标，

图标类只能应用在空元素上，且不可与其它组件联合使用。

2

【菜单】

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

菜单分组：dropdown-header表描述项，.disabled 表禁用项

向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开

3

【按钮组】

按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。

按钮栏.btn-toolbar

钮垂直堆叠排列显示btn-group-vertical

两端对齐排列的按钮组btn-group-justified

4

【导航】

标签页.nav-tabs 类依赖 .nav 基类。

胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。

.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。

navbar navbar-default

对于不包含在

中的  元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，

.navbar-text

.navbar-link

.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。

.navbar-fixed-top 类可以让导航条固定在顶部

.navbar-fixed-bottom 类可以让导航条固定在底部

.navbar-static-top 类可让导航条随着页面向下滚动而消失。

.navbar-inverse 类可以改变导航条的外观。

breadcrumb 创建带有层次的导航结构（面包屑）。

5

【分页】

pagination，并根据情况对页码使用.disabled 类、 .active 类。

.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

pager上一页和下一页的简单翻页。并可通过previous，next类标示。

6

【标签】

label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。

badge，可以很醒目的展示新的或未读的信息条目。

7

【其它】

缩略图

提示框

进度条

媒体对象等

定制样式

1

BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。

总结

1

本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。