在前端开发中，我们常常需要使用各种样式来美化页面。然而，手写样式不仅费时费力，而且容易出错。为了解决这个问题，我们可以使用现成的样式库，例如 Bootstrap、Foundation、Materialize 等等。这些样式库提供了大量的 UI 组件和样式，帮助我们快速构建出漂亮的页面。
不过，有时候这些样式库过于庞大，而我们只需要其中的一小部分功能。这时候，使用一个小巧精致的库就更为适合。friendly-atoms 就是一个这样的库。本文将介绍如何安装和使用它。
1. 安装
安装 friendly-atoms 很简单。我们只需要在终端里执行：
npm install friendly-atoms
即可。这将会下载并安装最新版本的 friendly-atoms 到当前项目的 node_modules 目录中。
2. 使用
friendly-atoms 主要提供了一些常用的 UI 组件，例如按钮、表格、表单、下拉菜单等等。下面我们分别来介绍如何使用这些组件。
2.1 按钮
要使用按钮组件，我们需要在 HTML 中添加一个按钮元素，并为其设置类名为 "btn"。例如，我们可以创建一个蓝色按钮：
<button class="btn btn-blue">提交</button>
在这里，"btn" 为按钮组件的基础类名，"btn-blue" 则为该按钮的风格类名。别的颜色有 btn-green、btn-orange、btn-gray。
2.2 表格
friendly-atoms 提供了一个简洁的表格组件。要使用它，我们需要在 HTML 中添加一个表格元素，并为其设置类名为 "table"。例如，我们可以创建一个包含三列的表格：
-- -------------------- ---- -------
------ --------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------在这里，"table" 为表格组件的基础类名。在表格中，我们可以设置表头和表体等元素的样式，以及添加 CSS 类名来自定义样式。
2.3 表单
friendly-atoms 提供了一组易于使用的表单组件。要使用它们，我们需要在 HTML 中添加相应的元素，并为其设置类名。例如，我们可以创建一个包含输入框、下拉菜单和按钮的表单：
-- -------------------- ---- -------
----- -------------
---- -------------------
------ ---------------------
------ --------- ----------- ---------------------
------
---- -------------------
------ --------------------
------- -------- ---------------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
------
------- ---------- ---------------------
-------在这里，"form" 和 "form-group" 分别为表单组件的基础类名。我们可以为不同的表单元素添加不同的类名来定制其样式。
2.4 下拉菜单
friendly-atoms 提供了一个简单易用的下拉菜单组件。要使用它，我们需要在 HTML 中添加一个下拉菜单元素，并为其设置类名。例如，我们可以创建一个包含两个选项的下拉菜单：
<div class="dropdown">
<button class="btn btn-gray dropdown-toggle" data-toggle="dropdown">菜单</button>
<ul class="dropdown-menu">
<li><a href="#">选项 1</a></li>
<li><a href="#">选项 2</a></li>
</ul>
</div>在这里，"dropdown"、"dropdown-toggle"、"dropdown-menu" 分别为下拉菜单组件的基础类名。我们可以为下拉菜单元素添加不同的类名来自定义样式。
3. 总结
以上就是 friendly-atoms 的基本使用方法。这个库虽然小巧，但它提供了丰富的 UI 组件和样式，并且易于使用和扩展。如果你需要一个轻量级的样式库来优化页面的 UI，friendly-atoms 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567bf81e8991b448e4029