在前端开发中，使用现成的样式库可以大大提高开发效率，减少代码量。Bootstrap 是一个受欢迎的前端框架，但是它的样式类比较通用，可能和项目中的样式产生冲突。此时，可以使用 bootstrap-css-modules 这个 npm 包来解决这个问题。
本篇文章将介绍如何安装和使用 bootstrap-css-modules。
安装
使用 npm 安装：
npm install bootstrap-css-modules --save
使用
引入样式文件：
import 'bootstrap-css-modules/css/bootstrap.css';
然后在 HTML 文件中使用相应的类名即可，例如：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- -----------------
----
------
---- -----------------
----
------
------
------注意，这里的类名使用了 Bootstrap 的语义化类名（semantic class names），比如使用 .container 代替 .container-fluid。
此外，在使用 bootstrap-css-modules 时，Bootstrap 的样式类和属性名，使用驼峰式命名法（camelCase）代替了原来的破折号命名法（kebab-case），例如 .navbar-brand 变成了 .navbarBrand。
指导意义
使用 bootstrap-css-modules 有以下几个优点：
- 命名冲突减少
Bootstrap 的样式类是非常通用的，可能会和项目中定义的属性产生冲突，使用 bootstrap-css-modules 可以避免这个问题。
- 样式定制
Bootstrap 提供了大量的样式，但是并不一定全部需要。在使用 bootstrap-css-modules 时，只需要引入需要的样式文件即可。
- 语义化类名
Bootstrap 的语义化类名更好地表达了元素的含义，同时也可以提高代码可读性。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
---------------- --- ------- ------------
-------
------
---- ------------------
--- ------------------------ ----------
---- ------------
---- -----------------
---
----- ----- ----- --- ----- ----------- ---------- -----
----- --------- ------ ---- -------- ------- --- ------- -----
------- -- --------- ----- ------- ---- ----- -- --------- ----
-------- --------- ------ -- ---- ------- ---------
----
------
---- -----------------
-----------------
--- ----------------------
------ ---------- -------------- -----------------
------ ---------- ----------------- ---------------------
------ ---------- ----------------------- ---- ------------
-----
------
------
------
------- ---------------------------------------------------------
------- -----------------------------
-------
-------// index.js import 'bootstrap-css-modules/css/bootstrap.css';
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c7bccdc64669dde4c47