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的槽