【後转前要多久】# Day20 BootStrap - 通用类别 Utilities

今天要来介绍 Bootstrap 工具、通用类别

在这章节中，最重要的就是要熟悉各种装置尺寸代号，

在最小版面时会做怎样的呈现、会隐藏掉什麽东西、
大一点的版时又会怎样的呈现、哪些原本被隐藏的元素会出现
或者当尺寸变大後才会隐藏的小物件...等等。

margin, padding (对应Spacing章节)

margin与padding 是 Bootstrap中调整距离的利器。

margin跟padding单字太长，bootstrap都改为缩写，
m, p 代表选择使用margin或padding

t, b, l, r, x, y 用来指定方向，分别代表 上、下、左、右、X轴(左+右)、Y轴(上+下)

在Bootstrap 版本5 以後，l, r 改为 s 跟 e(start, end)，
方向不再是左、右了，而是开始与结束的位置。
或许是有些语系书写的起始方向不是左到右、以及考量到继承後方向性的关系，才改变用法的。

如果是上下左右都要，就省略方向、直接 m, p

数值级距: 0 ~ 5 、auto 数字越大距离越长，但距离不是等差增长(一倍、两倍、三倍距离)，而是如下图。
装置代号: sm, md, lg, xl, xxl

练习:

1. margin往下推两个级距: mb-2
2. padding往右侧推两个级距: pe-2
3. 只有装置宽度在lg以上时，margin才不会往下推: mb-lg-0
4. margin不会往下推，只有当宽度lg以上时 margin才会往下推三个级距: mb-0 mb-lg-3

显示方式 (对应Display章节)

在css中的display直接被缩写成d

display: none 缩写为 d-none
display: block缩写为 d-block
display: inline缩写为 d-inline
display: flex缩写为 d-flex

装置代号: sm, md, lg, xl, xxl

练习:

1. 以flex排版显示: d-flex
2. 只有装置宽度在md以上时，才做以flex排版显示: d-md-flex
3. 在装置宽度小於lg时不呈现，当大於lg时才会显示元素: d-none d-lg-block

colors (对应Background、Colors 章节)

快速调整内容文字、背景颜色。

bg与text: 背景色、文字内容颜色
primary, secondary, light, dark, success, danger, warning, info: 不同情境下的背景颜色

程序码中的--bs开头的颜色变数，会对应到各自的色码

如果以上这些颜色都不是你想要的颜色，当然可以新增自己网站的主题颜色的class，名称如: bg-accent、bg-accent-lighter、text-accent-dim 等等，accent中文意思为口音、强调色。
另一种方式是透过Sass编译来修改或者新增颜色。

将颜色命名成class时尽量避开以颜色(red、pink、yellow等)来命名，
尽量想个比较抽象意境、概括性的单词会比较好。

否则，假如今天命名 .red{color: #FF0000} 大量用在主题颜色上
结果做完需求一变更、主题色要求马上改成其他颜色，例如原本套用到.red样式的class通通要改成蓝色，
若此时只改色码而不改class名称，将会出现有点诡异的class .red{color: #0000FF}

练习:

1. 背景浅白色: bg-light
2. 文字内容深色: text-dark