Bootstrap4 实用程序

Bootstrap 4 实用程序

Bootstrap 4 有很多实用程序/帮助程序类，可以快速设置元素样式，而无需使用任何 CSS 代码。

边框

使用border用于添加或删除元素边框的类：

边框颜色

使用任何上下文边框颜色类向边框添加颜色：

边界半径

使用以下命令向元素添加圆角rounded课程：

浮动和 Clearfix

使用 使元素向右浮动.float-right类或向左.float-left，并清除浮动.clearfix类：

响应式浮动

使用响应式浮动类 (.float-*-left|right- 哪里sm(>=576 像素),md(>=768 像素),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(<=576 像素),sm(>=576 像素),md(>=768 像素),lg(>=992px) 或xl(>=1200px)):

这些类的使用格式如下：{property}{sides}-{size}为了xs和{property}{sides}-{breakpoint}-{size}为了sm,md,lg， 和xl。

在哪里属性是其中之一：

• m- 套margin
• p- 套padding

在哪里侧面是其中之一：

• 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
• 空白 - 设置 amargin或者padding在元素的所有 4 个面上

在哪里尺寸是其中之一：

• 0- 套margin或者padding到0
• 1- 套margin或者padding到.25rem（如果字体大小为 16 像素，则为 4 像素）
• 2- 套margin或者padding到.5rem（如果字体大小为 16 像素，则为 8 像素）
• 3- 套margin或者padding到1rem（如果字体大小为 16 像素，则为 16 像素）
• 4- 套margin或者padding到1.5rem（如果字体大小为 16 像素，则为 24 像素）
• 5- 套margin或者padding到3rem（如果字体大小为 16 像素，则为 48 像素）
• auto- 套margin自动

笔记：边距也可以为负数，只需在前面添加 "n"尺寸:

• n1- 套margin到-.25rem（如果字体大小为 16 像素，则为 -4 像素）
• n2- 套margin到-.5rem（如果字体大小为 16 像素，则为 -8 像素）
• n3- 套margin到-1rem（如果字体大小为 16 像素，则为 -16 像素）
• n4- 套margin到-1.5rem（如果字体大小为 16 像素，则为 -24 像素）
• n5- 套margin到-3rem（如果字体大小为 16 像素，则为 -48 像素）

更多间距示例

阴影

使用shadow-向元素添加阴影的类：

垂直对齐

使用align-更改元素对齐方式的类（仅适用于内联、内联块、内联表和表格单元格元素）：

响应式嵌入

根据父级的宽度创建响应式视频或幻灯片嵌入。

添加.embed-responsive-item到父元素中的任何嵌入元素（如 <iframe> 或 <video>）.embed-responsive以及您选择的纵横比：

能见度

使用.visible或者.invisible类来控制元素的可见性。笔记：这些类不会更改 CSS 显示值。他们只添加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-*使用 Flexbox 控制布局的类。

阅读更多关于Bootstrap 4 Flex，在我们的下一章中。