媒體查詢
/* 超小屏幕（手機，小於 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 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) { ... }
柵格參數
通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行為 | 總是水平排列 | 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
實例:
縮放瀏覽器大小查看效果
<div class="row">
<div class="col-xs-1 col-sm-4 col-md-1 col-lg-10">4</div>
<div class="col-xs-1 col-sm-4 col-md-1 col-lg-1">4</div>
<div class="col-xs-1 col-sm-4 col-md-10 col-lg-1">4</div>
</div>
效果:
參考api:http://v3.bootcss.com/css/#grid