bootstrap框架学习笔记

bootstrap框架相关知识点

1. bootstrap框架首先下载它的css和js，还有jQuery.js并引用。以移动设备优先。
2. 流体容器：container-fluid，就是一个弹性布局，容器的width为auto，只是两边加了15px的padding。
3. 固定容器：container，有阈值，容器的width会随设备分辨率的不同而生产变化。

   阈值	width
   大于等于1200(lg 大屏pc)	1170（1140+槽宽）	大于等于992(md 中屏pc)小于1200	970（940+槽宽）	大于等于768(sm 平板)小于992	750（720+槽宽）	小于768(xs 移动手机)	auto

栅格源码分析

1. 流体容器&固定容器 公共样式

    margin-right: auto;

    margin-left: auto;

    padding-left: 15px;

    padding-right: 15px;

2. 固定容器 特定样式（顺序不可变） 变化就出错,因为是从小到大排序的,相反会导致小的读不到.

@media (min-width: @screen-sm-min) {

width: @container-sm;

}

@media (min-width: @screen-md-min) {

width: @container-md;

}

@media (min-width: @screen-lg-min) {

width: @container-lg;

}

3. 行

margin-left: -15px;

margin-right: -15px;

4. 列（递归）

.make-grid-columns()--->

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,

.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,

...

.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{

    position: relative;

    min-height: 1px;

    padding-left: 15px;

    padding-right: 15px;

}

.make-grid(xs)--->

float-grid-columns(@class);

 .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{

 float: left;

}

.loop-grid-columns(@grid-columns, @class, width);

.col-xs-12{

 width:12/12;

 }

 .col-xs-11{

 width:11/12;

 }

 ...

 .col-xs-1{

 width:1/12;

 }

.loop-grid-columns(@grid-columns, @class, pull);

.loop-grid-columns(@grid-columns, @class, push);

push pull:

 .col-xs-push-12{ .col-xs-pull-12{

 left:12/12; right:12/12;

 } }

 .col-xs-push-11{

 left:11/12;

 }

 ... ...
 .col-xs-push-1{
 left:1/12;
 }

.col-xs-push-0{ .col-xs-pull-0{

 left:auto; right:auto;

 } }

.loop-grid-columns(@grid-columns, @class, offset);

栅格系统

col-lg-x

col-md-x

col-sm-x

col-xs-x

x默认拥有12个等级

列偏移

调整的是margin-left，分13个等级（0到12）

0时为0%

列排序

（注意阈值上样式的设置不能跳跃）

push的时候调整的是left（从左往右），分13个等级（0到12）

0时为auto

pull的时候调整的是right（从右往左），分13个等级（0到12）

0时为auto

响应式工具

visible- 到一定阈值时显示

hidden- 到一定阈值时隐藏

栅格盒模型设计的精妙之处

容器两边具有15px的padding

行 两边具有-15px的margin

列 两边具有15px的padding

1. 为了维护槽宽的规则，列两边必须得要15px的padding

2. 为了能使列嵌套行，行两边必须要有-15px的margin

3. 为了让容器可以包裹住行，容器两边必须要有15px的padding