前言
在现代 web 开发中，UI 库是一个必不可少的东西，而 Bootstrap 是其中最受欢迎的库之一。它提供了大量的方法和技巧来构建漂亮的网站和应用程序。
但是，Bootstrap4 的 CSS 类名比较复杂，需要一定的学习成本。在实际的项目中，我们可能需要多次修改 CSS 样式，这会耗费大量的时间和精力。因此，有没有一种方法可以帮助我们快速的更改样式呢？
答案是肯定的。我们可以使用一个 npm 包叫做 bootstrap4-any，它可以帮助我们更方便地修改和自定义 Bootstrap4 的样式。
安装
首先，我们需要在项目中安装 bootstrap4-any。打开终端，进入到项目的根目录，执行以下命令：
npm install bootstrap4-any
命令执行完毕后，我们就可以在项目中使用 bootstrap4-any 了。
使用
使用 bootstrap4-any 的方法非常简单，我们只需要在项目中引入它的 CSS 文件，然后就可以开始自定义样式了。
引入 CSS 文件
在 HTML 文件中，我们只需要引入 bootstrap4-any 的 CSS 文件即可。
<link rel="stylesheet" href="node_modules/bootstrap4-any/bootstrap.css">
其中，node_modules 是 npm 包的默认安装目录。如果你的项目中没有使用 npm 包管理器，需要手动指定 bootstrap4-any 的 CSS 文件路径。
自定义样式
引入 CSS 文件之后，我们就可以开始修改样式了。Bootstrap4 的样式可以在其文档中找到：https://getbootstrap.com/docs/4.6/getting-started/introduction/
我们可以使用这些样式来自定义网站和应用程序的外观。
例如，如果我们想要更改背景色，我们可以使用以下 CSS 代码：
.bg-primary {
background-color: #007bff!important;
}在这个例子中，我们将 Bootstrap4 的原始背景色修改为蓝色。
示例代码
下面是一个包含自定义样式的 HTML 示例文件：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
----- ----------------
----- --------------- ---------------------------- -----------------
----- ---------------- -------------------------------------------------
-------
----------- -
----------------- ------------------
-
------------- -
------ ------------------
-
--------
-------
------
--- ----------------- ---------- ---- ------------ -----------
-- ------------------------- -- - ---- ---- --- -------------------
------- ---------- ----------------------------
-------
-------在这个例子中，我们将 h1 元素的背景色修改为蓝色，将 p 元素的文本颜色修改为绿色。
总结
在本文中，我们介绍了如何使用 npm 包 bootstrap4-any 来自定义 Bootstrap4 的样式。使用这个工具可以帮助我们更快速地构建网站和应用程序，并且可以帮助我们降低项目维护的成本。
当然，使用样式库时也要注意不要过分强调样式，要注意代码编写的规范性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22cb