bootstrap的12栅格系统是什么

编辑: admin 分类: javascript 发布时间: 2022-06-25 来源:互联网

在bootstrap中，12栅格系统指的是将页面布局分为等宽的1到12列，并通过比例计算来定义列宽，通过列数来定义模块化的页面布局方式，是一个响应式的、移动设备优先的栅格系统。

本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

什么是栅格（Grid）？

在平面设计中，栅格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

简单地说，网页设计中的栅格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 栅格系统（Grid System）？

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的栅格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。

例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。

Bootstrap的栅格系统

在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。

我们先看看Bootstrap有几种栅格类可以使用：

1、.col-xs-* 这是超小屏幕类（<768px），类似手机等设备。

2、.col-sm-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。

3、 .col-md-* 这是中型设备类（≥992px且<1200px）。

4、 .col-lg-* 这是大型设备类（≥1200px）。