Bootstrap 框架是现在最风行的前端框架之一，Bootstra 功能强大，简略易学，很符合实际利用场景。然而其中蕴含的内容比拟多，老手往往不能很快的熟练掌握。接下来，咱们一起对 Bootstra 栅格零碎做一下简略的总结：

Bootstrap 栅格零碎的定义是什么呢？

Bootstrap 蕴含了一个响应式的、挪动设施优先的、不固定网格零碎，能够随着设施或视口大小的减少而适当地扩大到 12 列。它蕴含了用于简略的布局选项的预约义类，也蕴含了用于生成更多语义布局的功能强大的混合类

从上述话语中能够简略的整顿出三个方面：

1、Bootstrap3 是挪动设置优先

2、Bootstrap 的栅格零碎最多 12 列

3、Bootstrap 中蕴含了许多预约义类

在通常咱们写的页面里，浏览器放大到肯定水平，页面会错位、变形，这在 Bootstrap 中不会，因为它是自适应的。

Bootstrap 栅格零碎（Grid System）相干类

\1. container 类示意栅格。应用 container 类可能取得 Bootstrap 默认设置的对齐（alignment）和内边距（padding）款式。

\2. 应用.row 来创立一行，每行又分为多个列。

\3. 应用.col-[screen style]-[percent] 预约列元素来快创立栅格。

\4. 内容应该搁置在列内，且只有列能够是行的间接子元素。

Ps:row>col

\5. 列通过内边距（padding）来创立列内容之间的间隙。该内边距是通过.rows 上的外边距（margin）取负值失去。就是说：你想缩小列间距，用负的 margin 来写。

\6. 网格零碎是通过指定你想要横跨的十二个可用的列来创立的。例如，要创立三个相等的列，则应用三个.col-md-4。

Bootstrap 网格的根本构造

< div class=”container”>// 容器

< div class=”row”>// 栅格中的行

< div class=”col-–”>< /div>// 行下的间接元素列

< div class=”col-–”>< /div>

< /div>

< div class=”row”>…< /div>

< /div>

< div class=”container”>

栅格选项

Bootstrap 栅格把设施分为了四种：

超小设施（手机）、小型设施（平板）、中型设施（笔记本电脑）、大型设施（大尺寸显示器）这四种设施它们各自的列数量和都不能够超过 12.

它们的列有不同 class 前缀做标识。

超小设施用.col-xs

小型设施用.col-sm

中型设施用.col-md

大型设施用.col-lg-

不管哪种设施，它们的间隙都是 30px（指列的 padding-left;15px 和 padding-right:15px;）

应用栅格布局的步骤

\1. 引入 bootstrap 所须要的库

就好比引入一个内部样式表，只不过这个是 bootstrap 的样式表，它蕴含 css 和 js 两局部

\2. 增加 bootstrap 容器

在 body 中写一个 div，并为这个 div 增加一个 container 类，这个类是十分有用的，它能在页面中创立一个居中的区域，而后咱们把其它的元素放在外面。它等于是创立了一个具备动态宽度，并且 margin 值为 auto 的一个居中的 div 框，container 的优先在于它是响应式的，它会以以后屏幕的宽度为根底计算出最佳的宽度予以应用。

\3. 在 container 中增加 row

咱们用 row 来横向布局

\4. 在 row 中增加列

就好比表格中增加了 tr. 之后在 tr 中增加 td 一样。

Row 中的列就是咱们之前的.col-xs-6，加起来正好 12 列

栅格零碎是 Bootstrap 中的外围，正是因为栅格零碎的存在，Bootstrap 能力有着如此弱小的响应式布局计划。