Bootstrap-网格系统学习笔记

什么是网格系统（Grid System）

Bootstrap的网格系统遵循“移动设备优先策略”，这个策略主要分成3个部分理解：①根据内容重要性进行优先显示，②优先设计更小设备的布局，具体表现为基础CSS是以移动设备优先，而平板、PC是根据媒体查询进行显示，③渐进增强，即随着屏幕大小的增加而添加元素。

Bootstrap网格系统的工作原理：

通过将内容放置于行或列中进行显示。

（1）行要使用类 .container，以获得合适的内边距以及对齐；

（2）使用行来创建列的水平组；

（3）只有列是行的直接子元素，内容放在列当中；

（4）可以使用预定义的网格类，如 .row 和 .col-xs-4，来创建行和列；

（5）列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

媒体查询：

（1）/* 超小设备（手机，小于 768px） */

          /* Bootstrap 中默认情况下没有媒体查询 */

（2）/* 小型设备（平板电脑，768px 起） */

@media (min-width: @screen-sm-min) { ... }

（3）/* 中型设备（台式电脑，992px 起） */

@media (min-width: @screen-md-min) { ... }

（4）/* 大型设备（大台式电脑，1200px 起） */

@media (min-width: @screen-lg-min) { ... }

（5）在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }