01bootstrap_基本结构
学习bootstrap需要下载必要的文件:www.bootcss.com
基本结构
container page-header布局
1.响应式布局:container-fluid2.媒体查询:
/*手机屏幕 <768px*/
body {
background-color:#fff;
color: pink;
}
/*平板电脑、小屏幕 >=768*/
@media (min-width:768px) {body {
background-color:#09F;
font-size: 20px;
}}
/*电脑屏幕 >=992*/
@media (min-width:992px) {body {
background-color:#FC0;
font-size: 40px;
}}
/*大屏幕 >=1200*/
@media (min-width:1200px) {body {
background-color:#000;
font-size: 60px;
}}
3.栅格系统:
1大的容器->>container 行控制 row 在bootstrap中有12个列可以分割,col-md-x ,col-sm-x,还可以流式布局container-fluid
列排序:col-md-9 col-md-push-3(从左向右移动的格),col-md-3 col-md-pull-3(从右向左移动的格)
列偏移:col-md-4,col-md-4 col-md-offset-1(距离浏览器左边移动的距离)
嵌套布局 逻辑与原来一样
手机、平板、桌面(col-xs-6 col-sm-4)
移动设备和桌面屏幕(col-xs-6 col-md-4)
4.禁止响应式布局:col-xs-4