好用的 Bootstrap 4 utilities class

最新推荐文章于 2024-06-20 09:47:07 发布

小咪蜂

最新推荐文章于 2024-06-20 09:47:07 发布

阅读量289

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaomifengmaidi1/article/details/100774798

版权

Bootstrap 4的utility类提供了便利的CSS功能，如快速调整margin和padding的m-class和p-class，display属性的d-class，以及text和bg类。通过使用这些预定义的小型class，开发者可以提高开发效率，保持代码整洁，同时避免inline style可能带来的问题。例如，m-class和p-class用于间距调整，d-class用于display属性设置，text-class和bg-class则涉及文本对齐和背景颜色。这些功能减少了代码冗余，提高了代码可复用性和一致性。

摘要由CSDN通过智能技术生成

框架来说，从 BS3 到 BS4 做的改动其实相当大，包含底层的採用 SASS、 Flexbox 、styleshet 模组化，以及表层设计上更加弹性的 UI 元件、更明亮的主题色微调等等。
然而使用 BS4 之后最使我惊艳的部分其实不是上述的这些改动，而是新引入的 utilites class ，让开发时的舒适度顿时提升了好几个档次，实在是居家旅行，杀人灭口，必备良药。

吹捧了这麽多， utilities class 到底是什麽呢？
基本上 utilities class 包含了一些 functional CSS 和 atomic CSS 的概念，透过把常用的 style (margin, padding, text-align, flex… 等等)抽出来做成独立的、单一职责的小 class ，这些小 class 通常非常非常小，可能只包含 1 条 css rule，透过组合这些小 class 来做到複杂的 style。
那麽到这裡就会有人提出一个问题：既然这些 class 只有一行，为什麽不用 inline style 就好了呢？
其实这也是 functional CSS 或 atomic CSS 常见的问题。我们可以从几个面向来看

1.效能：用 css class 来写 stylesheet rule 的渲染效能通常会比 inline-style 来得好，这可能牵涉到浏览器的实作。数据可以参考这个连结：https://jsperf.com/classes-vs-inline-styles/4

2.可複用性：将同样的 style 写成同一个 class ，就可以快速的通用在所有