Bootstrap CSS 輔助類參考
文字
使用以下類透過文字顏色新增含義。連結在懸停時會變暗
| 類 | 描述 | 示例 |
|---|---|---|
| .text-muted | 使用類“text-muted”設定文字樣式 | 試一試 |
| .text-primary | 使用類“text-primary”設定文字樣式 | 試一試 |
| .text-success | 使用類“text-success”設定文字樣式 | 試一試 |
| .text-info | 使用類“text-info”設定文字樣式 | 試一試 |
| .text-warning | 使用類“text-warning”設定文字樣式 | 試一試 |
| .text-danger | 使用類“text-danger”設定文字樣式 | 試一試 |
背景
使用以下類透過背景顏色新增含義。連結在懸停時會像文字類一樣變暗
| 類 | 描述 | 示例 |
|---|---|---|
| .bg-primary | 表格單元格使用類“bg-primary”設定樣式 | 試一試 |
| .bg-success | 表格單元格使用類“bg-success”設定樣式 | 試一試 |
| .bg-info | 表格單元格使用類“bg-info”設定樣式 | 試一試 |
| .bg-warning | 表格單元格使用類“bg-warning”設定樣式 | 試一試 |
| .bg-danger | 表格單元格使用類“bg-danger”設定樣式 | 試一試 |
其他
| 類 | 描述 | 示例 |
|---|---|---|
| .pull-left | 將元素浮動到左側 | 試一試 |
| .pull-right | 將元素浮動到右側 | 試一試 |
| .center-block | 將元素設定為 display:block，並設定 margin-right:auto 和 margin-left:auto | 試一試 |
| .clearfix | 清除浮動 | 試一試 |
| .show | 強制顯示元素 (display:block) | 試一試 |
| .hidden | 強制隱藏元素 (display:none) | 試一試 |
| .invisible | 強制元素不可見 (visibility:hidden)。即使不可見，仍會在頁面上佔用空間 | 試一試 |
| .sr-only | 向除螢幕閱讀器之外的所有裝置隱藏元素 | 試一試 |
| .sr-only-focusable | 與 .sr-only 結合使用，可在元素獲得焦點時再次顯示該元素（例如，透過僅使用鍵盤的使用者） | 試一試 |
| .text-hide | 有助於用背景影像替換元素的文字內容 | 試一試 |
| .close | 表示關閉圖示 | 試一試 |
| .caret | 表示下拉功能（在上拉選單中會自動反轉） | 試一試 |
響應式工具
這些類用於透過媒體查詢按裝置顯示和/或隱藏內容。
使用一個或組合可用類，可在視口斷點之間切換內容
| Classes | 超小裝置 手機（<768px） | 小型裝置 平板電腦（≥768px） | 中型裝置 桌上型電腦（≥992px） | 大型裝置 桌上型電腦（≥1200px） |
|---|---|---|---|---|
| .visible-xs-* | 可見 | 隱藏 | 隱藏 | 隱藏 |
| .visible-sm-* | 隱藏 | 可見 | 隱藏 | 隱藏 |
| .visible-md-* | 隱藏 | 隱藏 | 可見 | 隱藏 |
| .visible-lg-* | 隱藏 | 隱藏 | 隱藏 | 可見 |
| .hidden-xs | 隱藏 | 可見 | 可見 | 可見 |
| .hidden-sm | 可見 | 隱藏 | 可見 | 可見 |
| .hidden-md | 可見 | 可見 | 隱藏 | 可見 |
| .hidden-lg | 可見 | 可見 | 可見 | 隱藏 |
隱藏
根據螢幕大小隱藏元素
示例
<h2>示例</h2>
<p>調整此頁面大小以檢視以下文字如何變化：</p>
<h1 class="hidden-xs bg-danger">此文字在超小螢幕上隱藏。</h1>
<h1 class="hidden-sm bg-info">此文字在小螢幕上隱藏。</h1>
<h1 class="hidden-md bg-warning">此文字在中等螢幕上隱藏。</h1>
<h1 class="hidden-lg bg-success">此文字在大螢幕上隱藏。</h1>
結果
示例
調整此頁面大小以檢視以下文字如何變化
此文字在超小螢幕上隱藏。
此文字在小螢幕上隱藏。
此文字在中等螢幕上隱藏。
此文字在大螢幕上隱藏。
從 v3.2.0 開始，.visible-*-* 類有三種變體，每種對應一個 CSS display 屬性值
| 類組 | CSS 顯示 |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
例如，對於小型 (sm) 螢幕，可用的 .visible-*-* 類有：.visible-sm-block、.visible-sm-inline 和 .visible-sm-inline-block。
類 .visible-xs、.visible-sm、.visible-md 和 .visible-lg **從 v3.2.0 開始已棄用**。
示例
<h2>示例</h2>
<p>調整此頁面大小以檢視以下文字如何變化：</p>
<h1 class="visible-xs">此文字僅在超小螢幕上顯示。</h1>
<h1 class="visible-sm">此文字僅在小螢幕上顯示。</h1>
<h1 class="visible-md">此文字僅在中等螢幕上顯示。</h1>
<h1 class="visible-lg">此文字僅在大螢幕上顯示。</h1>
結果
示例
調整此頁面大小以檢視以下文字如何變化
