bootstrap自帶的隱藏類別有:「.hidden」、「.visible-xs-*」、「.visible-sm-*」、「.visible-md-*」、「.visible- lg-*」、「.hidden-xs」、「.hidden-sm」等等。
本教學操作環境:Windows7系統、bootsrap3.3.7版、DELL G3電腦
Bootstrap 提供了一些輔助類,以便更快地實現對行動裝置友善的開發。這些可以透過媒體查詢結合大型、小型和中型設備,實現內容對設備的顯示和隱藏。
需要謹慎使用這些工具,避免在同一個網站建立完全不同的版本。響應式實用工具目前只適用於區塊和表格切換。
類別 | 描述 |
---|---|
#.show | 強制元素顯示 |
.hidden | 強制元素隱藏 |
#中螢幕 | 桌面 (≥992px) | #大螢幕 | 桌面(≥1200px)||
可見 | #隱藏 | 隱藏 | ||
#隱藏 | ##可見 | ##隱藏隱藏 | .visible-md-* | |
#可見 | #隱藏 | .visible-lg-* | ||
##隱藏 | ##可見||||
##.hidden-xs | 隱藏 | #可見 | 可見 | 可見光 |
.hidden-sm | 可見 | 隱藏 | #可見 | |
# #.hidden-md |
可見
.hidden-lg | |
---|---|
可見 | 隱藏 |
#從v3.2.0 版本起,形如.visible-*-* 的類別針對每種螢幕大小都有了三種變體,每個針對CSS 中不同的display 屬性,列表如下: | |
類別組 | CSS display |
.visible-*-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 版本開始不再建議使用。除了以上是bootstrap自備的隱藏類別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!