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