作者：[美]JakeSpurlock（著）

出版社：北京图灵文化发展有限公司

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Bootstrap用户手册：设计响应式网站试读：

前言

Bootstrap是一个用于构建响应式网站的前端框架。无论你想构建应用程序、博客还是CMS网站，Bootstrap都完美适用，只要你想得到，它都能行。Bootstrap把HTML、CSS和JavaScript组合起来，为构建稳定的网站提供了基础设施，也能提高开发效率。基于默认的网格系统，布局变成了小菜一碟，按钮、导航和表格也都活脱脱地赏心悦目。十几个JavaScript插件更为我们赋予网站交互能力提供了强大保障。

读者对象

本书读者应该对HTML、CSS和JavaScript都比较熟悉，而且对构建响应式网站、使用Bootstrap的JavaScript插件，以及使用流行的开源框架创建网站充满好奇心。

不适合谁

本书不适合能看懂Bootstrap文档的读者。与很多人一样，我也是从在线文档学起的，当时使用的是 Bootstrap 1.3，后来就升级到 Bootstrap 1.4。然后，我又基于 Bootstrap 2.0 建了一个大网站。如果你喜欢编写语义化的HTML，使用Bootstrap没错。

本书宗旨

如果你有编写HTML、CSS和JavaScript的经验，本书可以作为你编写灵活代码和响应式网站的参考。当然，相关的概念和语法都很简单，因为本书也遵循语义HTML和CSS的风格。

本书内容

本书讨论了使用Bootstrap构建网站，从基本的项目和文件结构开始，然后是网格系统和布局方式，再后来讨论HTML元素特别是表单、表格、按钮等界面元素。在对Bootstrap有了基本的理解之后，我们会讨论漂亮的导航条、面包屑式导航、媒体对象等。接着JavaScript插件登场，比如下拉菜单、传送带、模态框，它们为网站提供了交互功能。

为什么写这本书

我不是Bootstrap专家，把自己当成专家可不得了，写成这样就不行了。

我就是一个普通的开发人员，通过 Dave Winer 的博客知道了Bootstrap。我觉得不错，就在新网站中使用了Bootstrap。我感觉有必要跟大家分享自己使用Bootstrap的心得。希望我从一个初学者角度写的这本书，能够帮更多人认识到Bootstrap的价值，希望自己的经历对大家有用，也请专家们批评指正。

其他资源

看书或许并不是学习Bootstrap的唯一方式。这取决你想学什么，或者为什么学。

如果你只想初步了解Bootstrap，那么其在线文档已经足够了。Jacob Thornton 和 Mark Otto 为此提供了很多精美的示例、HTML 片段及其他对你入门有帮助的信息。Bootstrap的在线文档写得很好，本书结构也参考了该文档。

如果你想对这个开源项目做点贡献，可以在GitHub上提交请求或使用跟踪程序，获得项目的更新、下载、文档。

Bootstrap适合你吗

如果你只想找JavaScript插件或CSS重置文件，Bootstrap可能就太大了。如果你只是不喜欢Bootstrap的默认界面元素，那不要紧，因为你可以轻易定制这些元素的外观，而且去掉相关的标签也易如反掌。如果你想快速构建响应式网站，Bootstrap绝对是明确的选择。

排版约定

本书使用的排版约定如下。

• 楷体

表示新的术语。

• 等宽字体

表示程序片段，也用于在正文中表示程序中使用的变量、函数名、命令行代码、环境变量、语句和关键词等代码文本。

• 加粗的等宽字体

表示应该由用户逐字输入的命令或者其他文本。

• 倾斜的等宽字体

表示应该由用户输入的值或由上下文决定的值替换的文本。

这个图标代表小窍门、建议或说明。

这个图标代表警告信息。

使用代码

本书就是要帮读者解决实际问题的。也许你需要在自己的程序或文档中用到本书中的代码。除非大段大段地使用，否则不必与我们联系取得授权。因此，用本书中的几段代码写成一个程序不用向我们申请许可。但是销售或者分发O’Reilly图书随附的代码光盘则必须事先获得授权。引用书中的代码来回答问题也无需我们授权。将大段的示例代码整合到你自己的产品文档中则必须经过许可。

