響應式框架 Bootstrp

1.流體容器 .container-fluid：相當於width：auto 兩側15px padding 2.固定容器閾值 width(內容區，包括內邊距) lg大於等於1200(lg 大屏pc) 1170（1140+槽寬padding-left、padding-right：15px） md大於等於992(md 中屏pc) 970（940+槽寬...） sm大於等於768(sm 平板) 750（720+槽寬...） xs小於768(xs 移動手機) auto 【注：width:auto；加上pdiding後，此時的width不是100%，而是會適當縮減讓padding加上width區域為100%。 width:100%；會強制將元素width變成和父元素一樣的寬，如果此時加上padding，此時螢幕會出現橫向滾動條，因為padding + width 已經超過螢幕寬度注意：width指內容區域，不包括padding和border】兩側15px padding 3.柵格系統 //第一行 col-lg-10 col-lg-2 //第二行 col-lg-6 col-lg-6

1.流體容器&固定容器 公共樣式
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px; 
2.固定容器 特定樣式
順序不可變
@media (min-width: @screen-sm-min) 
@media (min-width: @screen-md-min) 
@media (min-width: @screen-lg-min) 
3.行 margin-left: -15px;
margin-right: -15px;
4.列 （主要運用less遞迴：唯一迴圈方法）
.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
.make-grid(xs)——--->》列原始碼第二步
float-grid-columns(@class);
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12
.loop-grid-columns(@grid-columns, @class, width);
* .col-xs-12
* .col-xs-11
* ...
* .col-xs-1 
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
*push pull:
* .col-xs-push-12 }
* .col-xs-push-11
* ... ...
* .col-xs-push-1 
* .col-xs-push-0 }
.loop-grid-columns(@grid-columns, @class, offset);
offset實際上修改的是 margin-left

控制隱藏與顯示

容器兩邊具有15px的padding 、行兩邊具有-15px的margin 列兩邊具有15px的padding 為了維護槽寬的規則，列兩邊必須得要15px的padding 為了能使列巢狀行（列裡添行）行兩邊必須要有-15px的margin 為了讓容器可以包裹住行（容器擴容）

容器兩邊必須要有15px的padding

響應式框架 Bootstrp

響應式框架推薦

響應式WebUI框架整理

Bootstrap框架和響應式布局

響應式框架 Bootstrp

響應式框架推薦

響應式WebUI框架整理

Bootstrap框架和響應式布局

相關推薦