粘条

粘条（affix）插件会让一个<div>粘附在页面上某个位置。开始时，

粘条出现在页面的某个位置，但当页面滚动一定距离时，它就固定不 动了，无论页面如何滚动它都是静止的。

4.14.1　用法

要实现粘条插件，可以使用数据属性，也可以使用JavaScript。记住，

必 须 定 位 相 应 的 元 素， 以 便 它 能 粘 附 在 页 面 上。 定 位 是 通 过 data-spy属 性 控 制 的， 这 个 属 性 的 值 可 以 是：affix、affix-top或

affix-bottom。然后，再通过 data-offset来设置滚动距离。

<div data-spy="affix" data-offset-top="200">

...

</div>

4.14.2　选项

表4-14 列出了粘条相关的选项。

表4-14　粘条相关的选项

名　称 类　型 默认值 说　　明

offset Number | Function | Object 10 计 算 滚 动 距 离 时 偏 移 屏 幕 的 像 素 数。

如果只提供了一个数值，则将该数值 同 时 应 用 给 上 方 和 左 侧。 要 检 测 某 一 个 方 向， 需 要 提 供 一 个 对 象， 如：

offset: { x: 10 }。在需要动态设置 偏移量时，可以提供一个函数（适合 响应式设计）

第 5 章

实际使用 Bootstrap

5.1　GitHub项目

与众多优秀开源项目一样，Bootstrap 也不仅仅是几位核心开发人员的 成果，而是整个开发社区的功劳。GitHub 是托管项目的一个代码库，

在本书写作时，Bootstrap 是关注度最高的项目。超过 50000 颗星星，

16000 多个分支，充分表明这个项目有多么活跃。正如我们在第 1 章 提到的，要使用Bootstrap，可以在它的站点上下载，也可以使用 Git 下载。

Git 是一个自由的开源版本控制系统。包括 Bootstrap 在内的大量项目 都使用GitHub 做项目管理，而 GitHub 就是基于 Git 的一个在线代码 库。要用Git 下载 Bootstrap，在命令行执行如下命令：

$ git clone https://github.com/twitter/bootstrap.git

这样克隆Bootstrap 将得到所有文件，不仅仅是 CSS/JavaScript，还有 文档和针对动态JavaScript 元素的 LESS 文件。

如果你愿意，可以使用LESS 文件编译自己的 Bootstrap 版本，实现对 功能的定制。

5.2　定制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/）。这些主题都有很多选项，通过它们一定能 把你的网站设计得新颖别致。

5.3　获得灵感

如 果 你 想 得 到 更 多 灵 感， 可 以 看 一 看Built With Bootstrap（http://

builtwithbootstrap.com/），一个由用户提交 Bootstrap 站点截图的轻博 客。浏览一下那些使用Bootstrap 的网站是很有意思的。

5.4　小结

显而易见，Bootstrap 几乎可以适用于任何网站。内置响应式框架、丰 富的JavaScript 插件、健壮的界面组件，这些为快速创建功能强大的 网站提供了便利。过去一年使用Bootstrap 的经历让我感觉非常好，

希望这个项目将来会有更大发展。好样的，太棒了，我要感谢Jacob Thornton 和 Mark Otto 发起并创建了这个万能无敌的项目。

作者及封面介绍

作者简介

Jake Spurlock 是 O’Reilly Media 的开发者，主要开发 MAKE。MAKE 作为一个DIY 杂志，发起了 Maker Faire（制汇节），该活动旨在教会 人们动手制作，让世界变得更美好。Jake 是犹他州人，一年半前搬到 了加州葡萄酒之乡。

封面介绍

本书封面动物是芬兰马。芬兰马是芬兰国马，由于这种马能耕种、驾 车，还可供人驱驰、消遣，而且具有很高的经济价值，因此世人美其 名曰“万能马”。虽然这种马在芬兰已经繁殖、演化了几个世纪，但 它们的起源至今仍然是个谜。

芬兰马大部分是栗褐色，间杂极少量黑色、银色或枣红色。1800 年 代，栗色芬兰马大约只占一半，但经过19 世纪和 20 世纪不断地优 选，多数其他基因都被淘汰了。人们都认为栗色是这种马的正宗颜 色，芬兰马国家繁育协会也致力于消除“非正宗”颜色。另外，大约 155 厘米的平均身高也是人工着意选择的，因为这个高度适合体力劳 动，也可用于骑行和娱乐。

今天，大多数芬兰马都用于比赛以及其他消遣用途。20 世纪中叶，芬 兰马一度是赛马场上唯一的马种。但此后，其他马也加入了赛马阵 营。这种马也被很多骑马学校使用，或者用于马疗法。