Bootstrap 4 類 參考
所有 Bootstrap 4 類完整列表
Bootstrap 4 CSS 類完整列表，附帶說明和示例
| 類 | 描述 | 示例 | 類別 |
|---|---|---|---|
.active |
為 **導航欄** 中的活動連結新增白色文字顏色。 | 試一試 | 導航欄 |
.active |
為列表組中的活動 **列表項** 新增藍色背景色 | 試一試 | 列表組 |
.active |
新增深藍色背景色以模擬“按下”的 **按鈕** | 試一試 | 按鈕 |
.active |
為下拉選單中的活動 **下拉選單項** 新增藍色背景色 | 試一試 | 下拉選單 |
.active |
為 **分頁** 連結新增藍色背景色（以突出顯示當前頁面） | 試一試 | 分頁 |
.active |
顯示/顯示當前的 **輪播** 專案 | 試一試 | 輪播 |
.alert |
建立提醒訊息框 | 試一試 | 提醒框 |
.alert-danger |
紅色提醒。表示危險或可能產生負面影響的操作 | 試一試 | 提醒框 |
.alert-dark |
深色提醒。深灰色提醒框 | 試一試 | 提醒框 |
.alert-dismissible |
表示一個可關閉的提醒框。與 .close 類一起使用，此類用於關閉提醒框（添加了額外的內邊距） |
試一試 | 提醒框 |
.alert-heading |
對指定元素新增 color:inherit |
試一試 | 提醒框 |
.alert-info |
青色提醒。表示一箇中性資訊性更改或操作 | 試一試 | 提醒框 |
.alert-light |
淺色提醒。淺灰色提醒框 | 試一試 | 提醒框 |
.alert-link |
用於提醒框內的連結，以提供匹配的顏色連結 | 試一試 | 提醒框 |
.alert-primary |
藍色提醒。表示一個重要操作 | 試一試 | 提醒框 |
.alert-secondary |
灰色提醒。表示一個“不太重要”的操作 | 試一試 | 提醒框 |
.alert-success |
綠色提醒。表示一個成功或正面的操作 | 試一試 | 提醒框 |
.alert-warning |
黃色提醒。表示此操作應謹慎進行 | 試一試 | 提醒框 |
.align-baseline |
元素與父元素的基線對齊。這是預設值 | 試一試 | 實用工具 |
.align-bottom |
元素與行中最低的元素對齊 | 試一試 | 實用工具 |
.align-middle |
元素位於父元素的中間 | 試一試 | 實用工具 |
.align-top |
元素與行中最高元素的頂部對齊 | 試一試 | 實用工具 |
.align-text-top |
元素與父元素字型的頂部對齊 | 試一試 | 實用工具 |
.align-text-bottom |
元素與父元素字型的底部對齊 | 試一試 | 實用工具 |
.align-content-around |
“圍繞”對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-*-around |
在不同螢幕上“圍繞”對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-center |
居中對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-*-center |
在不同螢幕上居中對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-end |
在末尾對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-*-end |
在不同螢幕上在末尾對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-start |
從開頭對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-*-start |
在不同螢幕上從開頭對齊收集的專案 | 試一試 | Flex 佈局 |
.align-content-stretch |
拉伸收集的專案 | 試一試 | Flex 佈局 |
.align-content-*-stretch |
在不同螢幕上拉伸收集的專案 | 試一試 | Flex 佈局 |
.align-items-start |
從開頭對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-*-start |
在不同螢幕上從開頭對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-end |
在末尾對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-*-end |
在不同螢幕上在末尾對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-center |
居中對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-*-center |
在不同螢幕上居中對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-baseline |
在基線對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-*-baseline |
在不同螢幕上在基線對齊單行專案 | 試一試 | Flex 佈局 |
.align-items-stretch |
拉伸單行專案 | 試一試 | Flex 佈局 |
.align-items-*-stretch |
在不同螢幕上拉伸單行專案 | 試一試 | Flex 佈局 |
.align-self-start |
從開頭對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-*-start |
在不同螢幕上從開頭對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-end |
在末尾對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-*-end |
在不同螢幕上在末尾對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-center |
居中對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-*-center |
在不同螢幕上居中對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-baseline |
在基線對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-*-baseline |
在不同螢幕上在基線對齊一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-stretch |
拉伸一個 flex 專案 | 試一試 | Flex 佈局 |
.align-self-*-stretch |
在不同螢幕上拉伸一個 flex 專案 | 試一試 | Flex 佈局 |
.badge |
建立圓形徽章（灰色圓圈 - 通常用作數字指示器） | 試一試 | 徽章 |
.badge-danger |
紅色徽章。表示危險或可能產生負面影響的操作 | 試一試 | 徽章 |
.badge-dark |
深色徽章。深灰色提醒框 | 試一試 | 徽章 |
.badge-info |
青色徽章。表示一箇中性資訊性更改或操作 | 試一試 | 徽章 |
.badge-light |
淺色徽章。淺灰色提醒框 | 試一試 | 徽章 |
.badge-pill |
使徽章更圓 | 試一試 | 徽章 |
.badge-primary |
藍色徽章。表示一個重要操作 | 試一試 | 徽章 |
.badge-secondary |
灰色徽章。表示一個“不太重要”的操作 | 試一試 | 徽章 |
.badge-success |
綠色徽章。表示一個成功或正面的操作 | 試一試 | 徽章 |
.badge-warning |
黃色徽章。表示此操作應謹慎進行 | 試一試 | 徽章 |
.bg-danger |
為元素新增紅色背景色。表示危險或負面操作 | 試一試 | 顏色 |
.bg-dark |
為元素新增深灰色背景色 | 試一試 | 顏色 |
.bg-info |
為元素新增青色背景色。表示一些資訊 | 試一試 | 顏色 |
.bg-light |
為元素新增淺灰色背景色 | 試一試 | 顏色 |
.bg-primary |
為元素新增藍色背景色。表示一些重要的內容 | 試一試 | 顏色 |
.bg-secondary |
為元素新增灰色背景色。表示一個“不太重要”的操作 | 試一試 | 顏色 |
.bg-success |
為元素新增綠色背景色。表示成功或正面的操作 | 試一試 | 顏色 |
.bg-warning |
為元素新增黃色/橙色背景色。表示警告或負面操作 | 試一試 | 顏色 |
.blockquote |
樣式化來自其他來源的引用的塊內容（新增更大的字號 (1.25rem)） | 試一試 | 排版 |
.blockquote-footer |
樣式化引用塊內的來源標題（淺灰色文字，有縮排） | 試一試 | 排版 |
.border |
為元素新增邊框 | 試一試 | 實用工具 |
.border-bottom-0 |
移除元素的底部邊框 | 試一試 | 實用工具 |
.border-danger |
為元素新增紅色邊框（表示危險） | 試一試 | 實用工具 |
.border-dark |
為元素新增深色邊框 | 試一試 | 實用工具 |
.border-info |
為元素新增青色邊框（表示資訊） | 試一試 | 實用工具 |
.border-left-0 |
移除元素的左邊框 | 試一試 | 實用工具 |
.border-light |
為元素新增淺灰色邊框 | 試一試 | 實用工具 |
.border-primary |
為元素新增藍色邊框 | 試一試 | 實用工具 |
.border-right-0 |
移除元素的右邊框 | 試一試 | 實用工具 |
.border-top-0 |
移除元素的頂部邊框 | 試一試 | 實用工具 |
.border-secondary |
為元素新增灰色邊框 | 試一試 | 實用工具 |
.border-success |
為元素新增綠色邊框（表示成功） | 試一試 | 實用工具 |
.border-warning |
為元素新增橙色邊框（表示警告） | 試一試 | 實用工具 |
.border-white |
為元素新增白色邊框 | 試一試 | 實用工具 |
.border-0 |
移除元素的全部邊框 | 試一試 | 實用工具 |
.breadcrumb |
分頁。表示當前頁面在導航層級中的位置 | 試一試 | 分頁 |
.breadcrumb-item |
樣式化麵包屑導航中的列表項或連結 | 試一試 | 分頁 |
.btn |
建立基本按鈕（灰色背景和圓角） | 試一試 | 按鈕 |
.btn-block |
建立塊級按鈕，跨越父元素的整個寬度 | 試一試 | 按鈕 |
.btn-dark |
深灰色按鈕 | 試一試 | 按鈕 |
.btn-danger |
紅色按鈕。表示危險或負面操作 | 試一試 | 按鈕 |
.btn-group |
將按鈕組合在一起，顯示在同一行 | 試一試 | 按鈕組 |
.btn-group-lg |
大型按鈕組（使按鈕組中的所有按鈕變大 - 增加字號和內邊距） | 試一試 | 按鈕組 |
.btn-group-sm |
小型按鈕組（使按鈕組中的所有按鈕變小） | 試一試 | 按鈕組 |
.btn-group-vertical |
使按鈕組垂直堆疊 | 試一試 | 按鈕組 |
.btn-info |
青色按鈕。表示一箇中性資訊性更改或操作 | 試一試 | 按鈕 |
.btn-light |
淺灰色按鈕 | 試一試 | 按鈕 |
.btn-link |
使按鈕看起來像連結（獲得按鈕行為） | 試一試 | 按鈕 |
.btn-lg |
大型按鈕 | 試一試 | 按鈕 |
.btn-outline-dark |
深灰色邊框/輪廓按鈕 | 試一試 | 按鈕 |
.btn-outline-danger |
紅色邊框/輪廓按鈕。表示危險或負面操作 | 試一試 | 按鈕 |
.btn-outline-info |
青色邊框/輪廓按鈕。表示一箇中性資訊性更改或操作 | 試一試 | 按鈕 |
.btn-outline-light |
淺灰色邊框/輪廓按鈕 | 試一試 | 按鈕 |
.btn-outline-primary |
藍色邊框/輪廓按鈕。 | 試一試 | 按鈕 |
.btn-outline-secondary |
灰色邊框/輪廓按鈕。表示一個“不太重要”的操作 | 試一試 | 按鈕 |
.btn-outline-success |
綠色邊框/輪廓按鈕。表示成功或正面的操作 | 試一試 | 按鈕 |
.btn-outline-warning |
橙色邊框/輪廓按鈕。表示警告或負面操作 | 試一試 | 按鈕 |
.btn-primary |
藍色按鈕。表示一些重要的內容 | 試一試 | 按鈕 |
.btn-sm |
小型按鈕 | 試一試 | 按鈕 |
.btn-secondary |
灰色按鈕。表示一個“不太重要”的操作 | 試一試 | 按鈕 |
.btn-success |
綠色按鈕。表示成功或正面的操作 | 試一試 | 按鈕 |
.btn-toolbar |
將按鈕組組合成按鈕工具欄，用於更復雜的元件 | 試一試 | 按鈕組 |
.btn-warning |
橙色按鈕。表示警告或負面操作 | 試一試 | 按鈕 |
.card |
建立卡片 | 試一試 | 卡片 |
.card-body |
卡片內容的容器 | 試一試 | 卡片 |
.card-columns |
建立卡片拼貼式網格的容器 | 試一試 | 卡片 |
.card-danger |
為卡片新增紅色背景色。表示危險或負面操作 | 試一試 | 卡片 |
.card-dark |
為卡片新增灰色背景色 | 試一試 | 卡片 |
.card-deck |
建立具有相等高度和寬度的卡片網格的容器 | 試一試 | 卡片 |
.card-footer |
卡片頁尾 | 試一試 | 卡片 |
.card-group |
建立具有相等高度和寬度的卡片網格的容器，**無側邊距** | 試一試 | 卡片 |
.card-header |
卡片標題 | 試一試 | 卡片 |
.card-header-tabs |
樣式化卡片標題中的導航標籤 | 試一試 | 卡片 |
.card-header-pills |
樣式化卡片標題中的導航藥丸 | 試一試 | 卡片 |
.card-img-bottom |
將圖片放置在卡片底部 | 試一試 | 卡片 |
.card-img-overlay |
將圖片變成卡片背景。常用於在圖片上新增文字 | 試一試 | 卡片 |
.card-img-top |
將圖片放置在卡片頂部 | 試一試 | 卡片 |
.card-info |
為卡片新增青色背景色。表示一些資訊 | 試一試 | 卡片 |
.card-light |
為卡片新增淺灰色背景色 | 試一試 | 卡片 |
.card-link |
為卡片內的任何連結新增藍色以及懸停效果 | 試一試 | 卡片 |
.card-primary |
為卡片新增藍色背景色。表示一些重要的內容 | 試一試 | 卡片 |
.card-secondary |
為卡片新增灰色背景色。表示一些“不太重要”的內容 | 試一試 | 卡片 |
.card-subtitle |
.card-subtitle 用於 .card-title 之後，並向元素新增以下內容：margin-top: -.375rem; margin-bottom: 0; |
試一試 | 卡片 |
.card-success |
為卡片新增綠色背景色。表示成功或正面的操作 | 試一試 | 卡片 |
.card-text |
用於移除 .card-body 中 p 元素作為最後一個（或唯一一個）子元素時的底部邊距 |
試一試 | 卡片 |
.card-title |
為卡片內的任何標題元素新增標題 | 試一試 | 卡片 |
.card-warning |
為卡片新增黃色/橙色背景色。表示警告或負面操作 | 試一試 | 卡片 |
.carousel |
建立輪播（幻燈片） | 試一試 | 輪播 |
.carousel-caption |
為輪播中的每個幻燈片建立標題文字 | 試一試 | 輪播 |
.carousel-control-next |
“下一個”輪播/專案連結的容器 | 試一試 | 輪播 |
.carousel-control-next-icon |
與 .carousel-control-next 一起使用，建立“下一個”圖示/按鈕（向右箭頭） |
試一試 | 輪播 |
.carousel-control-prev |
“上一個”輪播/專案連結的容器 | 試一試 | 輪播 |
.carousel-control-prev-icon |
與 .carousel-control-prev 一起使用，建立“上一個”圖示/按鈕（向左箭頭） |
試一試 | 輪播 |
.carousel-indicators |
在每個幻燈片的底部新增小圓點/指示器（表示輪播中有多少張幻燈片，以及使用者當前正在檢視的幻燈片） | 試一試 | 輪播 |
.carousel-inner |
幻燈片專案的容器 | 試一試 | 輪播 |
.carousel-item |
指定每個幻燈片的內容 | 試一試 | 輪播 |
.clearfix |
清除浮動 | 試一試 | 實用工具 |
.close |
樣式化關閉圖示。這通常用於提醒框和模態框。通常與 × 符號結合使用以建立實際的圖示（一個更好看的“x”）。它預設浮動到右側 | 試一試 | 實用工具 |
.col-auto |
讓表單列根據內容自動調整大小 | 試一試 | 表單 |
.col-* |
為超小裝置建立列布局（**以及更大/所有裝置**，如果未與其他列類組合）。* 可以是 1 到 12 之間的數字 | 試一試 | 網格系統 |
.col-sm-* |
為小型裝置建立列布局（**以及更大**，如果未與其他列類組合）。* 可以是 1 到 12 之間的數字 | 試一試 | 網格系統 |
.col-md-* |
為中型裝置建立列布局（**以及更大**，如果未與其他列類組合）。* 可以是 1 到 12 之間的數字 | 試一試 | 網格系統 |
.col-lg-* |
為大型裝置建立列布局（**以及更大**，如果未與其他列類組合）。* 可以是 1 到 12 之間的數字 | 試一試 | 網格系統 |
.col-xl-* |
為超大裝置建立列布局。* 可以是 1 到 12 之間的數字 | 試一試 | 網格系統 |
.collapse |
表示可摺疊內容 - 可按需隱藏或顯示 | 試一試 | 摺疊 |
.collapse show |
預設顯示可摺疊內容 | 試一試 | 摺疊 |
.container |
固定寬度的容器，寬度由螢幕大小決定。左右邊距相等。 | 試一試 | 容器 |
.container-fluid |
跨越螢幕全寬的容器 | 試一試 | 容器 |
.container-* |
響應式容器 | 試一試 | 容器 |
.custom-checkbox |
自定義複選框的包裝器/容器 | 試一試 | 自定義表單 |
.custom-control |
自定義表單的包裝器/容器 | 試一試 | 自定義表單 |
.custom-control-input |
自定義表單控制元件 | 試一試 | 自定義表單 |
.custom-control-inline |
內聯（水平 - 並排）自定義表單控制元件 | 試一試 | 自定義表單 |
.custom-control-label |
自定義標籤，與自定義表單控制元件一起使用時 | 試一試 | 自定義表單 |
.custom-file |
自定義檔案上傳 | 試一試 | 自定義表單 |
.custom-file-input |
自定義檔案上傳 | 試一試 | 自定義表單 |
.custom-file-label |
自定義檔案標籤 | 試一試 | 自定義表單 |
.custom-radio |
自定義單選按鈕的包裝器/容器 | 試一試 | 自定義表單 |
.custom-range |
自定義範圍控制元件 | 試一試 | 自定義表單 |
.custom-select |
自定義選擇選單 | 試一試 | 自定義表單 |
.custom-select-lg |
大型自定義選擇選單 | 試一試 | 自定義表單 |
.custom-select-sm |
小型自定義選擇選單 | 試一試 | 自定義表單 |
.custom-switch |
自定義切換開關 | 試一試 | 自定義表單 |
.disabled |
停用 **按鈕**（新增不透明度和懸停時的“禁止停車標誌”圖示） | 試一試 | 按鈕 |
.disabled |
停用 **下拉選單** 項（新增灰色文字顏色和懸停時的“禁止停車標誌”圖示） | 試一試 | 下拉選單 |
.disabled |
停用 **分頁** 連結（無法點選 - 新增灰色文字顏色和懸停時的“禁止停車標誌”圖示） | 試一試 | 分頁 |
.disabled |
停用列表組中的 **列表** 項（無法點選 - 新增淺灰色顏色並移除列表項鍊接上的懸停效果） | 試一試 | 列表組 |
.dropdown |
建立可切換選單，允許使用者從預定義列表中選擇一個值 | 試一試 | 下拉選單 |
.dropdown-divider |
用於使用細水平邊框分隔下拉選單中的連結 | 試一試 | 下拉選單 |
.dropdown-header |
用於在下拉選單中新增標題 | 試一試 | 下拉選單 |
.dropdown-item |
建立下拉選單項（新增到 .dropdown-menu 中的連結或按鈕） | 試一試 | 下拉選單 |
.dropdown-item-text |
用於向下拉選單項新增純文字，或用於連結以獲得預設連結樣式 | 試一試 | 下拉選單 |
.dropdown-menu |
新增下拉選單容器的預設樣式 | 試一試 | 下拉選單 |
.dropdown-menu-right |
右對齊下拉選單 | 試一試 | 下拉選單 |
.dropdown-toggle |
用於應該隱藏和顯示（切換）下拉選單的按鈕 | 試一試 | 下拉選單 |
.dropleft |
左對齊下拉選單 | 試一試 | 下拉選單 |
.dropright |
右對齊下拉選單 | 試一試 | 下拉選單 |
.dropup |
表示向上展開的選單（向上而不是向下） | 試一試 | 下拉選單 |
.d-block |
建立塊級元素（新增 display:block） |
試一試 | 實用工具 |
.d-*-block |
在特定螢幕寬度上建立塊級元素 | 試一試 | 實用工具 |
.d-inline |
使元素內聯 | 試一試 | 實用工具 |
.d-*-inline |
在特定螢幕尺寸上使元素內聯 | 試一試 | 實用工具 |
.d-inline-block |
使元素成為內聯塊 | 試一試 | 實用工具 |
.d-*-inline-block |
在特定螢幕尺寸上使元素成為內聯塊 | 試一試 | 實用工具 |
.d-flex |
建立 flexbox 容器並將直接子元素轉換為 flex 專案 | 試一試 | Flex 佈局 |
.d-*-flex |
在特定螢幕尺寸上建立 flexbox 容器 | 試一試 | Flex 佈局 |
.d-inline-flex |
建立內聯 flexbox 容器 | 試一試 | Flex 佈局 |
.d-*-inline-flex |
在特定螢幕尺寸上建立內聯 flexbox 容器 | 試一試 | Flex 佈局 |
.d-none |
隱藏元素 | 試一試 | 實用工具 |
.d-*-none |
在特定螢幕尺寸上隱藏元素 | 試一試 | 實用工具 |
.d-table |
使元素顯示為表格 | 試一試 | 實用工具 |
.d-*-table |
在特定螢幕尺寸上使元素顯示為表格 | 試一試 | 實用工具 |
.d-table-cell |
使元素顯示為表格單元格 | 試一試 | 實用工具 |
.d-*-table-cell |
在特定螢幕尺寸上使元素顯示為表格單元格 | 試一試 | 實用工具 |
.d-table-row |
使元素顯示為表格行 | 試一試 | 實用工具 |
.d-*-table-row |
在特定螢幕尺寸上使元素顯示為表格行 | 試一試 | 實用工具 |
.embed-responsive |
嵌入式內容的容器。使影片或幻燈片在任何裝置上都能正確縮放 | 試一試 | 圖片 |
.embed-responsive-16by9 |
嵌入式內容的容器。建立 16:9 寬高比的嵌入式內容 | 試一試 | 圖片 |
.embed-responsive-3by4 |
嵌入式內容的容器。建立 3:4 寬高比的嵌入式內容 | 試一試 | 圖片 |
.embed-responsive-item |
用於 .embed-responsive 內部。使影片能很好地縮放到父元素 |
試一試 | 圖片 |
.fade |
關閉提醒框時新增淡入淡出效果 | 試一試 | 提醒框 |
.fade |
顯示標籤/藥丸內容時新增淡入淡出效果 | 試一試 | 導航 |
.fade |
開啟模態框時新增淡入淡出效果 | 試一試 | 模態框 |
.fixed-bottom |
使元素固定在螢幕底部（粘性/固定） | 試一試 | 實用工具 |
.fixed-top |
使元素固定在螢幕頂部（粘性/固定） | 試一試 | 實用工具 |
.flex-column |
垂直顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-*-column |
在不同螢幕尺寸上垂直顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-column-reverse |
反向垂直顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-*-column-reverse |
在不同螢幕尺寸上反向垂直顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-fill |
用於 flex 專案，強制它們成為等寬列 | 試一試 | Flex 佈局 |
.flex-*-fill |
在不同螢幕上強制 flex 專案成為等寬 | 試一試 | Flex 佈局 |
.flex-grow-0|1 |
用於單個 flex 專案，使其佔據剩餘的可用空間 | 試一試 | Flex 佈局 |
.flex-nowrap |
不換行 flex 專案 | 試一試 | Flex 佈局 |
.flex-*-nowrap |
在不同螢幕上不換行專案 | 試一試 | Flex 佈局 |
.flex-shrink-0|1 |
用於單個 flex 專案，在必要時縮小它 | Flex 佈局 | |
.flex-row |
水平顯示 flex 專案（並排） | 試一試 | Flex 佈局 |
.flex-*-row |
在特定螢幕尺寸上水平顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-row-reverse |
右對齊並水平顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-*-row-reverse |
在特定螢幕尺寸上右對齊並水平顯示 flex 專案 | 試一試 | Flex 佈局 |
.flex-wrap |
換行 flex 專案 | 試一試 | Flex 佈局 |
.flex-*-wrap |
在不同螢幕上換行專案 | 試一試 | Flex 佈局 |
.flex-wrap-reverse |
反向換行 flex 專案 | 試一試 | Flex 佈局 |
.flex-*-wrap-reverse |
在不同螢幕上反向換行 flex 專案 | 試一試 | Flex 佈局 |
.float-left |
將元素浮動到左側 | 試一試 | 實用工具 |
.float-*-left |
在不同螢幕上將元素浮動到左側 | 試一試 | 實用工具 |
.float-none |
移除元素的浮動 | 試一試 | 實用工具 |
.float-right |
將元素浮動到右側 | 試一試 | 實用工具 |
.float-*-right |
在不同螢幕上將元素浮動到左側 | 試一試 | 實用工具 |
.font-italic |
斜體 文字 | 試一試 | 排版 |
.font-weight-bold |
粗體 文字 | 試一試 | 排版 |
.font-weight-bolder |
更粗的 文字 (font-weight:bolder) | 試一試 | 排版 |
.font-weight-light |
纖細字型文字 (font-weight:300) | 試一試 | 排版 |
.font-weight-lighter |
更纖細字型文字 (font-weight:lighter) | 試一試 | 排版 |
.font-weight-normal |
正常文字 (font-weight:400) | 試一試 | 排版 |
.form-check |
複選框的容器。新增適當的內邊距 | 試一試 | 表單 |
.form-check-inline |
使複選框顯示在同一行（水平） | 試一試 | 表單 |
.form-check-input |
樣式化具有適當邊距的複選框 | 試一試 | 表單 |
.form-check-label |
確保與複選框一起使用的標籤具有適當的邊距 | 試一試 | 表單 |
.form-control |
用於 input、textarea 和 select 元素，使其跨越頁面的整個寬度並保持響應性 | 試一試 | 表單 |
.form-control-file |
向 type="file" 的輸入欄位新增 display:block 和 width:100% |
試一試 | 表單 |
.form-control-lg |
大型表單控制元件 | 試一試 | 表單 |
.form-control-plaintext |
將表單控制元件樣式化為純文字 | 試一試 | 表單 |
.form-control-range |
向 type="range" 的輸入欄位新增 display:block 和 width:100% |
試一試 | 表單 |
.form-control-sm |
小型表單控制元件 | 試一試 | 表單 |
.form-group |
表單輸入和標籤的容器 | 試一試 | 表單 |
.form-inline |
使 <form> 左對齊，具有內聯塊控制元件（這僅適用於視口寬度至少為 768px 的表單） | 試一試 | 表單 |
.form-row |
響應式列的容器（比 .row 的左右邊距更小/覆蓋預設的列間距） |
試一試 | 表單 |
.h1 - .h6 |
使元素看起來像具有所選類（h1-h6）的標題 | 試一試 | 排版 |
.h-25 |
將元素的高度設定為 25% | 試一試 | 實用工具 |
.h-50 |
將元素的高度設定為 50% | 試一試 | 實用工具 |
.h-75 |
將元素的高度設定為 75% | 試一試 | 實用工具 |
.h-100 |
將元素的高度設定為 100% | 試一試 | 實用工具 |
.img-fluid |
響應式圖片（新增 max-width:100% 和 height:auto） | 試一試 | 圖片 |
.img-thumbnail |
將圖片塑造成縮圖（細淺灰色邊框） | 試一試 | 圖片 |
.initialism |
在 <abbr> 元素中顯示文字，字號稍小 |
試一試 | 排版 |
.input-group |
容器，透過在輸入欄位前面或後面新增圖示、文字或按鈕作為“幫助文字”來增強輸入 | 試一試 | 輸入組 |
.input-group-append |
輸入組容器，用於在輸入欄位後面新增幫助文字 | 試一試 | 輸入組 |
.input-group-lg |
大型輸入組 | 試一試 | 輸入組 |
.input-group-prepend |
輸入組容器，用於在輸入欄位前面新增幫助文字 | 試一試 | 輸入組 |
.input-group-sm |
小型輸入組 | 試一試 | 輸入組 |
.input-group-text |
樣式化輸入組中的指定幫助文字 | 試一試 | 輸入組 |
.input-lg |
大型輸入欄位 | 試一試 | 輸入尺寸 |
.input-sm |
小型輸入欄位 | 試一試 | 輸入尺寸 |
.invalid-feedback |
建立自定義驗證訊息，用於已驗證的表單（紅色文字顏色） | 試一試 | 表單 |
.invalid-tooltip |
建立自定義驗證訊息，用於已驗證的表單（紅色工具提示） | 試一試 | 表單 |
.invisible |
使元素不可見 | 試一試 | 實用工具 |
.is-invalid |
驗證表單元素（為輸入欄位新增紅色邊框）。注意：適用於伺服器端 | 試一試 | 表單 |
.is-valid |
驗證表單元素（為輸入欄位新增綠色邊框）。注意：適用於伺服器端 | 試一試 | 表單 |
.jumbotron |
建立一個帶內邊距的灰色標題/框，帶有圓角，並放大其中的文字字號。用於特別吸引某些特殊內容或資訊 | 試一試 | Jumbotron |
.jumbotron-fluid |
建立全寬的 jumbotron（灰色帶內邊距的標題），無圓角 | 試一試 | Jumbotron |
.justify-content-* |
從**開始**、**結束**、**居中**、**之間**和“**周圍**”對齊 flex 專案 | 試一試 | Flex 佈局 |
.justify-content-*-around |
在不同螢幕尺寸上“圍繞”對齊 flex 專案 | 試一試 | Flex 佈局 |
.justify-content-*-between |
在不同螢幕尺寸上“之間”對齊 flex 專案 | 試一試 | Flex 佈局 |
.justify-content-*-center |
在不同螢幕尺寸上居中對齊 flex 專案 | 試一試 | Flex 佈局 |
.justify-content-*-end |
在不同螢幕尺寸上結束對齊 flex 專案 | 試一試 | Flex 佈局 |
.justify-content-*-start |
在不同螢幕尺寸上從開始對齊 flex 專案 | 試一試 | Flex 佈局 |
.lead |
增大段落的字號和行高 | 試一試 | 排版 |
.list-group |
為 <li> 元素建立帶邊框的列表組 |
試一試 | 列表組 |
.list-group-flush |
移除列表組中列表項的一些邊框和圓角 | 試一試 | 列表組 |
.list-group-horizontal |
水平顯示列表項而不是垂直顯示（並排而不是堆疊） | 試一試 | 列表組 |
.list-group-horizontal-* |
在不同螢幕尺寸上水平顯示列表項而不是垂直顯示 | 試一試 | 列表組 |
.list-group-item |
新增到列表組中的每個 <li> 元素 |
試一試 | 列表組 |
.list-group-item-action |
新增到列表組內的連結，使其在懸停時突出顯示（背景變暗） | 試一試 | 列表組 |
.list-group-item-danger |
列表組中列表項的紅色背景色 | 試一試 | 列表組 |
.list-group-item-dark |
列表組中列表項的深灰色背景色 | 試一試 | 列表組 |
.list-group-item-info |
列表組中列表項的淺藍色背景色 | 試一試 | 列表組 |
.list-group-item-light |
列表組中列表項的淺灰色背景色 | 試一試 | 列表組 |
.list-group-item-primary |
列表組中列表項的藍色背景色 | 試一試 | 列表組 |
.list-group-item-success |
列表組中列表項的綠色背景色 | 試一試 | 列表組 |
.list-group-item-warning |
列表組中列表項的黃色背景色 | 試一試 | 列表組 |
.list-inline |
將所有列表項放在一行（與每個 <li> 元素上的 .list-inline-item 一起使用） |
試一試 | 排版 |
.list-inline-item |
將所有列表項放在一行（與父級 <ul> 元素上的 .list-inline 一起使用） |
試一試 | 排版 |
.list-unstyled |
從 <ul> 或 <ol> 列表移除所有預設的列表樣式（專案符號、左外邊距等） |
試一試 | 排版 |
.mark |
高亮文字：高亮文字 | 試一試 | 排版 |
.media |
將媒體物件與內容（如圖片或影片）一起對齊（常用於部落格文章中的評論等） | 試一試 | 媒體物件 |
.media-body |
媒體內容的容器 | 試一試 | 媒體物件 |
.modal |
標識內容為模態框並將其焦點轉移到其中 | 試一試 | 模態框 |
.modal-body |
定義模態框主體的樣式。在此處新增任何 HTML 標記（p、img 等） | 試一試 | 模態框 |
.modal-content |
樣式化模態框（邊框、背景色等）。在此內部，如果需要，新增模態框的標題、主體和頁尾 | 試一試 | 模態框 |
.modal-dialog-centered |
垂直和水平居中模態框 | 試一試 | 模態框 |
.modal-dialog-scrollable |
在模態框內新增捲軸 | 試一試 | 模態框 |
.modal-footer |
模態框的頁尾（通常包含一個操作按鈕和一個關閉按鈕） | 試一試 | 模態框 |
.modal-header |
模態框的標題（通常包含一個標題和一個關閉按鈕） | 試一試 | 模態框 |
.modal-lg |
大型模態框（比預設寬度更寬） | 試一試 | 模態框 |
.modal-sm |
小型模態框（寬度較小） | 試一試 | 模態框 |
.modal-xl |
超大模態框 | 試一試 | 模態框 |
.m-# / m-*-# |
響應式外邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.mt-# / mt-*-# |
響應式頂部外邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.mb-# / mb-*-# |
響應式底部外邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.ml-# / ml-*-# |
響應式左外邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.mr-# / mr-*-# |
響應式右外邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.mx-# / mx-*-# |
響應式左右外邊距自動（水平）類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.my-# / my-*-# |
響應式頂部和底部外邊距自動（垂直）類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.mx-auto |
水平居中元素 | 試一試 | 實用工具 |
.nav nav-tabs |
建立標籤頁選單 | 試一試 | 標籤頁 |
.nav nav-pills |
建立藥丸選單 | 試一試 | 標籤頁 |
.nav-justified |
使標籤/藥丸連結具有相等的寬度 | 試一試 | 標籤頁 |
.navbar |
建立導航欄 | 試一試 | 導航欄 |
.navbar-nav |
導航欄容器內的導航連結容器 | 試一試 | 導航欄 |
.navbar-brand |
新增到導航欄內的連結或標題元素，用以表示 Logo 或標題 | 試一試 | 導航欄 |
.navbar-collapse |
摺疊導航欄（在手機和小平板電腦上隱藏，並替換為選單/漢堡圖示） | 試一試 | 導航欄 |
.navbar-expand-* |
響應式摺疊類 - 在小型（sm）、中型（md）、大型（lg）或超大（xl）螢幕上垂直堆疊導航欄 | 試一試 | 導航欄 |
.navbar-dark |
為導航欄中的所有連結新增白色文字顏色 | 試一試 | 導航欄 |
.navbar-light |
為導航欄中的所有連結新增黑色文字顏色 | 試一試 | 導航欄 |
.navbar-text |
垂直對齊導航欄內所有非連結元素（確保適當的內邊距） | 試一試 | 導航欄 |
.navbar-toggler |
樣式化在小螢幕上開啟導航欄的按鈕。自動樣式化為漢堡/三條線 | 試一試 | 導航欄 |
.nav-link |
用於樣式化導航欄內的連結/錨點 | 試一試 | 導航欄 |
.nav-item |
用於樣式化導航欄內的列表項 | 試一試 | 導航欄 |
.needs-validation |
為已提交的表單新增驗證樣式 | 試一試 | 表單 |
.no-gutters |
移除列的間距/額外空間 | 試一試 | 網格系統 |
.page-item |
樣式化分頁中的列表項 | 試一試 | 分頁 |
.page-link |
樣式化分頁中的連結 | 試一試 | 分頁 |
.pagination |
建立分頁（當你的網站有很多頁面時很有用） | 試一試 | 分頁 |
.pagination-lg |
大型分頁（每個分頁連結的字號和內邊距更大） | 試一試 | 分頁 |
.pagination-sm |
小型分頁（每個分頁連結的字號和內邊距更小） | 試一試 | 分頁 |
.pre-scrollable |
使 <pre> 元素可滾動（最大高度 350px 並提供 y 軸捲軸） |
試一試 | 助手 |
.progress |
進度條的容器 | 試一試 | 進度條 |
.progress-bar |
建立進度條 | 試一試 | 進度條 |
.progress-bar-animated |
動畫化進度條（與條紋一起使用） | 試一試 | 進度條 |
.progress-bar-striped |
為進度條新增條紋 | 試一試 | 進度條 |
.p-# / p-*-# |
響應式內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.pt-# / pt-*-# |
響應式頂部內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.pb-# / pb-*-# |
響應式底部內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.pl-# / pl-*-# |
響應式左內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.pr-# / pr-*-# |
響應式右內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.py-# / py-*-# |
響應式頂部和底部內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.px-# / px-*-# |
響應式左內邊距和右內邊距類。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之間的數字 | 試一試 | 實用工具 |
.rounded |
為元素新增圓角 | 試一試 | 實用工具 |
.rounded-bottom |
為元素的底部新增圓角 | 試一試 | 實用工具 |
.rounded-circle |
將元素塑造成圓形（不支援 IE8 及更早版本） | 試一試 | 實用工具 |
.rounded-left |
為元素的左側新增圓角 | 試一試 | 實用工具 |
.rounded-right |
為元素的右側新增圓角 | 試一試 | 實用工具 |
.rounded-top |
為元素的頂部新增圓角 | 試一試 | 實用工具 |
.rounded-0 |
移除元素的圓角 | 試一試 | 實用工具 |
.row |
響應式列的容器 | 試一試 | 網格系統 |
.row-cols-* |
設定應並排顯示的列數 | 試一試 | 網格系統 |
.shadow |
為元素新增陰影 | 試一試 | 實用工具 |
.shadow-lg |
為元素新增大型陰影 | 試一試 | 實用工具 |
.shadow-none |
移除元素的陰影 | 試一試 | 實用工具 |
.shadow-sm |
為元素新增小型陰影 | 試一試 | 實用工具 |
.small |
在任何標題中建立較淺、次要的文字 | 試一試 | 排版 |
.spinner-border |
建立載入指示器/載入器 | 試一試 | 載入指示器 |
.spinner-border-sm |
建立更小的載入指示器/載入器 | 試一試 | 載入指示器 |
.spinner-grow |
建立一個“增長”的載入指示器/載入器 | 試一試 | 載入指示器 |
.spinner-grow-sm |
建立一個“增長”的更小的載入指示器/載入器 | 試一試 | 載入指示器 |
.sr-only |
隱藏所有裝置上的元素，除了螢幕閱讀器 | 試一試 | 實用工具 |
.sr-only-focusable |
隱藏所有裝置上的元素，除了螢幕閱讀器 | 試一試 | 實用工具 |
.sticky-top |
使元素在滾動**經過**後固定在頁面**頂部** | 試一試 | 實用工具 |
.stretched-link |
新增到連結，使其包含的塊（父元素）可點選（僅適用於 position:relative 的父元素） | 試一試 | 實用工具 |
.tab-content |
與 .tab-pane 一起使用，建立可切換/動態的標籤頁/藥丸 |
試一試 | 標籤頁 |
.tab-pane |
與 .tab-content 一起使用，建立可切換/動態的標籤頁/藥丸 |
試一試 | 標籤頁 |
.table |
為表格新增基本樣式（內邊距、底部邊框等） | 試一試 | 表格 |
.table-active |
為**表格**行（<tr> 或表格單元格（<td>））新增灰色背景色（懸停時使用相同顏色） |
試一試 | 表格 |
.table-bordered |
為表格和單元格的所有側面新增邊框 | 試一試 | 表格 |
.table-borderless |
移除表格的邊框 | 試一試 | 表格 |
.table-condensed |
將單元格內邊距減半，使表格更緊湊 | 試一試 | 表格 |
.table-dark |
為表格新增黑色背景和白色文字 | 試一試 | 表格 |
.table-hover |
建立可懸停的表格（在表格行懸停時新增灰色背景色） | 試一試 | 表格 |
.table-responsive-* |
使表格響應式（在需要時新增水平捲軸）。預設情況下，捲軸會在小於 992px 寬度的螢幕上新增到表格（如果需要）。大於 992px 寬度的螢幕上沒有區別。但是，你可以使用 sm|md|lg|xl 來決定何時根據螢幕寬度新增表格捲軸 | 試一試 | 表格 |
.table-striped |
為表格新增斑馬條紋 | 試一試 | 表格 |
.text-break |
防止長文字破壞佈局 | 試一試 | 排版 |
.text-capitalize |
表示大寫文字 | 試一試 | 排版 |
.text-center |
文字居中對齊 | 試一試 | 排版 |
.text-*-center |
在不同螢幕上文字居中對齊 | 試一試 | 排版 |
.text-danger |
紅色文字顏色。表示危險 | 試一試 | 顏色 |
.text-dark |
深灰色文字顏色 | 試一試 | 排版 |
.text-decoration-none |
移除連結的下劃線 | 試一試 | 排版 |
.text-hide |
隱藏文字（有助於用背景影像替換元素的文字內容） | 試一試 | 排版 |
.text-info |
淺藍色文字顏色。表示資訊 | 試一試 | 顏色 |
.text-light |
淺灰色文字顏色 | 試一試 | 顏色 |
.text-justify |
表示兩端對齊文字 | 試一試 | 排版 |
.text-left |
文字左對齊 | 試一試 | 排版 |
.text-*-left |
在不同螢幕上文字左對齊 | 試一試 | 排版 |
.text-lowercase |
將文字轉換為小寫 | 試一試 | 排版 |
.text-muted |
灰色文字顏色 | 試一試 | 顏色 |
.text-nowrap |
防止文字換行 | 試一試 | 排版 |
.text-primary |
藍色文字顏色。表示一些重要的內容 | 試一試 | 顏色 |
.text-secondary |
灰色文字顏色。表示一些“不太重要”的內容 | 試一試 | 顏色 |
.text-reset |
重置文字或連結的顏色（繼承自父元素的顏色） | 試一試 | 排版 |
.text-right |
文字右對齊 | 試一試 | 排版 |
.text-*-right |
在不同螢幕上右對齊文字 | 試一試 | 排版 |
.text-success |
綠色文字顏色。表示成功 | 試一試 | 顏色 |
.text-uppercase |
將文字轉換為大寫 | 試一試 | 排版 |
.text-warning |
黃色/橙色文字顏色。表示警告 | 試一試 | 顏色 |
.text-white |
白色文字顏色 | 試一試 | 顏色 |
.thead-dark |
為表格標題新增黑色背景色 | 試一試 | 表格 |
.thead-light |
為表格標題新增灰色背景色 | 試一試 | 表格 |
.toast |
建立一個通知（幾秒後消失的提示框） | 試一試 | 通知 |
.toast-body |
通知正文 | 試一試 | 通知 |
.toast-header |
通知標題 | 試一試 | 通知 |
.valid-feedback |
建立自定義驗證訊息，用於已驗證的表單（綠色文字顏色） | 試一試 | 表單 |
.valid-tooltip |
建立自定義驗證訊息，用於已驗證的表單（綠色工具提示） | 試一試 | 表單 |
.visible |
使元素可見 | 試一試 | 實用工具 |
.was-validated |
為表單元素新增驗證樣式 | 試一試 | 表單 |
.w-25 |
將元素的寬度設定為 25% | 試一試 | 實用工具 |
.w-50 |
將元素的寬度設定為 50% | 試一試 | 實用工具 |
.w-75 |
將元素的寬度設定為 75% | 試一試 | 實用工具 |
.w-100 |
將元素的寬度設定為 100% | 試一試 | 實用工具 |
上表顯示了所有可用的 Bootstrap 4 類。
提示：要檢視所有 Bootstrap 3 類的完整列表，請訪問我們的 所有 Bootstrap 3 CSS 類參考。
