01bootstrap_基本结构和布局

01bootstrap_基本结构

---

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

基本结构

container page-header

布局

1.响应式布局：container-fluid

2.媒体查询:

/*手机屏幕
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