使用我们的代码时，希望你能标明它的出处。出处一般要包含书名、作者、出版商和 ISBN，例如：Bootstrap by Jake Spurlock (O’Reilly). Copyright 2013 Jake Spurlock, 978-1-449-34391-0。

如果还有其他使用代码的情形需要与我们沟通，可以随时与我们联系：permissions@oreilly.com。

欢迎指正

希望读者可以通过本书学到想学的东西，同时也希望你能帮助别人学习Bootstrap。帮助别人的方式有很多种。

• 发现本书有技术问题或者解释不清，或其他可以改进的地方，请提交勘误。

• 如果你喜欢（或不喜欢）这本书，请写出书评。可以直接在Amazon. com 或 O’Reilly 网站本书页面上留言。指出哪些地方讲得清楚，哪些地方还不够清楚，对其他读者和我都将有很大帮助。

• 如果你想分享学习Bootstrap的心得，请付诸行动，你可以写博客、发微博、写书、搞培训，怎么都行。

我会尽力根据勘误和评论更新这本书。就算书已经印刷上市，我也会在新版本中更正。要是你购买了电子版，可以免费获得新版本。我觉得这本书不会升级太快，除非Bootstrap有很大变化。但愿这本书能让读者朋友有所收获，激发你分享的兴趣。®

Safari Books Online

Safari Books Online（www.safaribooksonline. com）是应需而变的数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作家的专业作品。

Safari Books Online 是技术专家、软件开发人员、Web 设计师、商务人士和创意人士开展调研、解决问题、学习和认证培训的第一手资料。

对于组织团体、政府机构和个人，Safari Books Online 提供各种产品组合和灵活的定价策略。用户可通过一个功能完备的数据库检索系统访问 O’Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology 以及其他几十家出版社的上千种图书、培训视频和正式出版之前的书稿。要了解 Safari Books Online 的更多信息，我们网上见。

联系我们

请把对本书的评价和问题发给出版社。

美国：

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938（从美国和加拿大拨打）

707-829-0515（在本地或从其他国家拨打）

707-829-0104（传真）

中国：

北京市西城区西直门南大街2号成铭大厦C座807室（100035）奥莱利技术咨询（北京）有限公司

O’Reilly的每一本书都有专属网页，你可以在那儿找到本书的相关信息，包括勘误表、示例代码以及其他信息。本书的网站地址是：

http://shop.oreilly.com/product/0636920027867.do

中文版地址：

http://www.oreilly.com.cn/index.php?func=book&isbn=978-7-115-32735-2

对于本书的评论和技术性问题，请发送电子邮件到：

bookquestions@oreilly.com

要了解更多O’Reilly图书、培训课程、会议和新闻的信息，请访问以下网站：

http://www.oreilly.com

我们在Facebook的地址如下：

http://facebook.com/oreilly

请关注我们的Twitter动态：

http://twitter.com/oreillymedia

我们的YouTube视频地址如下：

http://www.youtube.com/oreillymedia

致谢

首先感谢 Dave Winer 引领我使用 Bootstrap，然后感谢 Simon St. Laurent 为我提供了写书的机会。好朋友 Roseanne Fallin 和 Tony Quartorolo的反馈让这本书成为可能。我希望这本书能帮读者走上正轨。还要感谢 Melissa Morgan 支持我在 MAKE 似乎有点冒险的开发思路。

特别要感谢我的妻子Melissa，感谢她的坚忍和对我的鼓励。感谢我的儿子Rush，他居然理解我需要“工作”，还要感谢我女儿Hailey那暖暖的微笑和紧紧的拥抱。我爱我家，感谢她们对我的支持。第1章Bootstrap提供的网站框架1.1 Bootstrap到底是什么

