BS4 实用程序
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):
实例
Centered实例
<div class="mx-auto bg-warning" style="width:150px">Centered</div>亲自试一试 »
宽度
宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-100) 类来设置:
实例
宽度 25% 宽度 50% 宽度 75% 宽度 100% 最大宽度 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) 类来设置:
实例
高度为 25% 高度为 50% 高度为 75% 高度为 100% 最大高度为 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 像素）
实例
我只有一个顶部内边距（1.5rem = 24px）
我有一个边距 (3rem = 48px)
我有一个边距（3rem = 48px）和底部填充（3rem = 48px）
实例
<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:
实例
I am visible
I am invisible
实例
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
亲自试一试 »
固定位置
使用 .fixed-top 类将任何元素固定/保留在页面顶部:
实例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
亲自试一试 »
使用 .fixed-bottom 类将任何元素固定/保留在页面底部:
实例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
亲自试一试 »
使用 .sticky-top 类使任何元素在滚动经过页面时固定/停留在页面顶部。 注释:
该类在IE11及更早版本中不起作用（将其视为 position:relative）。
实例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
亲自试一试 »
关闭图标
使用 .close 类设置关闭图标的样式。这通常用于警报和请注意，我们使用 ×
用于创建实际图标的符号（外观更好的"x"）。还请注意，默认情况下它会向右浮动:
实例
实例
<button type="button" class="close">×</button>
亲自试一试 »
屏幕阅读器
使用 .sr-only 类隐藏除屏幕阅读器以外的所有设备上的元素:
实例
<span class="sr-only">I will be hidden on all screens except for screen
readers.</span>
亲自试一试 »
颜色
如 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% 的不透明度:
实例
白色背景上不透明度为 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 类来控制元素何时应为特定屏幕宽度上的块元素:
实例
d-block
d-sm-block
d-md-block
d-lg-block
d-xl-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 布局的信息。
实例
水平
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
垂直
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
