Bootstrap 4实用程序（源自W3schools）
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>浮动和Clearfix
在.float-right类的右侧浮动元素，在或的左侧浮动元素，并在类中.float-left清除浮动 元素.clearfix：
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">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）：
<div class="mx-auto bg-warning" style="width:150px">Centered</div>宽度
设置元素的宽度与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">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>间距
Bootstrap 4具有广泛的响应边距和填充实用程序类。它们适用于所有断点：xs（<= 576px），sm（> = 576px），md（> = 768px），lg（> = 992px）或xl（> = 1200px））：
这些类的格式使用：{property}{sides}-{size}对于xs和{property}{sides}-{breakpoint}-{size}为sm，md，lg，和xl。
其中财产是以下之一：
m-套marginp-套padding
其中边是以下之一：
t-套margin-top或padding-topb-套margin-bottom或padding-bottoml-套margin-left或padding-leftr-套margin-right或padding-rightx-集都padding-left和padding-right或margin-left与margin-righty-集都padding-top和padding-bottom或margin-top与margin-bottom- 空白- 在元素的所有4侧设置a
margin或padding
其中大小是以下之一：
0-套margin或padding以01-设置为margin或设置padding为.25rem（如果font-size为16px，则为4px）2-设置为margin或设置padding为.5rem（如果字体大小为16px，则为8px）3-设置为margin或设置padding为1rem（如果font-size为16px，则为16px）4-集margin或padding到1.5rem（24像素如果字体大小是16像素）5-设置为margin或设置padding为3rem（如果字体大小为16px，则为48px）auto-设置margin为自动
注意：边距也可以为负数，方法是在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）
例
<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">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>垂直对齐
使用这些align-类来更改元素的对齐方式（仅适用于内联，内联块，内联表和表单元格元素）：
例
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">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该类可使任何元素固定/停留在页面顶部：
例
<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>色彩
如“ 颜色”一章中所述，这是所有文本和背景颜色类别的列表：
文本颜色的类是：.text-muted， .text-primary，.text-success，.text-info， .text-warning，.text-danger，.text-secondary，.text-white， .text-dark，.text-body（默认车身颜色/常黑）和.text-light：
上下文文本类也可以在链接上使用，这将添加更深的悬停颜色：
例
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.
您还可以使用.text-black-50或.text-white-50类为黑色或白色文本添加50％的不透明度：
例
<div class="container">
<h2>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>背景颜色
为背景色的类别是：.bg-primary， .bg-success，.bg-info，.bg-warning，.bg-danger，.bg-secondary，.bg-dark和.bg-light。
请注意，背景颜色不会设置文本颜色，因此在某些情况下，您需要将它们与.text-*类一起使用。
版式/文字类
正如所描述的排版章节，这里是所有版式/文字类的列表：
| Class | Description | Example |
|---|---|---|
.display-* |
Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4 |
Try it |
.font-weight-bold |
Bold text | Try it |
.font-weight-bolder |
Bolder bold text | Try it |
.font-weight-normal |
Normal text | Try it |
.font-weight-light |
Light weight text | Try it |
.font-weight-lighter |
Lighter weight text | Try it |
.font-italic |
Italic text | Try it |
.lead |
Makes a paragraph stand out | Try it |
.small |
Indicates smaller text (set to 85% of the size of the parent) | Try it |
.text-break |
Prevents long text from breaking layout | Try it |
.text-center |
Indicates center-aligned text | Try it |
.text-decoration-none |
Removes the underline from a link | Try it |
.text-left |
Indicates left-aligned text | Try it |
.text-justify |
Indicates justified text | Try it |
.text-monospace |
Monospaced text | Try it |
.text-nowrap |
Indicates no wrap text | Try it |
.text-lowercase |
Indicates lowercased text | Try it |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | Try it |
.text-right |
Indicates right-aligned text | Try it |
.text-uppercase |
Indicates uppercased text | Try it |
.text-capitalize |
Indicates capitalized text | Try it |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it |
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
Try it |
.list-inline |
Places all list items on a single line (used together with .list-inline-item on each |
Try it |
.pre-scrollable |
Makes a <pre> element scrollable |
Try it |
块元素
要将元素变成块元素，请添加.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>其他显示类别
其他显示类别也可用：
| Class | Description | Example |
|---|---|---|
.d-none |
Hides an element | Try it |
.d-*-none |
Hides an element on a specific screen size | Try it |
.d-inline |
Makes an element inline | Try it |
.d-*-inline |
Makes an element inline on a specific screen size | Try it |
.d-inline-block |
Makes an element inline block | Try it |
.d-*-inline-block |
Makes an element inline block on a specific screen size | Try it |
.d-table |
Makes an element display as a table | Try it |
.d-*-table |
Makes an element display as a table on a specific screen size | Try it |
.d-table-cell |
Makes an element display as a table cell | Try it |
.d-*-table-cell |
Makes an element display as a table cell on a specific screen size | Try it |
.d-table-row |
Makes an element display as a table row | Try it |
.d-*-table-row |
Makes an element display as a table row on a specific screen size | Try it |
.d-flex |
Creates a flexbox container and transforms direct children into flex items | Try it |
.d-*-flex |
Creates a flexbox container on a specific screen size | Try it |
.d-inline-flex |
Creates an inline flexbox container | Try it |
.d-*-inline-flex |
Creates an inline flexbox container on a specific screen size | Try it |
