Bootstrap“减肥”优化攻略

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

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