bootstrap框架相关知识点
bootstrap框架首先下载它的css和js，还有jQuery.js并引用。以移动设备优先。- 流体容器：
container-fluid，就是一个弹性布局，容器的width为auto，只是两边加了15px的padding。 - 固定容器：
container，有阈值，容器的width会随设备分辨率的不同而生产变化。阈值 width 大于等于1200(lg 大屏pc) 1170（1140+槽宽） 大于等于992(md 中屏pc)小于1200 970（940+槽宽） 大于等于768(sm 平板)小于992 750（720+槽宽） 小于768(xs 移动手机) auto
栅格源码分析
-
流体容器&固定容器 公共样式
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
- 固定容器 特定样式（顺序不可变） 变化就出错,因为是从小到大排序的,相反会导致小的读不到.
@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;
}
- 行
margin-left: -15px;
margin-right: -15px;
- 列（递归）
.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
-
为了维护槽宽的规则，列两边必须得要15px的
padding -
为了能使列嵌套行，行两边必须要有-15px的
margin -
为了让容器可以包裹住行，容器两边必须要有15px的
padding
