Bulma 是一个基于 Flexbox 的现代化 CSS 框架，它能够快速帮助我们构建整洁、优雅、响应式的网站和应用程序。bulma-dist 是 Bulma 的一个 npm 包版本，它是一个已经编译好的版本，所有的样式表和 JavaScript 文件都被打包成了一个文件中，用户只需要在 HTML 中引用这个文件就能使用 Bulma 的所有功能。本文将会介绍如何使用 npm 包 bulma-dist 来构建一个基本的响应式网站。
步骤1：安装
本教程是以 Node.js 为前提条件的。首先你需要安装 Node.js。如果没有安装，你可以在此下载安装：https://nodejs.org/en/
在命令行中使用 npm 安装 bulma-dist ，如下所示：
npm install bulma-dist
步骤2：引用
在 HTML 的 head 中引用 bulma 的 CSS 文件和 JavaScript 文件，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------------------------------
------- ----- ---------------------------------------------------
-------
------
---- --------- ---
-------
-------步骤3：使用
现在你可以使用 Bulma 的所有功能了，下面是一些基本的示例代码：
栅格系统
栅格系统是 Bulma 的灵魂，它可以帮助你在网页上创建页面布局。下面是一个简单的示例：
<div class="columns">
<div class="column">
<p>Hello</p>
</div>
<div class="column">
<p>World</p>
</div>
</div>表单
表单是网页上常用的元素，Bulma 提供了一个简洁的表单样式。下面是一个简单的示例：
-- -------------------- ---- -------
------
---- --------------
------ -------------------------
---- ----------------
------ ------------- ----------- --------------------
------
------
---- --------------
------ ------------------------
---- ----------------
------ ------------- --------------- -------------------
------
------
---- --------------
---- ----------------
------- ------------- -----------------------
------
------
-------按钮
Bulma 提供了多种样式的按钮，这里只是一个简单的示例：
<button class="button is-primary">Primary</button> <button class="button is-info">Info</button> <button class="button is-success">Success</button> <button class="button is-warning">Warning</button> <button class="button is-danger">Danger</button>
结论
通过 Bulma，我们可以快速地创建整洁且响应式的网站和应用程序。使用 bulma-dist npm 包，我们只需要引入一个文件即可使用 Bulma 的所有功能。希望本篇文章能够帮助你轻松地使用 Bulma 来构建你自己的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b7f