一、Bootstrap 网格系统如何跨多个设备工作
![Uploading Paste_Image_217205.png . . .]
col-md-push-* 和 .col-md-pull-*一个是从左往右向后推，一个是自右向左往前拉
二、bootstrap中表格的样式类
用于table的样式
.table:为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped:在 <tbody> 内添加斑马线形式的条纹 (也就是隔行相同颜色)( IE8 不支持)
.table-bordered:为所有表格的单元格添加边框
.table-hover:在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed:让表格更加紧凑
用于table的<tr>, <th> 和 <td> 类
.active：将悬停的颜色应用在行或者单元格上
.success：表示成功的操作
.info：表示信息变化的操作
.warning：表示一个警告的操作
.danger：表示一个危险的操作
.table-responsive class：通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
三、表单
创建基本表单的步骤：向父 <form> 元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
对于一个表单控件：
:focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上）
输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
禁用的字段集 fieldset：对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
. help-block：表单帮助文本
.input-lg：设置表单的高度（.input-sm/.input-lg）
.col-lg-* ：设置表单宽度。
四、按钮
.btn:为按钮添加基本样式;
.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:按钮被禁用
您可以在 <a/><button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。
五、图片
.img-round:图片加圆角
.img-circle:图片变圆
.img-thumbnail:图片加一个灰色外边框和内边距（缩略图样式）
.img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
六、辅助类
.text-muted，.text-primary，.text-success，.text-info，.text-warning，.text-danger对应类的文本样式
.bg-muted，.bg-primary，.bg-success，.bg-info，.bg-warning，.bg-danger
.pull-left/.pull-right：元素浮动到左边/右边
.center-block：设置元素为 display:block 并居中显示
.clearfix：清除浮动
.show：强制元素显示（包括屏幕阅读器）
.hidden：强制元素隐藏（包括屏幕阅读器）
.sr-only：除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable：与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide：将页面元素所包含的文本内容替换为背景图
.close：显示关闭按钮
.caret：显示下拉式功能
.navbar-left 或 .navbar-right：向左/右对齐导航栏中的组件
.clearfix ：清除元素的浮动
三、bootstrap一些标签
smal
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。
七、Bootstrap 布局组件***
字体图标：字体图标是在 Web 项目中使用的图标字体 (http://glyphicons.com/)
优点 字符图标可以实现一些悬停图标放大的特效 更美观
包含了常用的大部分的图标。
http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
导航栏：
响应式导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class**.collapse、.navbar-collapse**的 <div> 中。折叠起来的导航栏实际上是一个带有 class**.navbar-toggle**及两个 data- 元素的按钮。第一个是**data-toggle**，用于告诉 JavaScript 需要对按钮做什么，第二个是**data-target**，指示要切换到哪一个元素。三个带有 class**.icon-bar**的 <span> 创建所谓的汉堡按钮。这些会切换为**.nav-collapse**<div> 中的元素。为了实现以上这些功能，您必须包含[Bootstrap 折叠（Collapse）插件](http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html)。