在前端开发中，使用优秀的开源库可以大大提高开发效率，并且可以让网站更美观。这里介绍一个名为 bootstrap4c-buttons 的 npm 包，它提供了一系列漂亮的按钮样式，是一个极好的选择。
安装
在命令行中输入以下命令即可安装 bootstrap4c-buttons：
npm install bootstrap4c-buttons
安装成功后，可以在项目中引入它：
import 'bootstrap4c-buttons/dist/bootstrap4c-buttons.css';
使用方法
使用 bootstrap4c-buttons 提供的按钮样式非常简单。我们只需要按照以下这种方式在 HTML 中声明一个按钮：
<button class="btn btn-sm btn-primary c4-btn-primary">Primary</button>
上面的代码中，btn-primary 是 bootstrap4c-buttons 定义的按钮样式，而 c4-btn-primary 是它自定义的 CSS 类，用来覆盖 btn-primary 样式的设置。
bootstrap4c-buttons 不仅提供了默认按钮样式，还提供了一些非常实用的样式。比如，圆形按钮、带图标的按钮等等。
<button class="btn btn-floating btn-success c4-btn-success"><i class="material-icons">add</i></button>
当然，除了按钮样式之外，bootstrap4c-buttons 还提供了一些其他的样式，比如标签样式、弹出框样式等等。这些样式的使用方法和按钮样式类似，可以查看官方文档进行学习。
示例代码
以下是一个基础示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
-------------------------- ----------
----- ---------------- -------------------------------------------------------------------- --
-------
------
------- ---------- ------ ----------- --------------------------------
------- ---------- ------ ------------- ------------------------------------
------- ---------- ------ ----------- --------------------------------
------- ---------- ------ -------- --------------------------
------- ---------- ------ ----------- --------------------------------
------- ---------- ------ ---------- ------------------------------
------- ---------- ------ -------- --------------------------
-------
-------以上这段代码中，我们引入了 bootstrap4c-buttons 提供的 CSS 文件，并且使用 btn-primary 等按钮样式来呈现漂亮的按钮。
总结
bootstrap4c-buttons 是一款非常优秀的按钮样式库，它提供了众多的按钮样式以及其他实用的样式。我们可以通过它来让网站变得更美观，并且开发效率也会大大提高。
使用 bootstrap4c-buttons 非常简单，只需要按照官方文档中的说明即可。相信本篇文章可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4e0b