简介
Skel是一个基于Bootstrap的响应式框架，提供了丰富的预设样式和组件，可用于快速构建各种类型的网站，同时也支持自定义样式和组件。本文将介绍如何在前端项目中使用npm包skel。
安装skel
在安装skel之前，确保已经安装了Node.js和npm。可以在终端中运行以下命令来安装skel：
npm install skel --save
上述命令会将skel安装到你的项目目录下，并将其添加到package.json文件中的依赖项列表中。
引入skel
在需要使用skel的HTML文件中，可以使用link标签引入skel.css文件：
<head> <link rel="stylesheet" href="[path to skel.css]"> </head>
接着，在JavaScript文件中，可以使用require方法引入skel.js文件：
const skel = require('skel');使用skel
一旦完成了引入skel，就可以开始使用它了。下面是一些常见的用法：
配置网格系统
Skel提供了灵活的网格系统，可用于布局页面。可以通过修改全局变量来配置网格系统：
window.skelConfig = {
grid: {
gutters: ['1em', 0]
}
};使用预设样式
Skel提供了丰富的预设样式，可以通过添加class来应用它们。例如，以下代码将按钮样式设置为默认样式：
<button class="button">Click me!</button>
自定义样式
除了预设样式外，也可以自定义样式。可以使用CSS覆盖默认样式或添加新的样式。例如，以下代码将背景颜色设置为红色：
body {
background-color: red;
}使用组件
Skel还提供了各种组件，如导航栏、滑块和网格。可以通过添加HTML标记和class来使用它们。例如，以下代码将导航栏添加到页面顶部：
<nav class="navbar">
<ul class="navbar-list">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>示例代码
下面是一个简单的示例，展示了如何使用skel创建一个响应式网站：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- ----------- -- -----------
-------
---- -
----------------- --------
------------ ------ -----------
-
------- -
----------------- -----
------ -----
-------- ----
----------- -------
-
------- -
----------------- -----
------ -----
-------- ----
-
----- -
-------- ----
-
------- -
----------------- -----
------ -----
-------- ----
----------- -------
-
--------
-------
------
---- ---------------
------ ------------
------
---- ---------------
--- --------------------
------ ----------------------
------ -------------- -----------
------ -------------------------
-----
------
---- -------------
----------- -- -- -------------
-------- ----- ----- --- ----- ----------- ---------- ----- ------ ---------- ---- --- ------ --------- ------ ----- ------- ----- --- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------