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
響應式框架推薦
對於用習慣了bootstrap開發頁面的程式設計師來說，bootstrap就已經足夠滿足需求了，響應式web設計不僅能夠讓頁面適應螢幕尺寸還能給使用者帶來完美的體驗，下面是從網上獲取的資源對幾款響應式框架的乙個介紹，希望能給大家提供更多的參考。ui是web的靈魂！semantic是為攻城師而製作的可...
響應式WebUI框架整理
1 frozen ui 移動框架 簡單易用，輕量快捷，為移動端服務的前端框架。依賴第三方類庫，如 zeptojs 2 ydui touch ydui touch 專為移動端打造，在技術實現 互動設計上相容主流移動裝置，保證 輕 效能高。3 sui mobile 4 mui 追求效能體驗，是我們開始啟...
Bootstrap框架和響應式布局
1.浮動 百分比布局 2.fiex布局 flex布局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變 responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。螢...