介绍
Bulma-templates 是一个基于 Bulma 样式库的 HTML/CSS 模板集合，其中包含了各种常见的 web 界面组件和布局。使用这个包可以帮助开发者快速搭建基于 Bulma 样式库的网站。本文将介绍如何在前端项目中使用 bulma-templates 。
安装
Bulma-templates 是一个 npm 包，可以通过 npm 安装。在终端中输入下面的命令：
npm install bulma-templates
安装好之后，你就可以在项目中使用一个或多个模板了。
使用
在使用之前，需要引入样式文件和 JavaScript 文件，可以在 HTML 文件的 head 中添加下面的代码：
<head> <link rel="stylesheet" href="node_modules/bulma/css/bulma.css" /> <link rel="stylesheet" href="node_modules/bulma-templates/templates.css" /> <script defer src="node_modules/bulma-templates/templates.js"></script> </head>
示例 1
使用导航栏模板：
-- -------------------- ---- -------
---- ------------- ----------------
---- ---------------------
-- ------------------- ---------
---- -------------------------------------------- ---------- ----- ----------- ----------- --
----
---- -------------------- ------- ----------------------------------------------
-------------
-------------
-------------
------
------
---- ------------------------------------ --------------------
---- ---------------------
-- ------------------- -----------------
---- ------------------ ------------ --------------
-- ------------------- ---------------------
---- ---------------------- ----------
-- ------------------- ---------------------
-- ------------------- ---------------------
-- ------------------- -----------------------
-- ------------------- -----------------
------
------
------
------
------示例 2
使用滚动页面导航栏模板：
-- -------------------- ---- -------
---- ------------- ------------ --------------- ----------------- ---------------- ------------
---- ---------------------
-- ------------------- ---------
---- -------------------------------------------- ---------- ----- ----------- ------------
----
-- ------------- -------------------- ------- ----------------- --------------------- ---------------------------------
----- --------------------------
----- --------------------------
----- --------------------------
----
------
---- ----------------------- --------------------
---- ---------------------
-- ------------------- -----------------
-- ------------------- --------------------------
---- ------------------ ------------ --------------
-- ------------------- -----------------
---- ------------------------
-- ------------------- ------------------
-- ------------------- -----------------
-- ------------------- --------------------
--- -----------------------
-- ------------------- --------------- -- ---------
------
------
------
---- -------------------
---- --------------------
---- ----------------
-- ------------- ----------- ---------
------------ -----------
----
-- ------------- --------- ---------
--- --
----
------
------
------
------
------结语
Bulma-templates 是一个很好的基于 Bulma 样式库的 HTML/CSS 模板集合。使用它能够帮助你快速搭建一个基于 Bulma 样式库的网站。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664381e8991b448e2535