在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教程
以上就是bootstrap的栅格系统有什么用的详细内容，更多请关注php中文网其它相关文章！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
