• 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。

基於css#float特性。

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">&times;</span>

</button>

解釋：

使用.close。X是"&times;"。

aria-lable用於screen readers。

Colors

文本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。

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}

BooStrap4文檔摘錄 Utilities