bootstrap網格系統（2）
阿新 • • 發佈：2018-12-30
媒體查詢
媒體查詢是非常別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。
Bootstrap 中的媒體查詢允許您基於視口大小移動、顯示並隱藏內容。
下面的媒體查詢在 LESS 檔案中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。
/* 超小裝置（手機，小於 768px） */ /* Bootstrap 中預設情況下沒有媒體查詢 */ /* 小型裝置（平板電腦，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) { ... }
媒體查詢有兩個部分，先是一個裝置規範，然後是一個大小規則。
在上面的案例中，設定了下列的規則：
讓我們來看下面這行程式碼：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
對於所有帶有 min-width: @screen-sm-min 的裝置，如果螢幕的寬度小於 @screen-sm-max，則會進行一些處理。
響應式列重置；
可以使用 .clearfix class和 響應式實用工具來解決，如下面例項所示
<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div>
偏移列
偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支援偏移，但是它們可以簡單地通過使用一個空的單元格來實現該效果。
為了在大螢幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
在下面的例項中，我們有
… ，我們將使用 .col-md-offset-3 class 來居中這個 div。例項
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-md-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
巢狀列
為了在內容中巢狀預設的網格，請新增一個新的 .row，並在一個已有的 .col-md-* 列內新增一組 .col-md-* 列。被巢狀的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。
在下面的例項中，佈局有兩個列，第二列被分為兩行四個盒子。
例項
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分為四個盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</div>
</div>
</div>
</div>
</div>
列排序
Bootstrap 網格系統另一個完美的特性，就是您可以很容易地以一種順序編寫列，然後以另一種順序顯示列。
您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內建網格列的順序，其中 * 範圍是從 1 到 11。
在下面的例項中，我們有兩列布局，左列很窄，作為側邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。
例項
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>
排序前
</p>
<div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
<br>
<div class="row">
<p>
排序後
</p>
<div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
</div>