- border：可以用原生css实现效果。❌没看
- clearfix， float, ✅
- close icon ✅
- colors ✅
- display✅ 各种显示的格式。
- embed
- flex
- image replacement
- Position
- Screenreaders✅
- shadows
- sizing
- spacing
- text
- Vertical align
- visibility
Clearfix
在一个container内，快速的清除浮动内容 。
...后面的元素。。
解释：因为button使用了.float-left/right类，后面的会环绕着这个按钮。如果不像加这个效果需要用到 .clearfix。
本质: 使用了 clear: both;
Float
使用响应式float utility, 在任意元素上激活floats效果，跨任何breakpoint。
float-left/right/none
响应式： float-{sm/md/lg/xl}-right
比sm断点大的屏幕width会激活效果。 sm 也是小平板的宽度。
Screenreaders
使用这个utilities来隐藏所有设备上的元素，除了screen readers
.sr-only
.sr-only-focusable :当元素处于焦点时，显示这个元素。
<a class="sr-only">...</a>
Close icon
一个通用的关闭按钮，用于如alerts和modals.
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
解释：
使用.close。X是"×"。
aria-lable用于screen readers。
文本tex，背景色background，
text-*: text-muted用于不可用的颜色状态。
bg-*
display
用响应式display utility classes来改变css的display特性的值
Display utility classes可以使用所有breakpoints (xs/sm/md/lg/xl),其中xs是默认配置。
.d-{value} 默认是xs
.d-{breakpoint}-{value} 用于sm, md, lg, xl。
value:
none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex
none: 元素被完全移除。
inline类似于<span>。
block类似<p>,从新开始一行并独占这行。
inline-block,类似一个inline元素，但可以设置height,width values。
talbe: 让元素类似<table>table-row: 让元素类似<tr>
table-cell: 让元素类似<td>
flex: 显示一个元素作为一个块级的flex container
inline-flex: 显示一个元素作为一个inline级的 flex container
Examples
<div>
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div></div>
Hiding elements
为了更快的 移动友好的开发，使用响应式display类来显示和隐藏元素。
避免创建完全不同版本的相同site
.d-none
.d-{sm, md, lg, xl}-none
如果希望一个元素只在特定的大小的屏幕上显示使用： .d-*-none类,和.d-*-* (点击查看)
比如：只在sm上看到这个元素, .d-none .d-sm-block .d-md-none
例子：
只能看比lg小的
只能看比lg大的
<div class="d-none d-lg-block">我hide on screens smaller than lg</div>
Display in print
猜测是和文件打印有关
.d-print-{value}