什么是 Bulma？
Bulma 是一个基于 Sass 和 Flexbox 的现代 CSS 框架，它简单易用，可以很容易的帮助前端开发人员快速构建网站和应用。Bulma 支持响应式设计，因此可以轻松地适应不同的设备和浏览器。
为什么要使用 Bulma？
Bulma 提供了大量的 CSS 样式，可以使开发人员更容易地创建各种 UI 组件，如按钮、表格、表单等。另外，Bulma 还提供了许多实用的 JavaScript 组件，如模态框、弹出提示框等，这些组件可以帮助我们更方便地实现交互功能。
什么是 bulma-checkradio-compiled？
bulma-checkradio-compiled 是一个基于 Bulma 的 npm 包，可以帮助我们快速实现单选框和复选框样式。
如何使用 bulma-checkradio-compiled？
首先，需要安装 Bulma 和 bulma-checkradio-compiled：
npm install bulma bulma-checkradio-compiled
在 HTML 文件中引入 Bulma 和 bulma-checkradio-compiled：
<link rel="stylesheet" href="node_modules/bulma/css/bulma.min.css"> <link rel="stylesheet" href="node_modules/bulma-checkradio-compiled/bulma-checkradio-compiled.min.css">
在 HTML 文件中使用单选框或复选框：
-- -------------------- ---- ------- ------ -------------- ------ ------------ ------------- ------------ --- -------- ------ -------------- ------ ------------ ------------- ----------- -- -------- ------ ----------------- ------ --------------- ------------ ---------- - ----- -- --- ----- --- ---------- --------
在这个例子中，我们使用了 .radio 和 .checkbox 这两个类来实现单选框和复选框的样式。注意，同一个单选框组中的单选框需要使用相同的 name 属性，才能实现单选效果。
如果想要实现预选中的单选框或复选框，可以在 input 标签中添加 checked 属性：
<label class="radio"> <input type="radio" name="answer" value="yes" checked> Yes </label>
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ----------
----- ---------------- --------------------------------------------
----- ---------------- --------------------------------------------------------------------------------
-------
------
---- ------------------
--- ----------------------
------ --------------
------ ------------ ------------- ------------
---
--------
------ --------------
------ ------------ ------------- ---------- --------
--
--------
------
---- ------------------
--- ----------------------
------ -----------------
------ --------------- ------------ ----------
- ----- -- --- ----- --- ----------
--------
------
-------
-------总结
bulma-checkradio-compiled 是一个十分实用的 npm 包，可以帮助我们快速实现单选框和复选框的样式。它基于 Bulma 开发，因此可以很好地与 Bulma 集成。如果你正在使用 Bulma，并且需要实现单选框或复选框，那么可以考虑使用 bulma-checkradio-compiled。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e2971