Bootstrap 是 Mark Otto 和 Jacob Thornton 共同开发的一个开源框架。最初发布Bootstrap的时候，他们两位都在Twitter工作。当时，他们面临着为公司内部提供一套标准化的前端开发工具的需求。在发布Bootstrap 的那篇博客中，Mark Otto 这样介绍他们的新项目：

Twitter诞生初期，为了完成前端开发任务，工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。Bootstrap最初就是这个问题的一个解决方案，而且在Twitter内部第一次Hackweek上得到了认可。Hackweek结束后，我们手头上的项目已经相当稳定，可以在公司内部部署使用了。——Mark Ottohttps://dev.twitter.com

Bootstrap是2011年8月发布的，发布之后就迅速走红。而且，它也从最初CSS驱动的项目，发展到内置了很多JavaScript插件和图标，并且涵盖了表单和按钮元素。Bootstrap本身支持响应式Web设计，而且拥有一个非常稳健的12列、940像素宽的网格布局系统。值得一提的是，Bootstrap网站（http://getbootstrap.com）上还提供了一个构建工具，让你根据自己的需求选择CSS和JavaScript功能。所有这一切让前端Web开发有了前瞻性的设计和开发基础，开发效率倍增。上手使用Bootstrap非常简单，跟在网站中整合CSS和JavaScript没有什么区别。

对于新项目，Bootstrap则提供了一整套有用的基本要素。一般来说，我在着手开发新项目的时候，都会整合 Eric Meyer 的 Reset CSS （http://meyerweb.com/eric/tools/css/reset/）等一些工具。自从有了Bootstrap，只要在网站中引入bootstrap.css这个CSS文件，或者再加上bootstrap.js这个JavaScript文件，整个项目的基础平台就搭建好了。1.2 Bootstrap的文件结构

bootstrap/

├─css/

│ ├─ bootstrap.css

│ ├─ bootstrap.min.css

├─js/

│ ├─ bootstrap.js

│ ├─ bootstrap.min.js

├─img/

│ ├─ glyphicons-halflings.png

│ ├─ glyphicons-halflings-white.png

└─README.md

下载之后的Bootstrap包含三个文件夹：css、js和img。为简单起见，请大家把这三个文件夹放到项目根目录中。CSS和JavaScript文件分别有一个压缩版，可以根据需要选择一个版本，没必要在项目中同时包含两个版本。我一般开发时使用未压缩版，而在发布时使用压缩版本。1.3 基本的HTML模板

一般Web项目的HTML文件如下所示：

Hello, world!

使用Bootstrap时，则要包含它的CSS样式表和JavaScript文件：

Hello, world!

别忘了HTML5的文档类型声明。

只要包含 ，所有现代浏览器都启动标准模式。1.4 全局样式

Bootstrap 预定义了一些样式。Bootstrap 1.0 使用的是以前的重置样式表，但 Bootstrap 2.0 则使用 Nicolas Gallagher 写的 Normalize.css （http://necolas.github.com/normalize.css/），HTML5 Boilerplate （http://html5boilerplate.com/）使用的也是这个样式表。这个样式表包含在 bootstrap.css 中。

特别值得注意以下几种默认样式，它们专门针对排版和链接：

• 从 body 中去掉了 margin，这样内容就会紧贴浏览器窗口边缘；

• 为 body 应用了 background-color: white;；

• Bootstrap 以@baseFontFamily、@baseFontSize 和 @baseLineHeight属性作为排版的基准，确保整个网站的标题及其他内容的行高一致；

• Bootstrap 通过@linkColor 设置全局链接颜色，只在 :hover 状态下给链接添加下划线。

记住，要修改默认颜色，可以直接修改相应.less文件中的全局变量值。要么修改scaffolding.less文件，要么修改你自己的样式表。1.5 默认网格系统

Bootstrap默认的网格布局（图1-1）包含12列，940像素宽，不支持响应式布局。加载响应式CSS文件后，网格布局会根据视口（viewport）宽度在724像素到1170像素之间伸缩。视口宽度小于767像素时，说明是平板电脑或更小的设备，布局中的列会垂直堆叠起来。默认宽度下，每列宽60像素，且向左平移20像素。图1-1展示了12列时的情况。图1-1：默认的网格1.5.1 基本网格的HTML

