Bootstrap框架：学习笔记

Bootstrap

1.容器
流体容器：width为auto
固定容器：

阈值 Width
lg:大屏pc

=1200 1170
md:中屏pc
=992&&<1200 970
sm:平板
=768&&<992 750
xs:移动手机
<768 auto

2.栅格系统源码分析：

（1）流体容器和固定容器的公共样式
margin-right:auto;
margin-left:auto;
padding-left: floor((@gutter / 2));
padding- right: ceil((@gutter / 2));

（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.栅格系统
默认分为12份
Col-lg-n(n:1~12)

列偏移
调整的是margin-left，分13个等级（0到12）
0时为0%

列排序
push的时候调整的是left，分13个等级（0到12）
0时为auto

pull的时候调整的是right，分13个等级（0到12）
		0时为auto	 

列偏移
调整的是margin-left，分13个等级（0到12）
0时为0%

列排序
push的时候调整的是left，分13个等级（0到12）
0时为auto

pull的时候调整的是right，分13个等级（0到12）
		0时为auto

4.响应式工具
container 提供了一个15px的padding
row 是 column 直接存在的容器，row 默认最多可有12个 column，
同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。
同时 row 还有一个很特殊的地方，就是左右各有 －15px 的 margin，
为了抵消 container 中15px的 padding
每个column 也会有15px的水平方向的 padding，colunmn 只能在 row 中生存，
由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。
但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，
同时 不同column的内容之间就有了30px的槽

  目的是为了确保列与列之间有30px的槽，列与容器之间有15px的槽