在前端的开发过程中，我们常常需要使用到 CSS 样式库，以便更快速、高效地实现页面的布局和样式。而对于一个新手来说，如何选择合适的 CSS 库是一件比较困扰的事情。那么，今天我要介绍一款非常优秀的 CSS 库——glu.css，并分享一下它的使用教程。
1. 什么是 glu.css
glu.css 是一款轻量且易用的 CSS 框架，它在保留 Bootstrap 样式规范的基础上，通过去除冗余代码和精简重构，使得 CSS 样式文件的大小缩小到原来的 20% 左右，同时增加了更多有用的新特性，例如：细腻的动画效果、更为简洁的响应式辅助类等等。
值得一提的是，glu.css 已经被发布到了 npm 上，可以通过 npm 命令进行下载和使用。
2. 如何安装 glu.css
对于初学者来说，使用 npm 安装 glu.css 是个不错的选择，只需要在命令行窗口中输入如下命令即可：
npm install glu.css --save
安装完成后，就将 glu.css 纳入了当前项目依赖，以便在 HTML 文件中引入。
3. 如何使用 glu.css
使用 glu.css 的方式非常简单，只需要在 HTML 文件中引入样式文件即可：
<link rel="stylesheet" href="node_modules/glu.css/dist/glu.min.css">
当然，如果你觉得这个路径有点儿长的话，在项目中使用了 Webpack 或 Gulp 等构建工具，你可以通过工具配置文件的方法，方便地修改路径名称（详情可参考 glu.css 官方文档）。
除此之外，glu.css 还提供了丰富的样式类以供我们使用，下面以几个例子介绍一下：
3.1 栅格布局
在 glu.css 中，我们可以通过使用类名 .glu-container 来创建一个页面的全局容器，同时通过 .glu-row 和 .glu-col-* 等类名组合，进行灵活的栅格布局：
<div class="glu-container">
<div class="glu-row">
<div class="glu-col-4">column 1</div>
<div class="glu-col-4">column 2</div>
<div class="glu-col-4">column 3</div>
</div>
</div>3.2 响应式布局
glu.css 除了具有传统的栅格布局之外，还提供了一套响应式布局样式类，以满足不同屏幕尺寸的需求。例如，我们可以通过 .glu-hide-lg 和 .glu-show-md 等类名，来控制元素的显示和隐藏：
<div class="glu-container">
<div class="glu-row">
<div class="glu-col-lg-4 glu-show-lg">column 1 (lg)</div>
<div class="glu-col-md-4 glu-show-md">column 1 (md)</div>
</div>
</div>3.3 动画效果
在 glu.css 中，元素的动画效果是直接通过类名来实现的，非常方便。例如，要实现一个元素的左右弹动动画，只需要加上 .glu-animate-bounce 这个类，然后再加上鼠标悬停事件就可以了：
<div class="glu-animate-bounce">glu.css</div>
-- -------------------- ---- ------- ------------------------- - ---------- ---------- ---- ----------- --------- - ---------- ---------- - -- - ---------- ----------------- - --- - ---------- ---------------- - ---- - ---------- ----------------- - -
4. 总结
总的来说，glu.css 是一款非常优秀的 CSS 框架，既保留了 Bootstrap 样式规范，又充分优化了样式文件的大小和特性。通过本文的介绍和演示，相信大家已经对 glu.css 的使用方法有了一定的了解，可以在实际的项目开发中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee741a