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极为简单但是各位不要纸上谈兵,希望大家还是要去敲一遍,不要眼高手低。
希望这篇文章对大家有所帮助,可以的话帮忙点亮下旁边的小手,让更多人看到 ,
如果上述代码有错误和不足,请评论或私信,我好及时改正。