定制 Bootstrap

可以下载全部源代码，也可以从颜色、大小或插件等几个方面进行定 制，这些都可以通过Bootstrap 网站做到。

在定制Bootstrap 的页面上（见图 5-1），可以选择包含哪些组件。比 如，可以不选择响应性功能，或者不选择与既有按钮冲突的按钮相关 的类。当然，jQuery 插件也是可选的。假如你知道自己不需要模态框 或传送带插件，那就不要包含它们，这样下载的文件会更小。

最后，还可以配置LESS 变量。包括列数、颜色，等等都可以修改。

经过一番定制，你一定可以得到适合自己需要的版本。

图5-1：定制 Bootstrap

5.2.1　使用LESS

在Bootstrap 中使用 LESS 有几种不同的方式（见图 5-2）。第一种最简 单，就是使用CodeKit（见图 5-3）或 SimpLESS 之类的预处理器。利用 这些工具可以查看特定的文件和文件夹。在保存某些文件时，它们会帮 你构建主CSS 文件。除了使用传统的 CSS 技术，还可以使用混入、函 数等高级功能，以及通过修改某些变量达到改变站点外观的目的。

图5-2：通过 LESS 定制 Bootstrap

图5-3：用 CodeKit 查看 Bootstrap 代码

LESS 是用于编写 CSS 的一种动态样式表语言，它支持变量、函数和 混入功能。Bootstrap 的 /less/ 文件夹里包含一些 LESS 文件。如果想 设置全局变量， 需要关注 variables.less 和 mixins.less。

在variables.less 中，可以找到 Bootstrap 的所有全局变量。以修改所 有链接颜色为例，只要修改LESS 变量，重新编译，就可以了。

/* 修改前 */

@linkColor: #08c;

@linkColorHover: darken(@linkColor, 15%);

/* 修改后 */

@linkColor: #7d00cc;

@linkColorHover: darken(@linkColor, 15%);

这样，所有链接就会变成紫色，网站中所有按钮及其他引用@linkColor 的界面元素都会得到更新。

一开始的时候，我很犹豫要不要使用LESS。毕竟，我写 CSS 都很长 时间了，我不想改变。可LESS 的结构真的能节省大量时间，何乐不 为呢？

5.2.2　Snippets插件

要 想 快 速 地 基 于Bootstrap 写 个 网 站， 建 议 使 用 Sublime Text 2 和 Bootstrap Snippets 插件（见图 5-4），后者下载地址为：https://github.com/

devtellect/sublime-twitter-bootstrap-snippets/，来自 DEVtellect 。这个 插件可以让你使用快捷方式添加任意组件。

图5-4：Bootstrap Snippets 插件

要安装这个插件，需要把其代码克隆到你的packages 文件夹里：

git clone [email protected]:devtellect/sublime-twitter-bootstrap-snippets.git

不少流行的文本编辑器都有这种插入文本片段的功能。

5.2.3　Photoshop模板

除了文本片段，还有一些针对Bootstrap 元素设计的 Photoshop 文件。我 比 较 喜 欢Repix Design 的 设 计（http://gui.repixdesign.com/#bootstrap），

图5-5 展示了它们的网站。

图5-5：Repix design

这个网站中的Photoshop 模板具有如下特点：

可调整的颜色

•

独立的图层

•

• 基于矢量

模板PSD 文件是免费的，但要求使用者在 Twitter 上转发。这种免费 转发的模式在开源编程领域渐成气候。

5.2.4　主题

如果你安装了简单的Bootstrap，但后来想添加一些装饰，我向你推荐 两个Bootstrap 主题网站，其中的主题有的免费，有的收费：一个是 {Wrap}Bootstrap（https://wrapbootstrap.com/）， 另 一 个 是 Bootswatch

（http://bootswatch.com/）。这些主题都有很多选项，通过它们一定能 把你的网站设计得新颖别致。