欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

Bootstrap“减肥”优化攻略

程序员文章站 2022-03-18 22:49:46
...
前面的例子,我们使用 Bootstrap快速轻松地布局了一个站点。人的能力越大,其责任也就越大,而Bootstrap的情况是,功能强大,体积庸肿,这就给网页的加载带来了一点影响了,世界本来就没有完美的事物,我们不能怪Bootstrap。我们要做的是尽可能地对Bootstrap进行优化。

如何对Bootstrap的体积进行优化?下面我就谈一下我的使用心得吧。


网站制作阶段如何使用bootstrap.css样式文件

bootstrap有bootstrap.css和bootstrap.min.css两个样式文件,它们的功能是一样的。bootstrap.css样式文件是没有经过压缩的,体积虽然有点大,但代码整洁易于查看。bootstrap.min.css体积虽小,但源码只有机器才能看得懂。在设计网站时,最好选用bootstrap.css,以方便查看源码。当然,你也可以使用bootstrap.min.css查阅文档快速地完成网站的制作,这样的结果,你只能做bootstrap的门外汉,bootstrap的精髓你恐怕是无福消受了。所以,在设计网页时不要仅仅查看文档弄明白bootstrap.css中的class或者id的功能就了事,不妨打开bootstrap.css去查看一下其源码,看看它到底是如何实现的。

入门bootstrap.css,文档要看,源码也不能错过。


网站上线阶段如何优化bootstrap.css样式文件

这时,想必你已经完成了网站的制作了,正在考滤如何给bootstrap.css文件减肥了,毫无疑问直接选择压缩的bootstrap.min.css上传到你的服务器。值得庆兴的是,Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务。

这样,我们又多了一个选择,把下面的链接直接放到你的网页就可以了。

进一步优化bootstrap.css

在你熟知bootstrap.css的功能模块后,你还可以根据你个人需求进行定制下载,如何定制请点击这里。

Bootstrap“减肥”优化攻略

更进一步说,如果你懂得灵活运用bootstrap.css的组件,并且能看懂bootstrap.css的源码,这时,你可以大刀阔斧地精简bootstrap.css的源码了。我在布局网志主博客时也就只用到了bootstrap.css几种布局中的一种。


小结:bootstrap.css文件的大小为129KB,压缩成bootstrap.min.css后为106KB,所以真的不算大,前面我说它体积有点庸肿,你不必放在心上,因为它对网页加载产生的影响小到可以忽略,何况Bootstrap官方还提供了加速器。

精简代码,精中求精,是一种好习惯。