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 布局，在我们下一章。