在前端开发中，我们经常需要使用各种各样的 NPM 包来实现我们的开发需求。而今天我们要介绍的则是一款十分实用的 NPM 包 - air.inc。
简介
air.inc 是一款轻量级、自适应、易于自定义并支持主题的前端工具库。它提供了一系列常见的 UI 组件、工具函数以及布局方案，可以帮助我们快速开发出高质量、美观且易于维护的前端应用。
air.inc 的基础 CSS 代码非常简洁，其核心的设计理念是「不难看」，也就是说它的 UI 风格非常简约而实用，而且完全可以自定义主题风格。
安装
在进行 air.inc 的安装之前，我们需要先对自己的开发环境有所了解。如果你已经熟悉了 NPM 包管理工具，那么安装 air.inc 将变得非常简单。你可以通过以下命令快速安装 air.inc：
npm install air.inc --save
这里我们通过 --save 参数来将 air.inc 作为项目的依赖项进行安装。
使用
在安装好 air.inc 之后，我们便可以在自己的项目中引入它了。在页面中我们需要添加如下代码：
<link rel="stylesheet" href="path/to/air.inc.css" /> <script src="path/to/air.inc.js"></script>
同时我们需要将第3方库 jQurey 引入：
<script src="path/to/jquery.js"></script>
现在我们已经完成了 air.inc 的安装，并在需要的页面里引入了相关的代码。
组件
air.inc 提供了大量的 UI 组件，其中包括了 按钮、表单、对话框、轮播图、抽屉 等常见的组件。
按钮
air.inc 可以通过下面的代码组来创建按钮：
<button class="button button-primary">Primary Button</button> <button class="button button-secondary">Secondary Button</button> <button class="button button-success">Success Button</button> <button class="button button-danger">Danger Button</button> <button class="button button-warning">Warning Button</button> <button class="button button-info">Info Button</button>
上面代码中，我们通过 .button 以及 .button-{color} 的类来创建按钮，其中 {color} 为按钮的颜色，如 primary、success、danger 等。
表单
air.inc 通过 .form-group 以及 .form-control 的组合来快速创建表单项：
<div class="form-group"> <label for="input-email">Email Address</label> <input type="email" class="form-control" id="input-email" placeholder="Enter email"> </div> <div class="form-group"> <label for="input-password">Password</label> <input type="password" class="form-control" id="input-password" placeholder="Password"> </div>
通过 .form-group 来创建表单组，label 通过 for 属性来关联到一个对应的 input 标签上面。
对话框
air.inc 中的对话框使用起来非常简单，只需要通过下面的方法在页面中添加一个对话框：
-- -------------------- ---- -------
---- ------------ ----- -------------
---- ---------------------
---- ----------------------
---- ----- ------ ---
---- ---------------------
--- ------------------------- ------------
------- ------------- ------------- -------------------------------------
------
---- ----- ---- ---
---- -------------------
----- ----
------
---- ----- ------ ---
---- ---------------------
------- ------------- ------------- ----------------- -----------------------------------
------- ------------- ------------- -------------------- ----------------
------
------
------
------这里我们通过 .modal 以及 .modal-dialog 来创建对话框。
轮播图
air.inc 中的轮播图非常灵活且易于自定义。我们可以通过下面的代码来快速创建一个轮播图：
-- -------------------- ---- -------
---- ---------------- ---------------------
---- -----------------------
---- -------------------- --------
---- -------------- ------ -------------------------------------------- ---------- -------
------
---- ----------------------
---- -------------- ------ -------------------------------------------- ----------- -------
------
---- ----------------------
---- -------------- ------ -------------------------------------------- ---------- -------
------
------
-- ----------------------------- --------------------------------- ------------- ------------------
----- ----------------------------- --------------------------
----- -------------------------------
----
-- ----------------------------- --------------------------------- ------------- ------------------
----- ----------------------------- --------------------------
----- ---------------------------
----
------抽屉
air.inc 中的抽屉组件也非常简单易用，通过下面的代码来快速创建一个抽屉：
-- -------------------- ---- -------
---- -------------- ---------------
---- -----------------------------
---- -----------------------
---- ----------------------
--- --------------------------- ----------
------- ------------- ------------ ------------- -------------------
----- ---------------------------------
---------
------
---- --------------------
------ ----
------
------
------在页面中我们需要添加以下代码来控制抽屉的打开与关闭：
// 打开抽屉
$('#my-drawer').drawer('open');
// 关闭抽屉
$('#my-drawer').drawer('close');自定义
air.inc 因为其体积小且易于扩展，所以非常适合用来作为项目的基础样式库。在使用 air.inc 时，我们也可以根据自己的项目需求来进行自定义。
除了参考官方文档之外，我们也可以通过深入理解 air.inc 的核心样式来进行自定义。在进行自定义时，我们可以将 air.inc 的相关样式复制到自己的 CSS 文件中，并通过逐一修改来完成自定义。
总结
通过本次教程，我们了解了 air.inc 的基本使用，并学习了如何通过自定义来满足自己的项目需求。在实际使用中，我们也应该根据自己的需求来挑选对应的组件和样式，并且要尽量保持代码的简洁性和易读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66bbf