bootstrap的栅格系统有什么用

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

在bootstrap中，栅格系统的作用是让同一套页面可以适应不同分辨率的设备；该系统将每一行平均分为12个格子，然后指定同一个元素在不同设备上占用的格子数目不同，从而实现不同设备的页面布局。

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

1.bootstrap栅格系统：作用就是使得同一套页面可以适应不同的分辨率的设备

2.栅格系统的实现：将每一行平均分为12个格子，然后指定同一个元素在手机设备和pc设备上占用的格子数目不同，例如：一个div占用电脑4个格子，在手机上占用12个格子

3.步骤

1.定义容器：相当于table 表格

*容器分类：

1.container：固定宽度随着不同设备而不同（留白）

2.container-fluid：100%

2.定义行：相当于tr 样式：row

3.定义元素：指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

*设备代号：

1.xs：超小屏幕手机（768px）：col-xs-12

2.sm：小屏幕平板（>=768px）

3.md：中等屏幕桌面显示器（>=992px）

4.lg：大屏幕大桌面显示器（>=1200px）

**注意：一行中如果格子的数目超过12个，超出的部分自动换行

**注意：定义的类属性可以向上兼容，而向下不兼容，如果设备的宽度小于你设置的栅格类属性的设备的代号的最小值，默认会一个元素占满一整行。