Bootstrap 是一个流行的前端框架，它提供了许多有用的样式和组件，可以帮助开发者快速构建响应式网站和应用程序。然而，有时候我们需要对 Bootstrap 的样式进行一些自定义，以满足特定的设计需求。在这种情况下，我们可以使用 LESS 和 Bootstrap 的 mixin 和变量来自定义样式，而不影响 Bootstrap 的原始样式。
LESS
LESS 是一种 CSS 预处理器，它扩展了 CSS 的语法，使得样式表的编写更加高效和简单。LESS 提供了许多有用的功能，如变量、混合、嵌套等等。我们可以使用 LESS 来自定义 Bootstrap 的样式，而不必修改原始的 Bootstrap 样式文件。
首先，我们需要安装 LESS。可以使用 npm 安装：
npm install less --save-dev
安装完成后，我们可以创建一个名为 custom.less 的文件，用于存放我们的自定义样式。在该文件中，我们可以使用 Bootstrap 的 mixin 和变量来定义我们自己的样式。例如，我们可以使用 @media mixin 来定义不同屏幕尺寸下的样式：
-- -------------------- ---- -------
-- ---------
------ ----------- ------ -
---------------- -
---------- -----
-
-
-- ---------
------ ----------- ------ -
---------------- -
---------- -----
-
-在上面的代码中，我们使用了 @media mixin 来定义不同屏幕尺寸下的样式。我们还定义了一个名为 my-custom-class 的自定义类，用于应用我们的样式。
除了 mixin，我们还可以使用 Bootstrap 的变量来定义我们的样式。Bootstrap 提供了许多有用的变量，如颜色、字体、间距等等。我们可以在 custom.less 文件中覆盖这些变量，以定义我们自己的样式。例如，我们可以覆盖 $primary-color 变量来定义我们自己的主色调：
-- -------------------- ---- ------- -- ------ ------- ---------------------------- --------------- -------- -- -------- ---------------- - ------ --------------- -
在上面的代码中，我们导入了 Bootstrap 的变量文件，并覆盖了 $primary-color 变量。然后，我们使用 my-custom-class 类来应用我们自定义的主色调。
Bootstrap 4
Bootstrap 4 是最新版本的 Bootstrap，它提供了许多新的功能和组件。与之前的版本相比，Bootstrap 4 的样式文件更加模块化，使得我们可以更容易地自定义样式，并且不影响原始的 Bootstrap 样式。
在 Bootstrap 4 中，样式文件被分为多个模块，如 variables、mixins、utilities 等等。我们可以在自己的样式文件中导入这些模块，并覆盖其中的变量和 mixin。例如，我们可以创建一个名为 custom.scss 的文件，用于存放我们的自定义样式。在该文件中，我们可以导入 Bootstrap 4 的模块，并覆盖其中的变量和 mixin：
-- -------------------- ---- -------
-- -----
--------------- --------
-- -- --------- - ---
------- ----------------------------
------- ----------------------------
------- -------------------------
------- -----------------------
------- -------------------------
------- -----------------------
------- -------------------------
------- -----------------------
------- -----------------------
------- ----------------------------
------- ------------------------
------- ------------------------
------- --------------------------
------- ------------------------------
------- ---------------------------
------- -------------------------------
------- ------------------------------
------- -------------------------------
------- ----------------------
------- -------------------------
------- -----------------------
------- -----------------------------
------- -----------------------------
------- ------------------------
------- ----------------------------
------- ------------------------
------- ---------------------------
------- ------------------------
------- -----------------------------
------- ------------------------
------- -------------------------
------- ------------------------
------- --------------------------
------- --------------------------
------- ---------------------------
------- ---------------------------
------- ---------------------------------------
------- ------------------------------------
------- ---------------------------------
------- -----------------------------------
------- ---------------------------------
------- ------------------------------------
------- ----------------------------------
------- ------------------------------------
------- -------------------------------------
------- ---------------------------------------
-- -------- -----
---------------- -
------ ---------------
-------- ----------------------- -
---------- -----
-
-在上面的代码中，我们定义了 $primary-color 变量，并导入了 Bootstrap 4 的所有模块。然后，我们使用 my-custom-class 类来应用我们自定义的样式，并使用 media-breakpoint-up mixin 来定义在小屏幕以上的屏幕尺寸下的字体大小。
示例代码
以下是一个完整的示例代码，展示了如何使用 LESS 和 Bootstrap 4 自定义样式，不影响 Bootstrap 的原始样式：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- -----------------
---- -- --------- ---- ---
----- ---------------- -------------------------------------------------------------------------------
---- --------- ---
----- --------------------- --------------- ------------------ --
------- -------------------------------------------------------------------------
-------
------
---- ------------------
--- --------------------------------- --------------
-- ----------------------------- ----- ----- --- ----- ----------- ---------- ---------
------
-------
--------- -------------------- ---- -------
-- ---------
------ ----------- ------ -
---------------- -
---------- -----
-
-
-- ---------
------ ----------- ------ -
---------------- -
---------- -----
-
--- -------------------- ---- -------
-- -----
--------------- --------
-- -- --------- - ---
------- ----------------------------
------- ----------------------------
------- -------------------------
------- -----------------------
------- -------------------------
------- -----------------------
------- -------------------------
------- -----------------------
------- -----------------------
------- ----------------------------
------- ------------------------
------- ------------------------
------- --------------------------
------- ------------------------------
------- ---------------------------
------- -------------------------------
------- ------------------------------
------- -------------------------------
------- ----------------------
------- -------------------------
------- -----------------------
------- -----------------------------
------- -----------------------------
------- ------------------------
------- ----------------------------
------- ------------------------
------- ---------------------------
------- ------------------------
------- -----------------------------
------- ------------------------
------- -------------------------
------- ------------------------
------- --------------------------
------- --------------------------
------- ---------------------------
------- ---------------------------
------- ---------------------------------------
------- ------------------------------------
------- ---------------------------------
------- -----------------------------------
------- ---------------------------------
------- ------------------------------------
------- ----------------------------------
------- ------------------------------------
------- -------------------------------------
------- ---------------------------------------
-- -------- -----
---------------- -
------ ---------------
-------- ----------------------- -
---------- -----
-
-在上面的示例代码中，我们首先引入了 Bootstrap 的样式文件和自定义的样式文件。然后，我们定义了一个名为 my-custom-class 的自定义类，并使用 LESS 和 Bootstrap 4 的 mixin 和变量来定义我们自己的样式。最后，在 HTML 中应用了这个自定义类。
结论
使用 LESS 和 Bootstrap 4 自定义样式是一种非常有用的技术。通过使用 LESS 和 Bootstrap 4 的 mixin 和变量，我们可以轻松地自定义 Bootstrap 的样式，而不必修改原始的 Bootstrap 样式文件。这种技术可以帮助我们快速满足特定的设计需求，并且不影响 Bootstrap 的原始样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67540cc41b963fe9cc4bce20