襄陽網站建設|Bootstrap 響應式實用工具
Bootstrap 提供移動設備輔助類,以便更快開發移動設備。通過媒體查詢結合大型、小型和中型設備,增對設備設置是否顯示和隱藏。
由于版本問題需要謹慎使用這些工具,避免在同一個站點創建完全不同的版本。
超小屏幕 手機 (<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 |
---|---|
.visible-*-block | display: block; |
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
[聲明]原創不易,請轉發者備注下文章來源(hbsjsd.cn)【速建時代】。