bootstrap初探_html/css_WEB-ITnose
时间：2021-07-01 10:21:17
帮助过：6人阅读
- bootstrap资源
- http://getbootstrap.com
- http://github.com/twbs
- http://www.bootcss.com
- bootstrap栅格系统
- 容器：流体（container-fluid）、固定（container）
- 分12列，阈值 分辨率>=1200,container固定尺寸为1170px，若阈值在992到1200之间container固定尺寸为970px，若分辨率在992以下778以上为750px，778px以下为自适应，没有固定的宽度值
-
无标题文档 aaaaaaaaa
- 分为12列，可根据列数确定，demo如下
-
1 2 3 4 5 无标题文档 6 7 8 9 13 14 15 16 20 21 22
- 不同分辨率下，设置col-lg表示超大分辨率，col-md是中等分辨率，col-sm是pad类似大小，col-xs是移动设备，如果设置了col-*那么会按照相应的分辨率显示，如果小于相应的分辨率则会变为几行，demo如下，可自行运行，以及对应demo图片
-
无标题文档 col-lg-4
col-lg-4
col-lg-4
col-md-4
col-md-4
col-md-4
col-sm-4
col-sm-4
col-sm-4
col-xs-4
col-xs-4
col-xs-4
- 组合布局，可设置多个class，在分辨率为一个值得时候按照某个class显示，如果分辨率换成另外一个按照另外一个class显示，如下面demo所示，当分辨率大于1200时，按照col-lg显示四列，如果分辨率小于1200大于992，按照col-md显示三列
-
无标题文档 col-lg-3 col-md-4
col-lg-3 col-md-4
col-lg-3 col-md-4
col-lg-3 col-md-4
- 列偏移col-lg-offset-4，向右偏移4个网格距离，demo如下，代码运行效果如下
-
无标题文档 col-lg-3
col-lg-3
col-lg-3
col-lg-3
- 最多偏移为12，若大于12则不起任何作用，demo以及代码运行效果如下
无标题文档 col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-4 col-lg-offset-13
- 列排序col-lg-push往后（往右）移动若干个，col-lg-pull往前（往左）移动若干个
-
无标题文档
