1.网格系统
超小设备手机（<768px） .col-xs- 列数和12 间隙宽度30px 一个列每边是15px
小型设备平板电脑（≥768px）.col-sm- 列数和12 间隙宽度30px 一个列每边是15px
中型设备台式电脑（≥992px）.col-md- 列数和12 间隙宽度30px 一个列每边是15px
大型设备台式电脑（≥1200px）.col-lg- 列数和12 间隙宽度30px 一个列每边是15px
2.表格
table 为任意 <table> 添加基本样式 (只有横向分隔线)
table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作
例子：基本表格
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
3.表单
（1）垂直或基本表单
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
（2）内联表单
请向 <form> 标签添加 class .form-inline。
（3）水平表单
向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
复选框（Checkbox）和单选框（Radio）
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio
4.按钮
.btn-default 默认/标准按钮
btn-primary 原始按钮样式（未被操作）
btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击 disabled 禁用按钮
5.图片
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
6.辅助类
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为display block并居中
.clearfix 清除浮动 .show 强制显示元素 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图 .close 显示关闭按钮
.caret 显示下拉式功能
7.响应式工具 visible-xs- 超小屏显示
visible-sm- 小屏显示 visible-md-中等屏显示 visible-lg-大屏幕显示
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。