简介
divine.css 是一个基于 CSS3 的 UI 框架，它的目标是提供一套简单易用的前端样式和交互效果，同时又能够满足大部分项目的需求。
安装
使用 npm 包管理器进行安装：
--- ------- ---------- ------
也可以通过 CDN 引用：
----- ---------------- -------------------------------------------------------------------
使用方法
样式
首先，将 divine.css 引入到 HTML 文件中：
----- ---------------- --------------------------
然后，通过 HTML 元素的 class 属性使用 divine.css 的样式：
---- --------------- ---- ------------------------ ------- ---- ------------------------ ------- ---- ------------------------ ------- ------
JavaScript 组件
divine.css 还提供了一些基于 JavaScript 的组件，比如 Modal 和 Dropdown。在使用之前，需要先引入 jQuery。
------- ------------------------------------- ------- ---------------------------------
Modal
创建 Modal 的方式很简单：
------- ---------------------- --------------
---- --------------- ------------
---- -----------------------
---- ------------------------
---- -----------------------
--------- -------
------- ----------------
----- -------------------- ------------
---------
------
---- ---------------------
----- --
------
---- -----------------------
------- ------------ --------------------------
------- ------------ --------------- --------------------
------
------
------
------在点击按钮时，将显示一个 Modal 框：
Dropdown
Dropdown 是一个下拉框组件，它基于 Bootstrap 的 Dropdown 实现。
---- ------------------ -------------
------- ------------------------- ------------- ----------------------- ---------------------- -------------------- ----------------------
--------
---------
---- ----------------------- -------------------------------------
-- ----------------------- ----------------
-- ----------------------- ----------------
-- ----------------------- ----------------
------
------在点击按钮时，将显示一个下拉框：
总结
本篇文章介绍了 divine.css 的使用方法和 JavaScript 组件。虽然 divine.css 的组件相较于其他 UI 框架并不算多，但它的体积较小、易用性高，是开发小型项目的不错选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566c181e8991b448e31a5