如果显示网格，代码应类似这样：
<div> <div> <div><p>Box 1</p></div> <div><p>Box 2</p></div> <div><p>Box 3</p></div> <div><p>Box 4</p></div> <div><p>Box 5</p></div> <div><p>Box 6</p></div> <div><p>Box 7</p></div> <div><p>Box 8</p></div> <div><p>Box 9</p></div> <div><p>Box 10</p></div> <div><p>Box 11</p></div> <div><p>Box 12</p></div> </div> </div>
其中col-*-*表示不同类型设备下在网格系统中占据的列宽
| container最大宽度 | None (auto) | 750px | 970px | 1170px |
| 类名前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 最大列宽 | Auto | ~62px | ~81px | ~97px |
| 列间隙 | 15px(i.e.30px) | |||
当列的高度不同时，由于float的作用会破坏网格的结构，可通过使用响应类避免，下面是一个完整的网格代码：
<div> <div> <div><p>Box 1</p></div> <div><p>Box 2</p></div> <div></div> <div><p>Box 3</p></div> <div></div> <div><p>Box 4</p></div> <div></div> <div></div> <div><p>Box 5</p></div> <div><p>Box 6</p></div> <div></div> <div></div> <div><p>Box 7</p></div> <div><p>Box 8</p></div> <div></div> <div></div> <div><p>Box 9</p></div> <div></div> <div><p>Box 10</p></div> <div></div> <div><p>Box 11</p></div> <div><p>Box 12</p></div> </div> </div>
其中的visible-*-*表示在何种设备下以何种display属性显示，由于极小设备默认为单列显示，因此无需使用响应类定制。
响应类也可用在普通标记中，比如下面的代码：
<p>This paragraph is visible only on extra small devices.</p> <p>This paragraph is visible only on small devices.</p> <p>This paragraph is visible only on medium devices.</p> <p>This paragraph is visible only on large devices.</p>
类似的，也可使用hidden-*，设置在特定设备中隐藏：
<p>This paragraph is hidden only on extra small devices.</p> <p>This paragraph is hidden only on small devices.</p> <p>This paragraph is hidden only on medium devices.</p> <p>This paragraph is hidden only on large devices.</p>
通过响应类还可以设置打印时的格式：
以上所述是小编给大家介绍的BootStrap3学习笔记(一)之网格系统，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！