Bootstrap（二）栅格系统布局

Bootstrap为我们提供了两种布局。

流体布局和固定布局。

流体布局是按照百分比进行分配，平铺整个页面。

固定布局是根据浏览器大小不同，固定尺寸不同，对应宽度不同，分为4个断点。

>=1200  宽度为1170px

>=920   宽度为970px

>=768   宽度为750px

<768    没有边距

 

 

栅格系统：

什么是栅格系统：

Bootstrap包含了一个响应式的，移动设备优先的，不固定的网络系统，可以随着设备或视口大小的郑家而适当的扩展到12列，它包含用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

列class名row

行class名col-（lg,md,sm,xs）-12（一行分为12个）

组合模式：适应所有屏幕大小，根据class名的设置自动调节（在不同屏幕下显示不同的排列方式）

 

偏移：col-(lg,md,sm,xs)-offset-12（表示在对应的屏幕分辨率下，偏移多少个栅格）

排序：col-(lg,md,sm,xs)-push-12往后排12格

           col-(lg,md,sm,xs)-pull-12 往前排12格

排序和偏移的区别。

偏移只能往后移而排序可以往前走

如果一行排不下的话，偏移会换行，排序则不会。

 

嵌套：嵌套的哪一行会按照他的父级重新分配网格。按照父级的宽度再次平分12份

虽然Bootstrap极为简单但是各位不要纸上谈兵，希望大家还是要去敲一遍，不要眼高手低。

希望这篇文章对大家有所帮助，可以的话帮忙点亮下旁边的小手，让更多人看到 ，

如果上述代码有错误和不足，请评论或私信，我好及时改正。