bootstrap的栅格系统有哪些作用

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

成都创新互联公司专注于江宁企业网站建设,响应式网站,商城网站定制开发。江宁网站建设公司,为江宁等地区提供建站服务。全流程按需网站开发，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

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

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

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

标题名称：bootstrap的栅格系统有哪些作用
地址分享：http://cdiso.cn/article/jpseci.html