Bootstrap 4 工具類

Bootstrap 4 工具類

Bootstrap 4 提供了許多工具/輔助類，可以讓你無需編寫任何 CSS 程式碼即可快速設定元素的樣式。

邊框

使用 border 類來為元素新增或移除邊框

邊框顏色

使用任何上下文邊框顏色類來為邊框新增顏色

圓角

使用 rounded 類為元素新增圓角

浮動和清除浮動

使用 .float-right 類將元素浮動到右側，或使用 .float-left 類浮動到左側，並使用 .clearfix 類清除浮動

響應式浮動

使用響應式浮動類（.float-*-left|right - 其中 * 是 sm (>=576px), md (>=768px), lg (>=992px) 或 xl (>=1200px)）根據螢幕寬度將元素浮動到左側或右側

居中對齊

使用 .mx-auto 類居中元素（設定 margin-left 和 margin-right 為 auto）

寬度

使用 w-* 類設定元素的寬度（.w-25, .w-50, .w-75, .w-100, .mw-100）

高度

使用 h-* 類設定元素的高度（.h-25, .h-50, .h-75, .h-100, .mh-100）

間距

Bootstrap 4 提供了廣泛的響應式邊距和內邊距工具類。它們適用於所有斷點：xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) 或 xl (>=1200px))

這些類以 {property}{sides}-{size} 的格式用於 xs，以 {property}{sides}-{breakpoint}-{size} 的格式用於 sm, md, lg, 和 xl。

其中 *property* 是以下之一：

• m - 設定 margin
• p - 設定 padding

其中 *sides* 是以下之一：

• t - 設定 margin-top 或 padding-top
• b - 設定 margin-bottom 或 padding-bottom
• l - 設定 margin-left 或 padding-left
• r - 設定 margin-right 或 padding-right
• x - 設定 padding-left 和 padding-right 或 margin-left 和 margin-right
• y - 設定 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
• 空白 - 設定元素所有 4 個邊距或內邊距

其中 *size* 是以下之一：

• 0 - 設定 margin 或 padding 為 0
• 1 - 設定 margin 或 padding 為 .25rem (字型大小為 16px 時為 4px)
• 2 - 設定 margin 或 padding 為 .5rem (字型大小為 16px 時為 8px)
• 3 - 設定 margin 或 padding 為 1rem (字型大小為 16px 時為 16px)
• 4 - 設定 margin 或 padding 為 1.5rem (字型大小為 16px 時為 24px)
• 5 - 設定 margin 或 padding 為 3rem (字型大小為 16px 時為 48px)
• auto - 設定 margin 為 auto

注意：邊距也可以是負數，在 *size* 前加上 "n"

• n1 - 設定 margin 為 -.25rem (字型大小為 16px 時為 -4px)
• n2 - 設定 margin 為 -.5rem (字型大小為 16px 時為 -8px)
• n3 - 設定 margin 為 -1rem (字型大小為 16px 時為 -16px)
• n4 - 設定 margin 為 -1.5rem (字型大小為 16px 時為 -24px)
• n5 - 設定 margin 為 -3rem (字型大小為 16px 時為 -48px)

更多間距示例

陰影

使用 shadow- 類為元素新增陰影

垂直對齊

使用 align- 類來改變元素的對齊方式（僅適用於內聯、內聯塊、內聯表格和表格單元格元素）

響應式嵌入

建立響應式影片或幻燈片嵌入，其基礎是父元素的寬度。

在具有 .embed-responsive 和你選擇的縱橫比的父元素中，為任何嵌入元素（如 <iframe> 或 <video>）新增 .embed-responsive-item 類

可見性

使用 .visible 或 .invisible 類來控制元素的可見性。注意：這些類不會改變 CSS 的 display 值。它們只新增 visibility:visible 或 visibility:hidden

定位

使用 .fixed-top 類將任何元素固定/停留在頁面頂部

使用 .fixed-bottom 類將任何元素固定/停留在頁面底部

使用 .sticky-top 類將任何元素在滾動到它之後固定/停留在頁面頂部。注意：此類在 IE11 及更早版本中不起作用（將其視為 position:relative）。

關閉圖示

使用 .close 類來設定關閉圖示的樣式。這通常用於警告框和模態框。請注意，我們使用 × 符號來建立實際圖示（一個更好看的“x”）。另外請注意，它預設會右浮動

螢幕閱讀器

使用 .sr-only 類來隱藏元素，除了螢幕閱讀器外，在所有裝置上都隱藏

顏色

正如在 顏色 章節中所述，以下是所有文字和背景顏色類的列表

文字顏色類包括：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body（預設正文字型顏色/通常為黑色）和 .text-light

上下文文字類也可用於連結，這將新增較深的懸停顏色

你也可以為黑色或白色文字新增 50% 的不透明度，使用 .text-black-50 或 .text-white-50 類

背景顏色

背景顏色類包括：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

請注意，背景顏色不會設定文字顏色，因此在某些情況下，你可能需要將它們與 .text-* 類一起使用。

排版/文字類

正如在 排版 章節中所述，以下是所有排版/文字類的列表

塊級元素

要將元素變成塊級元素，請新增 .d-block 類。使用任何 d-*-block 類來控制元素在特定螢幕寬度下何時成為塊級元素

其他顯示類

還提供其他顯示類

Flex 佈局

使用 .flex-* 類來控制 flexbox 佈局。

閱讀更多關於 Bootstrap 4 Flex 佈局，在我們下一章。