01bootstrap_基本结构和布局

01bootstrap_基本结构

---

学习bootstrap需要下载必要的文件：www.bootcss.com

基本结构

container page-header

布局

1.响应式布局：container-fluid
2.媒体查询:
/*手机屏幕 <768px*/
body {
background-color:#fff;
color: pink;
}
/*平板电脑、小屏幕 >=768*/
@media (min-768px) {body {
background-color:#09F;
font-size: 20px;
}}
/*电脑屏幕 >=992*/
@media (min-992px) {body {
background-color:#FC0;
font-size: 40px;
}}
/*大屏幕 >=1200*/
@media (min-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