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能力有着如此弱小的响应式布局计划。