Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。
col2
col10
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。
加了Class=”row”的样式表示行，加了class=”col-sm-2”的样式表示列，系统将整个屏幕分为12份，col-sm-2表示该列跨2份，col-sm-10比表示该列跨10份。显示的效果就会如上图所示，表示一行两列，第一列占2份，第二列占10份。
bootstrap是一个响应式的前端框架，体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示：
Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列，第一列占8份，第二列占4份，在平板电脑下一行两列，第一列占12份，第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。
下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的
分享给好友！感谢支持。
原文链接：https://www.f2er.com/bootstrap/47683.html