bootstrap 基础(二) - 许大仙

      2020-08-02 13:32      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-1pc端大屏幕显示四张图片,pc端中等屏幕显示三张图片,平板显示二张图片,手机端显示一张图片美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女42

2 栅格系统的排序col-xs-pull-5 向左偏移5个栅格,pull是拉取的意思。col-xs-push-5 向右偏移5个栅格,push是推的意思。

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-1pc端大屏幕显示四张图片,pc端中等屏幕显示三张图片,平板显示二张图片,手机端显示一张图片美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女abcabc

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]平林漠漠烟如织寒山一带伤心碧暝色入高楼有人楼上愁玉阶空伫立宿鸟归飞急寒山一带伤心碧暝色入高楼有人楼上愁玉阶空伫立宿鸟归飞急

下拉小三角<span></span>  

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{widthbordermargin.pull-left{widthheightbackground-color.pull-right{widthheightbackground-color左边哦右边啦

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