Bootstrap 4 实用程序
Bootstrap 4 实用程序/助手类
Bootstrap 4 有很多实用程序/助手类，可以在不使用任何 CSS 代码的情况下快速设置元素的样式。
边框
使用 border 类可以在元素中添加或删除边框:
实例
实例
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span
class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
亲自试一试 »边框颜色
使用上下文边框颜色类向边框添加颜色:
实例
实例
<span class="border border-primary"></span>
<span class="border
border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border
border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border
border-dark"></span>
<span class="border border-white"></span>
亲自试一试 »边框圆角
rounded 相关类用于设置圆角:
实例
实例
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span
class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span
class="rounded-0"></span>
亲自试一试 »浮动与清除浮动
元素向右浮动使用 .float-right 类，向左浮动使用 .float-left类，.clearfix 类用于清除浮动:
实例
实例
<div class="clearfix">
<span class="float-left">向左浮动</span>
<span
class="float-right">向右浮动</span>
</div>
亲自试一试 »响应式浮动
也可以根据屏幕尺寸来设置浮动效果，使用响应浮动类 (.float-*-left|right - 其中*是 sm (>=576px), md (>=768px), lg (>=992px) 或 xl (>=1200px)):
实例
实例
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or
wider</div><br>
<div class="float-none">Float none</div>
亲自试一试 »居中对齐
使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right: auto):
宽度
宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-100) 类来设置:
实例
实例
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width
50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div
class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
亲自试一试 »高度
高度使用 h-* (.h-25, .h-50, .h-75, .h-100, .mh-100) 类来设置:
实例
实例
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">高度为 25%</div>
<div class="h-50 bg-warning">高度为 50%</div>
<div class="h-75 bg-warning">高度为 75%</div>
<div class="h-100 bg-warning">高度为 100%</div>
<div class="mh-100 bg-warning" style="height:500px">最大高度为 100%</div>
</div>
亲自试一试 »Spacing
Bootstrap 4 具有广泛的响应式边距和填充实用程序类。
它们适用于所有断点：xs (<=576px)、sm (>=576px)、 md (>=768px), lg (>=992px) 或 xl (>=1200px)):
类的使用格式为：{property}{sides}-{size} for xs 和 {property}{sides}-{breakpoint}-{size} for sm, md、lg 和 xl。
其中property是以下之一：
m- 设置marginp- 设置padding
其中 sides 是以下之一：
t- 设置margin-top或padding-topb- 设置margin-bottom或padding-bottoml- 设置margin-left或padding-leftr- 设置margin-right或padding-rightx- 设置padding-leftandpadding-right或margin-leftandmargin-righty- 设置padding-topandpadding-bottom或margin-topandmargin-bottom- blank - 在元素的所有 4 个边上设置
margin或padding
其中 size 是以下之一：
0- 设置margin或padding到01- 设置margin或padding到.25rem（如果字体大小为 16px，则为 4px）2- 设置margin或padding到.5rem（如果字体大小为 16px，则为 8px）3- 设置margin或padding到1rem（如果 font-size 为 16px，则为 16px）4- 设置margin或padding到1.5rem（如果 font-size 为 16px，则为 24px）5- 设置margin或padding到3rem（如果 font-size 为 16px，则为 48px）auto- 将margin设置为 auto
注释： 边距也可以是负数，方法是在 size 前添加一个"n"：
n1- 将margin设置为-.25rem< /code>（如果字体大小为 16px，则为 -4px）n2- 将margin设置为-.5rem< /code>（如果字体大小为 16px，则为 -8px）n3- 将margin设置为-1rem（如果字体大小为 16 像素，则为 -16 像素）n4- 将margin设置为-1.5rem< /code>（如果字体大小为 16px，则为 -24px）n5- 将margin设置为-3rem（如果字体大小为 16 像素，则为 -48 像素）
实例
实例
<div class="pt-4 bg-warning">I only have a top padding (1.5rem =
24px)</div>
<div class="p-5 bg-success">I have a padding on all sides
(3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on
all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
亲自试一试 »更多间距实例
.m-# / m-*-# |
边距 | 测试一下 |
.mt-# / mt-*-# |
上边距 | 测试一下 |
.mb-# / mb-*-# |
边距底部 | 测试一下 |
.ml-# / ml-*-# |
左边距 | 测试一下 |
.mr-# / mr-*-# |
右边距 | 测试一下 |
.mx-# / mx-*-# |
左右边距 | 测试一下 |
.my-# / my-*-# |
上下边距 | 测试一下 |
.p-# / p-*-# |
所有边的填充 | 测试一下 |
.pt-# / pt-*-# |
上边距 | 测试一下 |
.pb-# / pb-*-# |
底部填充 | 测试一下 |
.pl-# / pl-*-# |
向左填充 | 测试一下 |
.pr-# / pr-*-# |
向右填充 | 测试一下 |
.py-# / py-*-# |
上下填充 | 测试一下 |
.px-# / px-*-# |
左右填充 | 测试一下 |
阴影
使用 shadow- 类向元素添加阴影:
实例
实例
<div class="shadow-none p-4 mb-4 bg-light">无阴影</div>
<div class="shadow-sm p-4 mb-4 bg-white">小阴影</div>
<div class="shadow p-4 mb-4 bg-white">默认阴影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大阴影</div>
亲自试一试 »垂直对齐
使用 align- 类更改元素的对齐方式（仅适用于内联、内联块、内联表格和表格单元格元素）:
实例
实例
<span class="align-baseline">基线</span>
<span class="align-top">顶部</span>
<span class="align-middle">中间</span>
<span class="align-bottom">底部</span>
<span class="align-text-top">文本顶部</span>
<span class="align-text-bottom">文本底部</span>
亲自试一试 »响应式嵌入
根据父对象的宽度创建响应视频或幻灯片嵌入。
将 .embed-responsive-item 添加到父元素中的任何嵌入元素 (如
<iframe> 或 <video>) 中，使用 .embed-responsive 和您选择的纵横比:
实例
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
亲自试一试 »可见度
使用 .visible 或 .invisible 类来控制元素的可见性。 注释: 这些类不会更改CSS显示值。它们仅添加 visibility:visible 或 visibility:hidden:
实例
实例
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
亲自试一试 »固定位置
使用 .fixed-top 类将任何元素固定/保留在页面顶部:
使用 .fixed-bottom 类将任何元素固定/保留在页面底部:
使用 .sticky-top 类使任何元素在滚动经过页面时固定/停留在页面顶部。 注释:
该类在IE11及更早版本中不起作用（将其视为 position:relative）。
关闭图标
使用 .close 类设置关闭图标的样式。这通常用于警报和请注意，我们使用 ×
用于创建实际图标的符号（外观更好的"x"）。还请注意，默认情况下它会向右浮动:
屏幕阅读器
使用 .sr-only 类隐藏除屏幕阅读器以外的所有设备上的元素:
颜色
如 Bootstrap 颜色 一章所述，以下是所有文本和背景颜色类别的列表:
文本颜色的类: .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-* 类一起使用。
文字排版
如 文字排版 章节所述，以下是所有文本/排版类的列表:
| 类 | 描述 | 实例 |
|---|---|---|
.display-* |
显示标题用于比普通标题更突出（更大的字体大小和更轻的字体粗细），有四个类可供选择: .display-1, .display-2, .display-3, .display-4 |
测试一下 |
.font-weight-bold |
粗体字 | 测试一下 |
.font-weight-bolder |
加粗的粗体文本 | 测试一下 |
.font-weight-normal |
普通文本 | 测试一下 |
.font-weight-light |
轻量级文本 | 测试一下 |
.font-weight-lighter |
较轻的文字 | 测试一下 |
.font-italic |
斜体字 | 测试一下 |
.lead |
使段落突出 | 测试一下 |
.small |
表示较小的文本（设置为父级大小的 85%） | 测试一下 |
.text-break |
防止长文本破坏布局 | 测试一下 |
.text-center |
表示居中对齐的文本 | 测试一下 |
.text-decoration-none |
从链接中删除下划线 | 测试一下 |
.text-left |
表示左对齐文本 | 测试一下 |
.text-justify |
表示对齐的文本 | 测试一下 |
.text-monospace |
等宽文本 | 测试一下 |
.text-nowrap |
表示没有换行 | 测试一下 |
.text-lowercase |
表示小写文本 | 测试一下 |
.text-reset |
重置文本或链接的颜色（从其父级继承颜色） | 测试一下 |
.text-right |
表示右对齐文本 | 测试一下 |
.text-uppercase |
表示大写文本 | 测试一下 |
.text-capitalize |
表示大写的文本 | 测试一下 |
.initialism |
以稍小的字体大小显示 <abbr> 元素内的文本 |
测试一下 |
.list-unstyled |
删除列表项的默认列表样式和左边距（适用于 <ul> 和 <ol>）。 此类仅适用于直接子列表项（要从任何嵌套列表中删除默认列表样式，请将此类也应用于任何嵌套列表） |
测试一下 |
.list-inline |
将所有列表项放在一行上（与每个 <li> 元素上的 .list-inline-item 一起使用） |
测试一下 |
.pre-scrollable |
使 <pre> 元素可滚动 |
测试一下 |
块元素
要将一个元素变成块元素，请添加 .d-block 类。使用任意 d-*-block 类来控制元素何时应为特定屏幕宽度上的块元素:
实例
实例
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block
bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span
class="d-xl-block bg-success">d-xl-block</span>
亲自试一试 »其他显示类
此处还提供了其他显示类:
| 类 | 描述 | 实例 |
|---|---|---|
.d-none |
隐藏元素 | 测试一下 |
.d-*-none |
在特定屏幕尺寸上隐藏元素 | 测试一下 |
.d-inline |
使元素内联 | 测试一下 |
.d-*-inline |
使元素内联到特定的屏幕尺寸 | 测试一下 |
.d-inline-block |
使元素内联块 | 测试一下 |
.d-*-inline-block |
在特定的屏幕尺寸上制作元素内联块 | 测试一下 |
.d-table |
使元素显示为表格 | 测试一下 |
.d-*-table |
使元素在特定屏幕尺寸上显示为表格 | 测试一下 |
.d-table-cell |
使元素显示为表格单元格 | 测试一下 |
.d-*-table-cell |
使元素在特定屏幕尺寸上显示为表格单元格 | 测试一下 |
.d-table-row |
使元素显示为表格行 | 测试一下 |
.d-*-table-row |
使元素在特定屏幕尺寸上显示为表格行 | 测试一下 |
.d-flex |
创建一个 flexbox 容器并将直接子元素转换为 flex 项 | 测试一下 |
.d-*-flex |
在特定的屏幕尺寸上创建一个 flexbox 容器 | 测试一下 |
.d-inline-flex |
创建一个内联 flexbox 容器 | 测试一下 |
.d-*-inline-flex |
在特定屏幕尺寸上创建一个内联 flexbox 容器 | 测试一下 |
布局
使用 .flex-* 类控制 flexbox 的布局。
在下一章中，阅读更多关于 Bootstrap 4 布局的信息。
实例
水平
垂直
