标签:
Bootstrap提供了一套响应式、移动设备优先的栅格系统。随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
Bootstrap的栅格系统,由一个行和多个列构成。栅格系统通过行列的形式来创建网页布局,把具体的数据放入列当中。
(注意:栅格系统,必须放在container和container-fluid之中)
响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 | |||||||||
4 | 8 | ||||||||||
6 | 6 | ||||||||||
12 |
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
2016年5月29日晚上(传智Bootstrap笔记四(栅格系统 ))
标签:
原文地址:http://www.cnblogs.com/zzjeny/p/5540358.html