一、从堆叠到水平排列 container
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
二、从堆叠到水平排列 container-fluid
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
三、移动设备和桌面屏幕
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
四、排版
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as an addition to the document.
五、对齐
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
六、表格
响应式表格.
| # |
First Name |
First Name |
First Name |
First Name |
First Name |
| 1 |
senola |
senola |
senola |
senola |
senola |
| 2 |
senola |
senola |
senola |
senola |
senola |
| 3 |
senola |
senola |
senola |
senola |
senola |
| 4 |
senola |
senola |
senola |
senola |
senola |
| 5 |
senola |
senola |
senola |
senola |
senola |
| 5 |
senola |
senola |
senola |
senola |
senola |
七、表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
八、按钮
九、图片形状
请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。
十、字体
十一、下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
十二、导航栏
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。