鍍金池/ 教程/ HTML/ 響應(yīng)式工具
警告框
標(biāo)簽頁
代碼
輪播
進度條
輔助類
按鈕組
社區(qū)
標(biāo)簽
導(dǎo)航
響應(yīng)式工具
禁止響應(yīng)式布局
工具提示
概覽
媒體對象
概覽
具有響應(yīng)式特性的嵌入內(nèi)容
Well
折疊
下載
對第三方組件的支持
Glyphicons 字體圖標(biāo)
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設(shè)備的支持情況
輸入框組
表格
滾動監(jiān)聽
下拉菜單
排版
巨幕
按鈕
頁頭
使用 Sass
包含的內(nèi)容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導(dǎo)航
分頁
導(dǎo)航條
警告框
過渡效果
從 v2.x 版本升級到 v3.x 版本
工具
可訪問性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

響應(yīng)式工具

為了加快對移動設(shè)備友好的頁面開發(fā)工作,利用媒體查詢功能并使用這些工具類可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容。另外還包含了針對打印機顯示或隱藏內(nèi)容的工具類。

有針對性的使用這類工具類,從而避免為同一個網(wǎng)站創(chuàng)建完全不同的版本。相反,通過使用這些工具類可以在不同設(shè)備上提供不同的展現(xiàn)形式。

可用的類

通過單獨或聯(lián)合使用以下列出的類,可以針對不同屏幕尺寸隱藏或顯示頁面內(nèi)容。

超小屏幕 手機 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可見
.visible-sm-* 可見
.visible-md-* 可見
.visible-lg-* 可見
.hidden-xs 可見 可見 可見
.hidden-sm 可見 可見 可見
.hidden-md 可見 可見 可見
.hidden-lg 可見 可見 可見

從 v3.2.0 版本起,形如 .visible-*-*的類針對每種屏幕大小都有了三種變體,每個針對 CSS 中不同的 display 屬性,列表如下:

類組 CSS display

類組 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此,以超小屏幕(xs)為例,可用的 .visible-*-*類是:.visible-xs-block、.visible-xs-inline.visible-xs-inline-block

.visible-xs、.visible-sm.visible-md.visible-lg 類也同時存在。但是從 v3.2.0 版本開始不再建議使用。除了<table> 相關(guān)的元素的特殊情況外,它們與 .visible-*-block 大體相同。

打印類

和常規(guī)的響應(yīng)式類一樣,使用下面的類可以針對打印機隱藏或顯示某些內(nèi)容。

class 瀏覽器 打印機
.visible-print-block
.visible-print-inline
.visible-print-inline-block
可見
.hidden-print 可見

.visible-print 類也是存在的,但是從 v3.2.0 版本開始不建議使用。它與 .visible-print-block 類大致相同,除了 <table> 相關(guān)元素的特殊情況外。

測試用例

調(diào)整你的瀏覽器大小,或者用其他設(shè)備打開頁面,都可以測試這些響應(yīng)式工具類。

在...上可見

帶有綠色標(biāo)記的元素表示其在當(dāng)前瀏覽器視口(viewport)中是可見的。

http://wiki.jikexueyuan.com/project/bootstrap/images/b1.png" alt="" />

在...上隱藏

帶有綠色標(biāo)記的元素表示其在當(dāng)前瀏覽器視口(viewport)中是隱藏的。

http://wiki.jikexueyuan.com/project/bootstrap/images/b2.png" alt="" />

上一篇:表單下一篇:輸入框組