bs-material-ui 是一个基于 Bootstrap 的 Material Design 风格的前端 UI 库，它提供了各种常用的 UI 组件，包括按钮、表单、卡片、列表、模态框等等。bs-material-ui 是一个使用方便，功能齐全，且高度可定制的 npm 包。
安装 bs-material-ui
使用 npm 安装 bs-material-ui，只需要在命令行输入：
npm install bs-material-ui
即可将 bs-material-ui 安装到当前项目中。
使用 bs-material-ui
使用 bs-material-ui，您需要将以下样式表引入到您的 HTML 文件中：
<!-- Font Awesome Icons --> <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.css" rel="stylesheet"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- bs-material-ui CSS --> <link href="./node_modules/bs-material-ui/css/bs-material-ui.min.css" rel="stylesheet">
然后在您的 HTML 文件中使用 bs-material-ui 的组件：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ------------- ----------
------------------ ---------
----------------- ----- --------- - -------- ------ ----- -- ----------- -- ---------------------------
------
---- ------------- ----------
---- ----------- --------
---- --------------------
-------------
------
---- ------------------
------
---- -------------
------ ------------------------ -------------------------------
------ ------------ -------------------- ----------------------- ---------------------- -----------------------------
---- -------------- -----------------------------------------
------
---- -------------
------ --------------------------- -----------------------------
------ --------------- -------------------- -------------------------- ---------------------
------
---- ----------------- ------
------ ------------------------ --------------- -------------------
------ ------------------------ ---------------------------------------
------
------- ------------- ---------- ------------------------
-------
------
------
------
------
------bs-material-ui 组件
bs-material-ui 提供了以下常用的 UI 组件：
按钮
bs-material-ui 提供了多种样式的按钮，包括主按钮、次按钮、成功按钮、警告按钮、危险按钮、信息按钮、浅色按钮、深色按钮、链接按钮等。
-- -------------------- ---- ------- ------- ------------- ---------- ------------------------- ------- ------------- ---------- --------------------------- ------- ------------- ---------- -------------------------- ------- ------------- ---------- -------------------------- ------- ------------- ---------- ------------------------- ------- ------------- ---------- ----------------------- ------- ------------- ---------- ------------------------ ------- ------------- ---------- ----------------------- -- -------- ---------- ------------------
表单
bs-material-ui 提供了多种样式的表单元素，包括输入框、下拉框、单选框、复选框、文本区域等。
-- -------------------- ---- -------
------
---- -------------
------ ------------------------ -------------------------------
------ ------------ -------------------- ----------------------- ---------------------- -----------------------------
---- -------------- -----------------------------------------
------
---- -------------
------ --------------------------- -----------------------------
------ --------------- -------------------- -------------------------- ---------------------
------
---- -------------
------ ------------------------- ------------------------------
------- ------------------- -------------------------
------- --------------------------
--------------------
--------------------
--------------------
---------
------
---- -------------
------ ------------------------------------
---- -------------------
------ ------------------------ ------------ -------------------- ------------------- --------------- --------
------ ------------------------ --------------------------------
------
---- -------------------
------ ------------------------ ------------ -------------------- ------------------- ----------------
------ ------------------------ --------------------------------
------
---- -------------------
------ ------------------------ ------------ -------------------- ------------------- ----------------
------ ------------------------ --------------------------------
------
------
---- -------------
------ ------------------------------------
---- -------------------
------ ------------------------ --------------- -------------------
------ ------------------------ -------------------------------
------
---- -------------------
------ ------------------------ --------------- -------------------
------ ------------------------ -------------------------------
------
---- -------------------
------ ------------------------ --------------- -------------------
------ ------------------------ -------------------------------
------
------
---- -------------
------ -------------------------------
--------- -------------------- -------------------- -------- -------------------------------
------
---- ----------------- ------
------ ------------------------ --------------- -------------------
------ ------------------------ ---------------------------------------
------
------- ------------- ---------- ------------------------
-------卡片
bs-material-ui 提供了多种样式的卡片，包括简单卡片、阴影卡片、圆角卡片、卡片列表等。
-- -------------------- ---- -------
---- -------------
---- --------------------
-------------
------
---- ------------------
-- --------------------------
------
------
---- ----------- --------
---- --------------------
-------------
------
---- ------------------
-- --------------------------
------
------
---- ----------- ---------
---- --------------------
-------------
------
---- ------------------
-- --------------------------
------
------
---- ------------------
---- -------------
---- --------------------
------------
------
---- ------------------
-- --------------------------
------
------
---- -------------
---- --------------------
------------
------
---- ------------------
-- --------------------------
------
------
---- -------------
---- --------------------
------------
------
---- ------------------
-- --------------------------
------
------
------列表
bs-material-ui 提供了多种样式的列表，包括有序列表、无序列表、行内列表、图标列表等。
-- -------------------- ---- ------- ---- ------------- ------------- ------------- ----- ---- ------------- ------------- ------------- ----- --- -------------------- --- ---------------------------------- --- ---------------------------------- --- ---------------------------------- ----- ---- ------------------- -- -------- ---------------------- -------------------------- ---------- ------------- ------ -- -------- ---------------------- -------------------------- ---------- ------------- -------- -- -------- ---------------------- -------------------------- ---------- --------------------- -------- ------
模态框
bs-material-ui 提供了多种样式的模态框，包括基本模态框、大号模态框、中号模态框、小号模态框等。
-- -------------------- ---- -------
---- ----- ---
------- ------------- ---------- ------------ ---------------------- ---------------------------------------------
---- ------------ ----- ----------------- ------------- ----------------------------------- -------------------
---- ---------------------
---- ----------------------
---- ---------------------
--- ------------------- ---------------------------------
------- ------------- ----------------- ----------------------- ----------------------------
------
---- -------------------
------------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- --------------------------
------
------
------
------
---- ----- ---
------- ------------- ---------- ------------ ---------------------- -----------------------------------------------
---- ------------ ---- -------------------- ------------------- ------------- ------------------------------------- -------------------
---- ------------------- ----------
---- ----------------------
---- ---------------------
--- ------------------- -----------------------------------
------- ------------- ----------------- ----------------------- ----------------------------
------
---- -------------------
------------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- --------------------------
------
------
------
------
---- ----- ---
------- ------------- ---------- ------------ ---------------------- -----------------------------------------------
---- ------------ ---- -------------------- ------------------- ------------- ------------------------------------- -------------------
---- ------------------- ----------
---- ----------------------
---- ---------------------
--- ------------------- -----------------------------------
------- ------------- ----------------- ----------------------- ----------------------------
------
---- -------------------
------------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- --------------------------
------
------
------
------
---- ----- ---
------- ------------- ---------- ------------ ---------------------- -----------------------------------------------
---- ------------ ---- -------------------- ------------------- ------------- ------------------------------------- -------------------
---- ------------------- ----------
---- ----------------------
---- ---------------------
--- ------------------- -----------------------------------
------- ------------- ----------------- ----------------------- ----------------------------
------
---- -------------------
------------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- --------------------------
------
------
------
------定制 bs-material-ui
bs-material-ui 提供了多种定制方式，您可以通过修改变量、生成自定义样式表等方式来定制 bs-material-ui 的样式。
修改变量
bs-material-ui 定义了大量的 Sass 变量，您可以通过修改这些变量来快速定制 bs-material-ui 的样式。
-- -------------------- ---- ------- -- -- -------------- ----- ------- --------- -------- -- -- -------------- ------ ------- --------- -------- -- -- -------------- ------ ------- --------- -------- -- -- -------------- ------ ------- -------- --------
生成自定义样式表
bs-material-ui 提供了一个命令行工具 bs-material-ui-cli，您可以使用该工具通过命令行生成自定义的样式表。首先需要全局安装 bs-material-ui-cli：
npm install -g bs-material-ui-cli
然后在您的项目中创建一个配置文件 bs-material-ui.config.js：
module.exports = {
primary: '#3F51B5',
success: '#4CAF50',
warning: '#FFC107',
danger: '#F44336'
};最后在命令行运行以下命令即可生成自定义样式表：
bs-material-ui build
自定义样式表将会生成在 dist/css/bs-material-ui-custom.min.css。
总结
通过本篇文章的学习，您了解了 bs-material-ui 的安装和使用方式，以及提供的常用 UI 组件的使用方法。同时，您还学会了如何通过修改变量和生成自定义样式表来定制 bs-material-ui 的样式。希望本篇文章对您有所启发，可以帮助您更高效地开发出优秀的前端界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5349