Bootstrap Helper 类
在本教程中，您将了解 Bootstrap 帮助程序/实用程序类。
颜色类
您可以使用上下文颜色类来强调文本并通过颜色传达含义。 这是可用上下文颜色类的完整列表。
| 类 | 说明 | 测试 |
|---|---|---|
.text-primary |
Apply blue color (#007bff) on text. | 示例 |
.text-secondary |
Apply grey color (#6c757d) on text. | 示例 |
.text-success |
Apply green color (#28a745) on text. | 示例 |
.text-danger |
Apply red color (#dc3545) on text. | 示例 |
.text-warning |
Apply yellow color (#ffc107) on text. | 示例 |
.text-info |
Apply teal color (#17a2b8) on text. | 示例 |
.text-light |
Apply very light grey color (#f8f9fa) on text. | 示例 |
.text-dark |
Apply dark grey color (#343a40) on text. | 示例 |
.text-body |
Apply Bootstrap's default body text color (#212529) on text. | 示例 |
.text-muted |
Apply light grey color (#6c757d) on text. | 示例 |
.text-white |
Apply white color (#fff) on text. | 示例 |
.text-black-50 |
Apply 50% transparent black color (rgba(0,0,0,.5)) on text. | 示例 |
.text-white-50 |
Apply 50% transparent white color (rgba(255,255,255,.5)) on text. | 示例 |
背景颜色类
与上下文颜色类类似，您可以使用上下文背景颜色类来设置background-color 元素以对它们施加额外的强调。
| 类 | 说明 | 测试 |
|---|---|---|
.bg-primary |
Apply blue background-color (#007bff) on an element. | 示例 |
.bg-secondary |
Apply grey background-color (#6c757d) on an element. | 示例 |
.bg-success |
Apply green background-color (#28a745) on an element. | 示例 |
.bg-danger |
Apply red background-color (#dc3545) on an element. | 示例 |
.bg-warning |
Apply yellow background-color (#ffc107) on an element. | 示例 |
.bg-info |
Apply teal background-color (#17a2b8) on an element. | 示例 |
.bg-light |
Apply very light grey background-color (#f8f9fa) on an element. | 示例 |
.bg-dark |
Apply dark grey background-color (#343a40) on an element. | 示例 |
.bg-white |
Apply white background-color (#fff) on an element. | 示例 |
.bg-transparent |
Apply transparent background-color (transparent) on an element. | 示例 |
文本对齐类
您可以使用这些文本对齐类来对齐和格式化您的文本内容。
| 类 | 说明 | 测试 |
|---|---|---|
.text-start |
文本左对齐。 | 示例 |
.text-center |
文本居中对齐。 | 示例 |
.text-end |
将文本右对齐。 | 示例 |
.text-wrap |
包装溢出的文本。 | 示例 |
.text-nowrap |
防止文本换行。 | 示例 |
.text-truncate |
用省略号截断文本。 | 示例 |
.text-break |
把长词打断，防止溢出。 | 示例 |
.text-lowercase |
将文本转换为小写。 | 示例 |
.text-uppercase |
将文本转换为大写。 | 示例 |
.text-capitalize |
每个单词的首字母大写。 | 示例 |
.fw-bold |
将元素的字体粗细设置为粗体。 | 示例 |
.fw-bolder |
将元素的 font-weight 设置为 bolder （相对于父元素）。 | 示例 |
.fw-normal |
将元素的 font-weight 设置为 normal。 | 示例 |
.fw-light |
为元素设置 light 字体粗细。 | 示例 |
.fw-lighter |
为元素（相对于父元素）设置 lighter 字体粗细。 | 示例 |
.fst-italic |
将元素的字体样式设置为 italic。 | 示例 |
.fst-normal |
将元素的字体样式设置为正常。 | 示例 |
.font-monospace |
将元素的字体系列设置为等宽字体（固定宽度） | 示例 |
.text-reset |
重置文本或链接的颜色（从其父级继承颜色）。 | 示例 |
.text-decoration-none |
从文本中删除文本装饰，例如下划线。 | 示例 |
.text-decoration-underline |
为文本添加下划线。 | 示例 |
.text-decoration-line-through |
在文本中间添加一行。 | 示例 |
边框类
您可以使用边框实用程序类来快速设置元素的边框和边框半径。 它们对于图像、按钮或任何其他元素非常有用。
| 类 | 说明 | 测试 |
|---|---|---|
.border |
在元素的所有边上添加边框。 | 示例 |
.border-top |
在元素的顶部添加边框。 | 示例 |
.border-end |
在元素右侧添加边框。 | 示例 |
.border-bottom |
在元素的底部添加边框。 | 示例 |
.border-start |
在元素的左侧添加边框。 | 示例 |
.border-0 |
从元素的所有边移除边框。 | 示例 |
.border-top-0 |
从元素的顶部移除边框。 | 示例 |
.border-end-0 |
移除元素右侧的边框。 | 示例 |
.border-bottom-0 |
从元素底部移除边框。 | 示例 |
.border-start-0 |
移除元素左侧的边框。 | 示例 |
.border-primary |
将元素的边框颜色更改为蓝色 (#007bff). | 示例 |
.border-secondary |
将元素的边框颜色更改为灰色 (#6c757d). | 示例 |
.border-success |
将元素的边框颜色更改为绿色 (#28a745). | 示例 |
.border-danger |
将元素的边框颜色更改为红色 (#dc3545). | 示例 |
.border-warning |
将元素的边框颜色更改为黄色 (#ffc107). | 示例 |
.border-info |
将元素的边框颜色更改为蓝绿色 (#17a2b8). | 示例 |
.border-light |
将元素的边框颜色更改为非常浅的灰色 (#f8f9fa). | 示例 |
.border-dark |
将元素的边框颜色更改为深灰色 (#343a40). | 示例 |
.border-white |
将元素的边框颜色更改为白色 (#fff). | 示例 |
.rounded |
圆一个元素的所有角。 | 示例 |
.rounded-top |
圆角元素的左上角和右上角。 | 示例 |
.rounded-end |
圆角元素的右上角和右下角。 | 示例 |
.rounded-bottom |
圆角元素的左下角和右下角。 | 示例 |
.rounded-start |
圆角元素的左上角和左下角。 | 示例 |
.rounded-circle |
将元素圆成圆形。 | 示例 |
.rounded-pill |
将元素圆成药丸形状。 | 示例 |
.rounded-0 |
从元素中删除圆角。 | 示例 |
.rounded-1 |
将元素的边框半径设置为 0.2rem。 | 示例 |
.rounded-2 |
将元素的边框半径设置为 0.25rem。 | 示例 |
.rounded-3 |
设置元素的边框半径为 0.3rem。 | 示例 |
间距类
您可以使用间距实用程序类来快速调整元素的边距和内边距。
.mt-#, .pt-# 等类中的 # 字符表示边距或填充的大小。 大小的值可以是从 0 到 5 或 auto 的整数。
值 0 将其边距设置为 0 来完全删除边距或填充，而值 auto 将边距设置为自动。 从 1 到 5 的整数以递增方式设置边距或填充（范围从 0.25rem 到 3rem）。 试试这些例子，看看它是如何工作的：
| 类 | 说明 | 测试 |
|---|---|---|
.mt-# |
设置元素的上边距。 | 示例 |
.mb-# |
设置元素的下边距。 | 示例 |
.ms-# |
设置元素的左边距。 | 示例 |
.me-# |
设置元素的右边距。 | 示例 |
.mx-# |
设置元素的左右边距。 | 示例 |
.my-# |
设置元素的上边距和下边距。 | 示例 |
.pt-# |
设置元素的顶部填充。 | 示例 |
.pb-# |
设置元素的底部填充。 | 示例 |
.ps-# |
设置元素的左边距。 | 示例 |
.pe-# |
设置元素的右内边距。 | 示例 |
.px-# |
设置元素的左右内边距。 | 示例 |
.py-# |
设置元素的顶部和底部填充。 | 示例 |
提示：您还可以使用边距实用程序类应用负边距。 只需在尺寸编号后面加上字符 n，如 .mt-n1, .mb-n2，等等。
浮动类
您可以使用 float 实用程序类快速将元素向左或向右浮动，或从元素中完全删除浮动。 这是可用浮动类的列表。
| 类 | 说明 | 测试 |
|---|---|---|
.float-start |
向左浮动一个元素。 | 示例 |
.float-end |
向右浮动一个元素。 | 示例 |
.float-none |
禁用从元素浮动。 | 示例 |
.clearfix |
清除浮动以防止父元素折叠。 | 示例 |
.float-*-start |
根据视口大小向左浮动元素。 | 示例 |
.float-*-end |
根据视口大小将元素向右浮动。 | 示例 |
.float-*-none |
根据视口大小禁用从元素浮动。 | 示例 |
提示： .float-*-left 和 .float-*-right 类中的 * 字符代表响应式断点，可以是 sm、md、lg、xl 或 xxl。 更多细节参见 Bootstrap 网格系统。
阴影类
您可以使用阴影实用程序类快速添加或删除元素的阴影。
| 类 | 说明 | 测试 |
|---|---|---|
.shadow |
为元素添加阴影。 | 示例 |
.shadow-sm |
为元素添加一个小阴影。 | 示例 |
.shadow-lg |
为元素添加更大的阴影。 | 示例 |
.shadow-none |
从元素中移除阴影。 | 示例 |
调整类的大小
您可以使用大小调整实用程序类轻松地将元素设置为宽或高。
| 类 | 说明 | 测试 |
|---|---|---|
.w-25 |
将元素的宽度设置为其父元素的 25%。 | 示例 |
.w-50 |
将元素的宽度设置为其父元素的 50%。 | 示例 |
.w-75 |
将元素的宽度设置为其父元素的 75%。 | 示例 |
.w-100 |
将元素的宽度设置为其父元素的 100%。 | 示例 |
.w-auto |
将元素的宽度设置为自动，即浏览器将计算并选择指定元素的宽度。 | 示例 |
.mw-100 |
将元素的最大宽度设置为 100%。 | 示例 |
.h-25 |
将元素的高度设置为其父元素的 25%。 | 示例 |
.h-50 |
将元素的高度设置为其父元素的 50%。 | 示例 |
.h-75 |
将元素的高度设置为其父元素的 75%。 | 示例 |
.h-100 |
将元素的高度设置为其父元素的 100%。 | 示例 |
.h-auto |
将元素的高度设置为自动，即浏览器将计算并选择指定元素的高度。 | 示例 |
.mh-100 |
将元素的最大高度设置为 100%。 | 示例 |
.vw-100 |
将元素的宽度设置为视口宽度的 100%。 | 示例 |
.min-vw-100 |
将元素的最小宽度设置为视口宽度的 100%。 | 示例 |
.vh-100 |
将元素的高度设置为视口高度的 100%。 | 示例 |
.min-vh-100 |
将元素的最小高度设置为视口高度的 100%。 | 示例 |
垂直对齐类
您可以使用垂直对齐实用程序类来快速更改 inline、inline-block、inline-table 和表格单元格元素的垂直对齐方式。
| 类 | 说明 | 测试 |
|---|---|---|
.align-baseline |
将元素的基线与其父元素的基线对齐。 | 示例 |
.align-top |
将元素的顶部与整行的顶部对齐。 | 示例 |
.align-middle |
在父元素的中间对齐元素。 | 示例 |
.align-bottom |
将元素的底部与整行的底部对齐。 | 示例 |
.align-text-top |
将元素的顶部与父元素字体的顶部对齐。 | 示例 |
.align-text-bottom |
将元素的底部与父元素的字体底部对齐。 | 示例 |
位置类
您可以使用位置实用程序类来快速配置元素的位置。
| 类 | 说明 | 测试 |
|---|---|---|
.position-static |
将元素的位置设置为静态。 | 示例 |
.position-relative |
将元素的位置设置为相对。 | 示例 |
.position-absolute |
将元素的位置设置为绝对位置。 | 示例 |
.position-fixed |
将元素的位置设置为固定。 | 示例 |
.position-sticky |
设置元素的位置为sticky。 | 示例 |
.fixed-top |
将一个元素定位在视口的顶部，从边到边。 | 示例 |
.fixed-bottom |
在视口底部，从边到边放置一个元素。 | 示例 |
.sticky-top |
将一个元素定位在视口的顶部，从一个边缘到另一个边缘，但这只会在你滚动过去之后发生。 | 示例 |
显示类
您可以使用显示实用程序类来快速响应地切换元素的显示值。 您还可以在打印页面时控制元素的显示。
| 类 | 说明 | 测试 |
|---|---|---|
.d-none |
隐藏一个元素。 它不占用布局中的任何空间。 | 示例 |
.d-inline |
强制元素生成内联级框。 | 示例 |
.d-inline-block |
强制一个元素生成一个块框，该块框将与周围的内容一起流动，即与内联框等相邻内容在同一行中。 | 示例 |
.d-block |
强制元素生成块级框。 | 示例 |
.d-table |
强制元素表现得像 <table> 元素。 |
示例 |
.d-table-row |
强制元素表现得像 <tr> 元素。 |
示例 |
.d-table-cell |
强制元素表现得像 <td> 元素。 |
示例 |
.d-flex |
强制元素生成块级flex container box。 | 示例 |
.d-inline-flex |
强制元素生成内联级弹性容器框。 | 示例 |
您还可以将响应式断点（sm, md, lg, xl 和 xxl.）与这些显示实用程序类一起使用，以使用格式 .d-{breakpoint}-{value}（例如 .d-sm-none, .d-md-block, .d-lg-block, .d-xl-block, .d-xxl-block 等）根据视口宽度显示或隐藏元素。
如需完整的 flex 实用程序类，请查看 Bootstrap flex 参考页面。
提示： 您可以创建显示类的打印变体，以在打印时更改元素的显示值，只需在 .d- 之后插入字符串 print-，例如 .d-print-none, .d-print-inline, .d-print-block, .d-print-table 等。
其他类
这里列出了更多可用于各种目的的实用程序类。
| 类 | 说明 | 测试 |
|---|---|---|
.btn-close |
创建通用关闭图标以关闭模态和警报等组件。 | 示例 |
.overflow-auto |
如果需要，提供滚动条来查看元素的溢出内容。 | 示例 |
.overflow-hidden |
隐藏元素的溢出内容。 | 示例 |
.overflow-visible |
显示元素的溢出内容。 | 示例 |
.overflow-scroll |
提供滚动条来查看元素的溢出内容。 | 示例 |
.stretched-link |
通过拉伸嵌套链接使元素可点击。 | 示例 |
.visible |
使元素可见，而不修改显示。 | 示例 |
.invisible |
使元素不可见，但它仍会占用页面空间。 | 示例 |
.visually-hidden |
对除屏幕阅读器以外的所有设备隐藏元素。 | 示例 |
Advertisements