bootstrap的栅格系统有哪些作用

本文小编为大家详细介绍“bootstrap的栅格系统有哪些作用”，内容详细，步骤清晰，细节处理妥当，希望这篇“bootstrap的栅格系统有哪些作用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

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

bootstrap的栅格系统有什么用

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个，超出的部分自动换行

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

读到这里，这篇“bootstrap的栅格系统有哪些作用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。