10 - 工具类的规则与缩写
本帖最后由 不二如是 于 2023-7-5 18:11 编辑工具类遵循原子化的理念，一个 CSS 样式类只做一件事，通常只包含一个属性，例如 .d-flex 表示 display:flex。
Bootstrap 提供的工具类非常多，命名规则通常如下：
.{属性缩写}-{值}
既然用“通常”，肯定是存在一些特殊情况，后面会具体介绍。
现有阶段不会超过该规则。
例如在CSS中有一个基本的 padding（内边距）属性，它的缩写是 p，且对应如下这样一组工具类：
.p-0 /* 表示 padding值为0 */
.p-1 /* 表示 padding值为0.25rem*/
.p-2 /* 表示 padding值为0.5rem */
.p-3 /* 表示 padding值为1rem */
.p-4 /* 表示 padding值为1.5rem */
.p-5 /* 表示 padding值为3rem *
由此可知，把 padding 属性的值分成 6 级，最小的是 p-0，padding 的值是 0。
其他的依次增大，最大的是 p-5，对应的是 3rem。
根据类似的方式，可将 CSS 的一些常用属性缩写为下：
font-size fs
font-weight fw
font-style fst
padding p
padding-top pt
margin m
display d
所以程序员兄弟们就不需要记住所有工具类的名称。
一方面，根据规则很容易就能获知工具类的名称。
另一方面，在编写代码时，VSCode 等编辑器都会有智能提示。
我们只需要了解工具类的命名规则即可。
深入掌握以后，甚至可以根据规则来为不同的项目扩展工具类。
此外，另一类常见的工具类的命名规则如下所示：
.{属性缩写}-{断点}-{值}
名称中带有“断点”（breakpoint）。
有断点的类又被称为响应式工具类，断点的值包括 xs、sm、md、lg、xl 和 xxl 这 6 个。
对应于不同设备的大小。
Bootstrap 将浏览器窗口的宽度从小到大分成了 6 级，每一级都有一个名称。
这个名称非常直观，就像我们买衣服时看到的尺寸标识：
xs是最小号、sm是小号、md是中号、lg是大号、xl是特大号、xxl是超大号。
通过使用响应式工具类，可以让同一个页面在不同的浏览器中自动选择指定的样式。
并不是所有的属性都有对应的响应式工具类，常用的响应式工具类是 margin 和 padding，例如上面演示了 p-* 工具类。
其如果加上断点，就变成了响应式工具类。
例如下面的代码中，<div> 对 padding 属性设置了一组工具类：
<div class="p-1 p-md-2 p-xl-3">
...
</div>
上面代码中的样式就很直观，p-1 表示如果不指定断点，则使用1级padding属性。
p-md-2 表示如果浏览器的宽度大于或等于中号宽度，则使用 2 级padding。
即对于大于或等于中号的设备，它会覆盖掉前面 p-1 的设置。
同理，p-xl-3 表示如果是大于或等于特大号的设备，则使用 3 级padding。
因此最终的结果是，最小号和小号设备使用 1 级 padding，中号和大号设备使用 2 级 padding，特大号和超大号设备使用 3 级 padding。
Bootstrap 使用移动设备优先的原则，即如果不指定断点，就将设备当作最小的设备。
如果希望在大一些的设备上使用不同的样式，则需要进行针对性的设置。
后面我们根据不同的属性，对常用工具进行讲解。
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762
连续学习 连续学习 连续学习 连续学习 连续学习 连续学习 连续学习 连续学习 zhangjinxuan 发表于 2023-7-1 19:18
连续学习
连续学习 zhangjinxuan 发表于 2023-7-1 19:18
连续学习
连续学习 连续学习 连续学习 连续学习 连续学习 连续学习 studing studing 连续学习。wow，不二如是大大不吹水了呢！！！ 学习编程中的Ben 发表于 2023-7-2 07:23
连续学习。wow，不二如是大大不吹水了呢！！！
{:10_302:}{:10_302:}来～
页:
[1]
2