马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 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 *
其他的依次增大，最大的是 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-md-2 表示如果浏览器的宽度大于或等于中号宽度，则使用 2 级padding。
即对于大于或等于中号的设备，它会覆盖掉前面 p-1 的设置。
同理，p-xl-3 表示如果是大于或等于特大号的设备，则使用 3 级padding。
因此最终的结果是，最小号和小号设备使用 1 级 padding，中号和大号设备使用 2 级 padding，特大号和超大号设备使用 3 级 padding。
Bootstrap 使用移动设备优先的原则，即如果不指定断点，就将设备当作最小的设备。
如果希望在大一些的设备上使用不同的样式，则需要进行针对性的设置。
后面我们根据不同的属性，对常用工具进行讲解。
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（ 不喜欢更要订阅 ）
官方 Web 课程：
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2023-7-1 18:24:56
置顶卡
千斤顶
显身卡
发表于 2023-7-1 18:28:37
发表于 2023-7-1 19:04:12
楼主