bootstrap 基础（二） - 许大仙_H5之家 - 中国HTML5教程资源分享第一站

1 栅格系统偏移

栅格系统的偏移只能向右：col-xs-offset-x。

bootstrap学习屏幕和设备的宽度保持一致，初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif] div[class*='col-md']{ bordercol-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1col-md-1 pc端大屏幕显示四张图片，pc端中等屏幕显示三张图片，平板显示二张图片，手机端显示一张图片美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女 42

2 栅格系统的排序

col-xs-pull-5 向左偏移5个栅格，pull是拉取的意思。

col-xs-push-5 向右偏移5个栅格，push是推的意思。

3 辅助类

情境文本颜色

情境背景颜色

bootstrap学习屏幕和设备的宽度保持一致，初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]平林漠漠烟如织寒山一带伤心碧暝色入高楼有人楼上愁玉阶空伫立宿鸟归飞急寒山一带伤心碧暝色入高楼有人楼上愁玉阶空伫立宿鸟归飞急

下拉小三角

bootstrap学习屏幕和设备的宽度保持一致，初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]平林漠漠烟如织寒山一带伤心碧暝色入高楼有人楼上愁玉阶空伫立宿鸟归飞急寒山一带伤心碧暝色入高楼有人楼上愁玉阶空伫立宿鸟归飞急

快速浮动

class="pull-left" 向左浮动，pull的意思是拉

class="pull-right" 向右浮动　　

bootstrap学习屏幕和设备的宽度保持一致，初始缩放为1:1 [if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif] .top{ width border margin .pull-left{ width height background-color .pull-right{ width height background-color左边哦右边啦

清除浮动：在父元素上添加overflow:hidden样式。