BooStrap4文档摘录 Utilities

• border：可以用原生css实现效果。❌没看
• clearfix， float,  ✅
• close icon ✅
• colors ✅
• display✅  各种显示的格式。
• embed ✅ <iframe>等元素插入video, 视频，视频，视频
• flex ✅
• image replacement ❌，没看明白。
• Position ⚠️就是css的position的简写。
• Screenreaders✅
• shadows ✅
• sizing  ✅
• spacing  ✅
• visibility ✅

---

Clearfix   .可以用于按钮button

在一个container内，快速的清除浮动内容 。

<div class="clearfix">

  <button type="button" class=" float-left">Button floated left</button>

  <button type="button" class=" float-right">Button floated right</button>

</div>

...后面的元素。。

解释：因为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-*,  如bg-primary,

还有secondary, success, danger, warning, info, light, dark, white, transparent。

---

---

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

d-inline

d-inline

<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小的

<div class="d-lg-none">你hide on screens wider than lg</div>

只能看比lg大的

<div class="d-none d-lg-block">我hide on screens smaller than lg</div>

---

Display in print

猜测是和文件打印有关

.d-print-{value}

---

---

Embeds

创建响应式video或者slideshow的插入，基于父元素的宽度，

可以使用<iframe>， ,<embed>,<video><object>元素。

<div class="embed-responsive embed-rsponsive-16by9">

<iframe class="embed-responsive-item" src="完全的url" ></iframe>

</div>

解释：

把<ifram>元素放入一个父元素中，父元素有.embed-responsive类和一个aspect ratio比率。如：.embed-responsive-{16by9|21by9|4by3|1by1}

<ifram>元素的类.embed-responsive-item，是证明<ifram>是一个子项，非必须但推荐。

---

---

Flex

用响应式flexbox utilities快速管理布局，alignment直线排列，和grid column网格列的大小，导航， 组件等等.

更复杂的功能，需要客制化css.

---

和display utilities一起使用:

d-flex, d-inline-flex ：

区别是inline-flex 的width由内部元素的总宽度决定

创建一个flexbox容器，里面的子元素根据flexbox 的display方式显示。

下面例子，因为父元素使用flex功能，<p>,<h1>,<div>都在一行排列：

<div class="d-inline-flex p-2 bd-highlight bg-warning">

  <p>dsfa</p>

  <h1>title</h1>

  <div>d</div>

</div>

---

水平管理Alignment

.flex-row(默认，可不写)，

.flex-row-reverse(靠右水平排列,但子项目反转排列，从123，变为321)

.flex-column,排成一列

它们可以使用响应式.flex-{xm/sm/md/lg/xg}-*

---

Justify content 文本对齐

点击查看效果图

justify-content-{sm|...}-{start|end|center|between|around}

例子：

<div class="d-flex justify-content-end">

⚠️和mr-auot, ml-auto的区别。

• justify-content-*, 经过尝试发现只能用在最外层的<div>，用在嵌套内的<div>是无效果的。
• ml-auto，正好相反，需要用在内层的<div>
• 2者不能一起使用。

  div class=" collapse navbar-collapse 这里可以使用justify-content-*" 

    div class="navbar-nav 这里可以用ml-auto"

      a class="nav-item nav-link" href="#" Home

---

Fill

子元素类.flex-fill，用于让所有子元素等宽, 填满整个flexbox。 也可以使用响应式

<div class="d-flex  bg-primary">

  <div class="flex-fill">Flex item 1</div>

  <div class="flex-fill">Flex item 2</div>

  <div class="flex-fill">Flex item 3</div>

</div> 

---

Align items 和Align content

align-items-{sm|..}-*

align-content-{}-*

都可以使用：start/end/center/baseline/stretch

⚠️：align-content的使用