专注于WEB技术的IT博客

Bootstrap“减肥”优化攻略

时间:2014-09-23分类: Css浏览:7438
分享到:

前面的例子,我们使用 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官方还提供了加速器。

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


猜你喜欢
bootstrap布局篇详解(二)
bootstrap布局篇详解(一)
使用Bootstrap轻松打造你的网站
一次微网站建设的坎坷经历
标签 : bootstrap css
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/176.html,谢谢。
  • 评论
  • 赞助本站