一、栅格系统（网格系统）
1、栅格系统介绍
（1）Bootstrap提供了一套响应式、移动设备优先的栅格系统。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
Bootstrap的栅格系统，由一个行和多个列构成。栅格系统通过行列的形式来创建网页布局，把具体的数据放入列当中。
（注意：栅格系统，必须放在container和container-fluid之中）
（2）移动设备优先策略
-
内容：决定什么是最重要的。
-
布局
-
优先设计更小的宽度。
-
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
-
-
渐进增强
- 随着屏幕大小的增加而添加元素。
（3）响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
2、栅格系统参数
下表总结了 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 |
3、Bootstrap 网格系统（Grid System）的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
- 行必须放置在 .containe内，以便获得适当的对齐（alignment）和内边距（padding）。
- 使用行来创建列的水平组。
- 内容应该放置在列内，且唯有列可以是行的直接子元素。
- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
4、实例
<body style="padding:50px;background-color:#ccc;">
<div class="container" style="padding:50px;background-color:#fff">
<div class="row">
<div class="col-md-4">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、
懊恼，每次都需要我解释很多遍后别人才能理解，</div>
<div class="col-md-4">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。</div>
<div class="col-md-4">在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、
懊恼，每次都需要我解释很多遍后别人才能理解，</div>
</div>
</div>
</body>
<body style="padding:50px;background-color:#ccc;">
<div class="container" style="padding:50px;background-color:#fff">
<div class="row">
<div class="col-md-8">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、
懊恼，每次都需要我解释很多遍后别人才能理解，</div>
<div class="col-md-4">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。</div>
</div>
</div>
</body>
注意：如果列数超出12列，则会自动换行；如果列数低于12列，则无所谓。
5、列偏移
也就是说：一个栏向右偏移多少个列。.col-md-offset-*
.col-md-offset-2 //指定的栏向右偏移2个列；
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。
<body style="padding:50px;background-color:#ccc;">
<div class="container" style="padding:50px;background-color:#fff">
<div class="row">
<div class="col-md-4" style="border:1px solid red;">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、
懊恼，每次都需要我解释很多遍后别人才能理解，</div>
<div class="col-md-offset-4 col-md-4" style="border:1px solid red;">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。</div>
</div>
</div>
</body>
6、列嵌套
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
<body style="padding:50px;background-color:#ccc;">
<div class="container" style="padding:50px;background-color:#fff">
<div class="row">
<div class="col-md-4" style="border:1px solid red;" >像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，
那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、
懊恼，每次都需要我解释很多遍后别人才能理解，</div>
<div class="col-md-8" style="border:1px solid red;">像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因。
除非你有了比较烂的设计或者一些比较复杂的东西，当你无法找出 spacing, margin, padding 等这些补白全都乱的原因。
<!--嵌套栅格系统-->
<div class="row">
<div class="col-md-6" style=" height:120px;background-color:yellow;"></div>
<div class="col-md-6" style="height:120px;background-color:green;"></div>
</div>
</div>
</div>
</div>
</body>
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
