BooStrap4文档摘录 Utilities

Posted 2020-11-20 chentianwei

• border：可以用原生css实现效果。?没看
• clearfix， float,  ?
• close icon ?
• colors ?
• display?  各种显示的格式。
• embed
• flex
• image replacement
• Position
• Screenreaders?
• shadows
• sizing
• spacing
• text
• Vertical align
• visibility

---

 

Clearfix 

 

在一个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-* 

 

---

---

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} 

 

 

---

---