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;

因此，以超小螢幕（xs）為例，可用的 .visible-*-* 類是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

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

下表列出了列印類。使用這些切換列印內容。

class

瀏覽器印表機

.visible-print-block

.visible-print-inline

.visible-print-inline-block

隱藏可見

.hidden-print

可見隱藏

下面的例項演示了上面所列舉的幫助器類的用法。調整瀏覽器的視窗大小，或者在不同的裝置上載入例項，測試響應式實用工具類。

background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
特別小型
✔ 在特別小型裝置上可見
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
小型✔ 在小型裝置上可見
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
中型✔ 在中型裝置上可見
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
大型✔ 在大型裝置上可見

勾號（✔）表示元素在當前視口中可見。

系列文章：

bootstrap 《基礎一》 css 概覽

bootstrap《基礎二》網路系統

bootstrap《基礎三》排版

bootstrap《基礎四》 **

bootstrap 《基礎五》**

bootstrap《基礎六》 表單

bootstrap 《基礎七》按鈕

bootstrap 《基礎八》

bootstrap《基礎九》輔助類

bootstrap《基礎十》 響應式實用工具

bootstrap《基礎十一》字型圖示(glyphicons)

bootstrap 《基礎十二》下拉列表（dropdowns）

bootstrap《基礎十三》 按鈕組

bootstrap《基礎十四》 按鈕下拉列表

bootstrap《基礎十五》 輸入框組

bootstrap《基礎十六》 導航元素

bootstrap《基礎十七》導航欄

bootstrap 《基礎十八》麵包屑導航（breadcrumbs）

bootstrap 《基礎十九》分頁

bootstrap《基礎二十》 標籤

bootstrap 《基礎二十一》徽章（badges）

bootstrap 《基礎二十二》超大螢幕（jumbotron）

bootstrap 《基礎二十三》頁面標題（page header）

bootstrap《基礎二十四》 縮圖

bootstrap 《基礎二十五》警告（alerts）

bootstrap 《基礎二十六》進度條

Bootstrap《基礎十》 響應式實用工具

原文 bootstrap 基礎十 響應式實用工具 需要謹慎使用這些工具，避免在同乙個站點建立完全不同的版本。響應式實用工具目前只適用於塊和表切換。超小螢幕 手機 768px 小螢幕平板 768px 中等螢幕 桌面 992px 大螢幕桌面 1200px visible xs 可見隱藏 隱藏隱藏 vis...

bootstrap響應式布局

1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器，它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...

響應式布局與Bootstrap

bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說，相容性 多，工作量大，對瀏覽器來說，載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...