## 響應(yīng)式工具
為了更好的在移動(dòng)設(shè)備上展示頁(yè)面效果，利用媒體查詢和一些工具類可以更好地針對(duì)不同的移動(dòng)設(shè)備隱藏或者顯示網(wǎng)頁(yè)內(nèi)容。
**可用的類**
通過(guò)單獨(dú)或聯(lián)合使用以下列出的類，可以針對(duì)不同移動(dòng)設(shè)備屏幕尺寸隱藏或顯示頁(yè)面內(nèi)容。
| |超小屏幕手機(jī) (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) |
|---| --- | --- | --- | --- |
| .visible-xs-*| 可見(jiàn) | 隱藏 | 隱藏 | 隱藏 |
| .visible-sm-* | 隱藏 | 可見(jiàn) | 隱藏 | 隱藏 |
| .visible-md-* | 隱藏 | 隱藏 | 可見(jiàn) | 隱藏 |
| .visible-lg-* | 隱藏 | 隱藏 | 隱藏 | 可見(jiàn) |
| .hidden-xs | 隱藏 | 可見(jiàn) | 可見(jiàn) | 可見(jiàn) |
| .hidden-sm | 可見(jiàn) | 隱藏 | 可見(jiàn) | 可見(jiàn) |
| .hidden-md | 可見(jiàn) | 可見(jiàn) | 隱藏 | 可見(jiàn) |
| .hidden-lg | 可見(jiàn) | 可見(jiàn) | 可見(jiàn) | 隱藏 |
對(duì)于visible顯示的內(nèi)容 \* 部分可以有3種取值，分別是:?1.block以塊元素的形式顯示.? ??2.inline以行內(nèi)元素的形式顯示 .??3.inline-block以行內(nèi)塊元素的形式顯示.
*****
**打印類**
和常規(guī)的響應(yīng)式類一樣，使用下面的類可以針對(duì)打印機(jī)隱藏或顯示某些內(nèi)容。
| class | 瀏覽器 | 打印機(jī) |
| --- | --- | --- |
| .visible-print-block 、 .visible-print-inline 、 .visible-print-inline-block | 隱藏 | 可見(jiàn) |
| .hidden-print | 可見(jiàn) | 隱藏 |
調(diào)整你的瀏覽器大小，或者用其他設(shè)備打開(kāi)頁(yè)面，都可以測(cè)試這些響應(yīng)式工具類，在實(shí)際項(xiàng)目中要按照項(xiàng)目的需求運(yùn)用這些工具類。案例可以參照bootstrap官網(wǎng)案例。
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項(xiàng)
- 2、柵格系統(tǒng)
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應(yīng)式工具
- 第三章 . bootstrap相關(guān)CSS應(yīng)用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關(guān)系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標(biāo)
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導(dǎo)航
- 7、導(dǎo)航條
- 8、路徑導(dǎo)航
- 9、分頁(yè)
- 10、標(biāo)簽
- 11、徽章
- 12、巨幕
- 13、頁(yè)頭
- 14、縮略圖
- 15、警告框
- 16、進(jìn)度條
- 17、媒體對(duì)象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過(guò)渡效果 (transition.js)
- 3、模態(tài)框 （modal.js）
- 4、下拉菜單 （dropdown.js）
- 5、滾動(dòng)監(jiān)聽(tīng) （scrollspy.js）
- 6、可切換標(biāo)簽 （tab.js）
- 7、工具提示 （tooltip.js）
- 8、彈出框 （popover.js）
- 9、警告信息 （alert.js）
- 10、按鈕 （button.js）
- 11、折疊插件（collapse.js）
- 12、輪播插件（carousel.js）
- 13、Affix插件（affix.js）