你想要了解Bootstrap栅格系统的都在这儿

Posted 2021-09-15 Tiger老师

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才能有着如此强大的响应式布局方案。