在前端开发中，Bootstrap 是一个广泛使用的 CSS 框架，它提供了许多方便的 UI 组件和对移动设备的支持。然而，使用 Bootstrap 的一个痛点是需要频繁地添加 HTML 标签和属性，造成代码冗余，给维护和修改带来麻烦。Pug 是 Node.js 上的一个 HTML 模板引擎，它允许我们编写更简洁、易读的模板。pug-bootstrap-attr 是一个基于 Pug 的 npm 包，它提供了 Bootstrap 中常用的 HTML 属性的缩写，可以让我们更轻松地编写 Pug 模板。
安装 pug-bootstrap-attr
在项目目录下运行以下命令进行安装：
npm i pug-bootstrap-attr
使用 pug-bootstrap-attr
在 Pug 模板中使用 pug-bootstrap-attr 非常简单。首先，要在模板引擎中引入 pug-bootstrap-attr：
//- 引入 pug-bootstrap-attr include node_modules/pug-bootstrap-attr/attrs.pug
引入之后，就可以使用 pug-bootstrap-attr 中提供的缩写了。例如，假设要添加一个 Bootstrap 中的按钮：
//- 使用 pug-bootstrap-attr 的缩写 button.btn.btn-primary(type="button" aria-label="打开模态框" data-bs-toggle="modal" data-bs-target="#exampleModal") 打开模态框
上述代码中，我们使用了 btn、btn-primary、type、aria-label 等属性的缩写，让代码更加简洁易读。
pug-bootstrap-attr 提供的缩写基本上对应了 Bootstrap 的所有常用属性。例如：
btn: 按钮btn-primary: 主要按钮btn-outline-primary: 主要按钮（无填充）col: 列container: 容器row: 行- 等等
此外，pug-bootstrap-attr 也提供了一些通用的属性缩写，例如：
sr-only: 屏幕阅读器专用visually-hidden: 屏幕阅读器和搜索引擎不可见text-truncate: 文本溢出时省略号代替text-break: 自动换行- 等等
示例代码
-- -------------------- ---- -------
--- -- ------------------
------- -----------------------------------------
----------
----
-- --- - --
------
----------------------------- ----
------ ------------------
-------------------------------------------- --
-- --- - --
------
-- ------
----
----
------------------------------------------------- ---------
----
----
-----
------------------------------------- ---
------------------------------ ------------------ ---------------------
-----
------------------------------------- --
---------------------------------- ------------------ --------------------
------------------------------------- --运行结果如下图所示：
总结
使用 pug-bootstrap-attr 可以大大减少编写 Bootstrap 模板所需的代码行数，提高开发效率和可读性。在 Pug 模板中使用 pug-bootstrap-attr 需要注意引入和写法，但只要掌握好了，就可以享受它带来的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1481e8991b448d9b5c