前面的例子,我们使用 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 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
进一步优化bootstrap.css
在你熟知bootstrap.css的功能模块后,你还可以根据你个人需求进行定制下载,如何定制请点击这里。
更进一步说,如果你懂得灵活运用bootstrap.css的组件,并且能看懂bootstrap.css的源码,这时,你可以大刀阔斧地精简bootstrap.css的源码了。我在布局网志主博客时也就只用到了bootstrap.css几种布局中的一种。
小结:bootstrap.css文件的大小为129KB,压缩成bootstrap.min.css后为106KB,所以真的不算大,前面我说它体积有点庸肿,你不必放在心上,因为它对网页加载产生的影响小到可以忽略,何况Bootstrap官方还提供了加速器。
精简代码,精中求精,是一种好习惯。