创建简单布局时，给作为行的

下面的代码使用了.span8和.span4，总共横跨12列：

使用.offset*类可以向右平移列，*用于指定平移的列数。比如，下面代码中的.offset2会导致.span7向右平移2列（见图1-2）：

要嵌套列，只要在相应的.span*中再增加一个.row，然后在其中包含与父容器列数相等的.span*即可（见图1-3）：

Level 1 of column

流式网格系统的列宽定义使用百分比，而不是像素。流式网格系统与固定网格系统一样都具有响应能力，可适应不同的屏幕和设备。只要把某一行的.row改为.row-fluid，这一行就会成为流式的。不改变列的类，是为了简化固定和流式网格的切换。想平移列？跟固定网格中一样，在要平移的列中添加.offset*类即可：

流式网格中的嵌套有点不一样。原因是在使用百分比的情况下，每个.row都会把列数重置为12。举个例子，要想在一个.span8中嵌套两个等宽的列，不能使用两个.span4（尽管两个4平分8），而应该使用两个类为.span6的

要在页面中实现固定宽度、居中的布局，只要把内容统统放到

要让Bootstrap支持响应式布局，必须在标签中添加一个标签。另外，如果你下载的文件中没有响应式CSS文件，也要单独下载。响应式布局必需的标签和文件如下所示：

如果发现Bootstrap没有响应能力，请确保这些标签一个也不少。目前，响应能力还不是默认就有的，因为不是所有网站都需要响应式布局。Bootstrap的作者选择了让开发人员需要时添加，而不是不需要时删除响应功能。

什么是响应式设计

响应式设计是针对浏览设备优化页面中既有内容的一种方法。比如，在桌面浏览器中既可以看到网站的常规版本，也可以在用户接入更大的显示器时看到针对宽屏的布局。在平板电脑中看到的是针对其横屏和竖屏模式优化之后的布局。而在手机上，则是能够适应更窄宽度的布局。为了适用不同的屏幕宽度，Bootstrap使用CSS的媒体查询（media query）来检测浏览器视口的宽度，然后再根据条件加载和应用调整布局的样式表。根据浏览器视口的宽度，Bootstrap可以按照纵横比或宽度的范围来优化布局，但最主要还是使用min-width和max-width属性。

Bootstrap内部支持5种不同的布局，都依赖于CSS媒体查询。最大布局中每一列的宽度为70像素，而常规布局中每一列宽度是60像素。在适合平板电脑的布局中，列宽缩小为42像素，再窄一点，每一列就会流动起来，变成在垂直方向上堆叠，并且都与视口同宽（见表1-1）。表1-1 响应式媒体查询

要根据媒体查询添加自定义的CSS，可以像下面这样把所有规则写到一个CSS文件中，也可以单写一个CSS文件：

/*大屏幕*/

@media (min-width: 1200px) { ... }

/*平板竖屏到横屏到常规屏幕*/

@media (min-width: 768px) and (max-width: 979px) { ... }

/*手机横屏到平板竖屏*/

@media (max-width: 767px) { ... }

/*手机横屏及更小屏幕*/

@media (max-width: 480px) { ... }

对于大型网站，应该把不同的媒体查询分别保存在单独的CSS文件中。而在HTML的标签中，可以根据条件加载它们。这样可以保证加载的文件相对小，但在响应式布局中会增加HTTP请示。如果你使用LESS编译CSS，可以把它们都放到一个文件中：

href="tablet.css"/>

辅助类

Bootstrap为响应式开发提供了一些辅助类（见表1-2），但这些类还是能不用就不要用。什么情况下用呢？比如在某些布局中显示或隐藏自定义元素。举个例子，常规布局中可以包含一个页眉，但在移动布局中需要简化它，只显示少量元素。此时，可以给页眉中需要隐藏的元素添加.hidden-phone类。表1-2 媒体查询辅助类

