QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)

简介

这篇文章主要是对metronic首页的js和css进行简单的介绍，以及针对QiYuAdmin项目梳理出一些公用的js和css，什么是共用的js和css？共用的js和css是很多页面都会用到相同的js和css，比如说现在有100个页面，这100个页面大部分都会引用到jquery插件，那么jquery插件就可以当做一个共用的js放入“common”里面，如果说我们想升级jquery，此时就比较方便了，只需要改”common“里面jquery的版本就ok了。那么接下来就针对QiYuAdmin这个项目进行共用js和css的梳理。源码分享请加QQ群：140874613

• css梳理
• js梳理

---

css梳理

这篇文章是基于上一篇文章： QiYuAdmin-Thymeleaf的include封装共用js和css（项目优化） 所以如果有些比较模糊的可以看一看上一篇文章。

先来看下common_head.html里面的css文件

接下来就针对这里面所有的css进行分析一下，哪些可以当做共用的css

fonts.googleapis.com

这个是谷歌的样式api，那么它到底是个什么玩意呢？百度一下发现有很多人在这个上面遇上了坑，因为他需要访问谷歌的服务器获取这些样式，如果谷歌服务器停了，或者访问谷歌服务器非常的慢，那么将会影响你的项目的访问速度，针对QiYuAdmin我们可以做一个实验做一下对比：第一次访问首页是加载了谷歌样式的api，第二次访问首页是没有加载了谷歌样式的api，我们看下有什么区别。

这样对比更清楚，如下所示

这里给CSDN测试了一个非常恶心的bug，我为了测试刚才的实验，清了一下浏览器的缓存，然后我写的东西就丢失了，它应该是将文章保存在了浏览器的缓存了，除非点一下保存到草稿才可以持久化。

实验的结果：QiYuAdmin首页整体的布局和样式并没有什么变化，不仔细看没什么区别，如果仔细看的话会发现微小的区别，没有引入的比引入的字体颜色要重一点，引入了谷歌api的样式要浅一点。

结论：如果你的项目要求局域网或者对谷歌api的样式没有要求，我感觉可以将其删掉，我们现在给XXX银行总部用的项目也将其删掉，完全没有问题。

font-awesome、simple-line-icons

font-awesome：它是Bootstrap专用图标字体，它包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
simple-line-icons：收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友
结论：他们都是共用的css

bootstrap.min.css

共用的css

bootstrap-switch.