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
• 空白 - 在元素的四面设置 margin 或 padding

其中 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 和您选择的纵横比的父元素中，将 .embed-responsive-item 添加到任何嵌入元素（如 <iframe> 或 <video>）

可见性

使用 .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

上下文文本类也可以用于链接，这将添加一个更深的悬停颜色

您还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 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，在我们的下一章.