- 媒體查詢
在柵格系統(tǒng)中栈暇，我們在 Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關鍵的分界點閾值艺晴。
/* 超小屏幕（手機霞掺，小于 768px） */ /* 沒有任何媒體查詢相關的代碼苛谷，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優(yōu)先的嗎盗忱？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器屉栓，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器舷蒲，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }
我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內。
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
- 柵格參數(shù)
image.png
lg
lgmd
mdsm
image.pngxs（自動）
image.png
- 從堆疊到水平排列
比如
.col-md-*友多，當寬度>=992px的時候牲平，呈現(xiàn)水平，小于則呈現(xiàn)堆疊<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
- 在小屏幕上不呈現(xiàn)堆疊
<div class="container"> <div class="row"> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> <div class="col-md-1 col-sm-4 col-xs-2">.col-md-1</div> </div> </div>
- 流式布局容器
將最外面的布局元素 .container 修改為 .container-fluid夷陋，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局欠拾。
<div class="container-fluid"> <div class="row"> ... </div> </div>
- 多余的列（column）將另起一行排列
如果在一個 .row 內包含的列（column）大于12個胰锌，包含多余列（column）的元素將作為一個整體單元被另起一行排列骗绕。<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4 <br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6 <br>Subsequent columns continue along the new line.</div> </div>
- 列偏移
使用 .col-md-offset-* 類可以將列
向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）资昧。例如酬土，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>
col-sm-offset-2：在col-sm生效的情況下向右偏移2列
注：offset如果向右偏移超過12格带，那么就會另起一行撤缴，而且偏移也會從下一行重新算起，如<div class="row"> <div class="col-xs-7" style="background-color: red">col-xs-7</div> <div class="col-xs-4 col-xs-offset-2" style="background-color: yellow">col-xs-4 col-xs-offset-2</div> </div>image.png
- 嵌套列
為了使用內置的柵格系統(tǒng)將內容再次嵌套叽唱，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內屈呕。被嵌套的行（row）所包含的列（column）的個數(shù)不能超過12（其實，沒有要求你必須占滿12列）棺亭。
<div class="row"> <div class="col-sm-9" style="background-color: red"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6" style="background-color: blue"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6" style="background-color: yellow"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
- 列排序
通過使用
.col-md-push-*和.col-md-pull-*類就可以很容易的改變列（column）的順序虎眨。
注：這個操作可以使柵格重疊
col-md-push-4是從左到右第4列開始
col-md-pull-5是從右到左第5列開始<div class="row"> <div class="col-md-9 col-md-push-4">col-md-9 col-md-push-4</div> <div class="col-md-3 col-md-pull-5">col-md-3 col-md-pull-5</div> </div>image.png
