什么是 brite？
brite 是一款用于前端 UI 开发的 npm 包，它提供了大量的 UI 组件和样式，以及通用的 UI 动效。
brite 的名字来自于 “bright”，即“明亮的”，同时也代表着 “Bringing Rich Interactive UI to Everyone”，即“将交互丰富的 UI 带给每一个人”。
安装 brite
安装 brite 非常简单，只需要在命令行中输入以下命令：
npm install brite
使用 brite
引入 brite 样式
在使用 brite 的 UI 组件之前，我们需要先引入 brite 的样式文件。brite 的样式文件提供了大量的基础样式和通用样式，使得开发人员可以轻松地构建出各种不同风格的 UI。
在 HTML 文件的 head 中引入 brite 样式文件：
<head> <link rel="stylesheet" href="./node_modules/brite/brite.css"> </head>
使用 brite UI 组件
brite 提供了大量的 UI 组件，包括按钮、表单、菜单、对话框等等。这些组件可以简单地使用，而且可以通过自定义 CSS 类名来快速地定制样式。
按钮
brite 的按钮组件为按钮提供了统一的样式和交互效果，同时也提供了各种类型的按钮，比如 primary、success、warning 等等。
<button class="brite-btn brite-btn-primary">Primary Button</button> <button class="brite-btn brite-btn-success">Success Button</button> <button class="brite-btn brite-btn-warning">Warning Button</button>
表单
brite 的表单组件为表单元素提供了美观的样式和交互效果，同时也提供了各种类型的表单元素，比如输入框、下拉框、单选框、复选框等等。
-- -------------------- ---- -------
---- -----------------------
--------------------
------ ----------- --------------------
------
---- -----------------------
----------------------
---- --------------------------
------ --------------------
------ ------------ ------------- -------------
----- ------------------------------------
--------
------ --------------------
------ ------------ ------------- ---------------
----- --------------------------------------
--------
------
------
---- -----------------------
---------------------
---- -----------------------------
------ -----------------------
------ --------------- ------------ ----------------
----- ------------------------------------------
--------
------ -----------------------
------ --------------- ------------ ------------------
----- --------------------------------------------
--------
------ -----------------------
------ --------------- ------------ ---------------
----- -----------------------------------------
--------
------
------菜单
brite 的菜单组件提供了各种类型的菜单，比如下拉菜单、竖向菜单、横向菜单等等。
-- -------------------- ---- -------
---- -------------------
---- ------------------------
-- -----------------
------
---- ---------------------- ----------------
-- --------------------
---- ----------------------------
-- ---------------- -----
-- ---------------- -----
-- ---------------- -----
------
------
---- ------------------------
-- -------------- ------
------
------对话框
brite 的对话框组件提供了标准的对话框和提示框，可以非常方便地进行弹框操作。
-- -------------------- ---- -------
------- ---------------- ------------------ --------------------------- ---------------
---- -------------------- ---------------
---- ---------------------------------- -----------
---- -------------------------------- -------------
---- ----------------------------
------- ---------------- ------------------ -----------------------------------
------- ---------------- -------------------- ---------------------------------------
------
------
--------
-------- ------------ -
-------------------------------------------------- - --------
-
-------- ------------- -
-------------------------------------------------- - -------
-
---------总结
通过这篇文章，我们介绍了什么是 brite，并且介绍了 brite 的安装和使用方法。希望这篇文章对你学习和使用 brite 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5174