响应式开发有两种主要的思路。当前备受推崇的方法是从移动版本做起，最后才是桌面网站。Bootstrap的思路刚好相反，你可以用它来搭建一个“差不多”的桌面网站。

不过，就算你想找的是移动开发框架，Bootstrap仍然是值得考虑的。第2章Bootstrap预定义的CSS样式

Bootstrap提供了一组基本的具有预定义样式的HTML元素，用户通过类和自定义样式很容易增强这些元素。2.1 排版

对页面排版，Bootstrap使用的默认字体栈为 "Helvetica Neue", Helvetica, Arial, sans-serif;。这些字体也是主流操作系统默认支持的标准字体。万一明确指定的字体都不存在，那么负责兜底儿的sans-serif会告诉浏览器使用默认的字体。页面正文的font-size是14像素，line-height是20像素。所有段落的margin-bottom是10像素，也就是line-height的一半。2.1.1 标题

Bootstrap为所有6个级别的标题都定义了样式（见图2-1），其中

是36像素高，

是12像素高（前面说过，正文是14像素高）。此外，如果想给这些标题添加行内级的子标题，可以使用标签，结果文本会稍小一些，颜色会稍浅一些。拿

来说，它的子标题的文本是24像素高，不加粗，而且是灰色：

h1 small {

font-size:24px;

font-weight:normal;

line-height:1;

color:#999;

}图2-1：标题2.1.2 强调段落

要想强调某个段落的文本，可以为它加上class="lead"（见图2-2）。这会导致段落文本稍稍变大、变细，行高也变高。这种样式一般用于文章的前几段，但用在其他位置也未尝不可：

Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter

swine boudin meatloaf shoulder short ribs cow drumstick beef jowl.

Meatball chicken sausage tail, kielbasa strip steak turducken venison prosciutto.

Chuck filet mignon tri-tip ribeye, flank brisket leberkas. Swine turducken

turkey shank, hamburger beef ribs bresaola pastrami venison rump.

前面讨论过可以在标题中使用标签，在正文中也可以使用该标签。为正文中的文本添加这个标签后，文本会缩小到原来大小的85%。2.1.4 粗体

要强调具体的文本，可以使用标签，这样就会给相应文本应用font-weight:bold;。2.1.5 斜体

要生成斜体，使用标签。这个标签的意思也是在文本中强调某些内容。

有读者可能不解，为什么不使用或，而非要用和呢？在HTML5中，的语义是仅仅突出显示某些词或短语，但不代表它们更重要，比如一些关键词或人名。而主要用于表示不同的语言、技术术语、内部对话等。要了解和的语义变化，请参考W3.org的文章（http://www.w3.org/International/questions/qa-b-and-i-tags）。2.1.6 强调相关的类

除了和，Bootstrap还提供了一些表示强调的类（见图2-3）。这些类可以应用给

或：

This content is muted

This content carries a warning class

This content carries an error class

This content carries an info class

This content carries a success class

This content has emphasis, and can be bold

2．地址

在页面中使用

O'Reilly Media, Inc.

15 Gravenstein HWY North

Sebastopol, CA 95472

P:

(77) 827-7

Jake Spurlock

flast@oreilly.com

3．引用

要在页面中标记引用或名人名言的文本块，使用

标签。为了保证效果，必要时可以添加
换行，用

分段。Bootstrap默认会缩进引用的文本，并在左侧加一条粗边框。标记引用来源可以用标签，人名可以用标签：

That this is needed, desperately needed, is indicated by the

incredible uptake of Bootstrap. I use it in all the server software

I'm working on. And it shows through in the templating language I'm

developing, so everyone who uses it will find it's "just there" and

works, any time you want to do a Bootstrap technique. Nothing to do,

no libraries to include. It's as if it were part of the hardware.

Same approach that Apple took with the Mac OS in 1984.

Developer of RSS, Dave Winer

试读结束[说明：试读内容隐藏了图片]

下载完整电子书