Bootstrap用户手册：设计响应式网站 (Jake Spurlock) (Z Library)

版权信息 书名：Bootstrap⽤户⼿册：设计响应式⽹站（GitHub有史以来最受欢 迎的开源项⽬，中⽂版使⽤指南⾯⾯俱到，⼀册在⼿，别⽆所求！） 作者：Jake Spurlock 译者：李松峰 ISBN：978-7-115-32735-2 本书由北京图灵⽂化发展有限公司发⾏数字版。版权所有，侵权必 究。 您购买的图灵电⼦书仅供您个⼈使⽤，未经授权，不得以任何⽅式复 制和传播本书内容。 我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产 权。 如果购买者有侵权⾏为，我们可能对该⽤户实施包括但不限于关闭该 帐号等维权措施，并可能追究法律责任。  

⽬录 版权声明 O'Reilly Media, Inc.介绍 序 前⾔ 第1章 Bootstrap提供的⽹站框架 1.1 Bootstrap到底是什么 1.2 Bootstrap的⽂件结构 1.3 基本的HTML模板 1.4 全局样式 1.5 默认⽹格系统 1.5.1 基本⽹格的HTML 1.5.2 平移列 1.5.3 嵌套列 1.6 流式⽹格系统 1.7 容器布局 1.8 响应式设计 什么是响应式设计 第2章 Bootstrap预定义的CSS样式 2.1 排版 2.1.1 标题 2.1.2 强调段落 2.1.3 强调内容 2.1.4 粗体 2.1.5 斜体 2.1.6 强调相关的类 2.1.7 列表

2.2 代码 2.3 表格 2.3.1 可选的表格类 2.3.2 表格⾏的类 2.4 表单 2.4.1 可选的表单布局 2.4.2 内置⽀持的表单控件 2.4.3 扩展的表单控件 2.4.4 设置控件⼤⼩ 2.4.5 表单控件的状态 2.5 按钮 2.5.1 按钮⼤⼩ 2.5.2 禁⽤按钮的样式 2.6 图⽚ 2.7 图标 2.7.1 感谢GLYPHICONS提供图标 2.7.2 ⽤法 第3章 Bootstrap内置的布局组件 3.1 下拉菜单 选项 3.2 按钮组 让按钮组具有单选按钮和复选框的功能 3.3 按钮下拉菜单 3.3.1 分隔式按钮下拉菜单 3.3.2 上拉菜单 3.4 导航元素 3.4.1 标签形导航 3.4.2 㬵囊形导航 3.4.3 垂直堆叠的导航

3.4.4 导航加下拉菜单 3.4.5 导航列表 3.4.6 可切换的标签导航 3.5 导航条 3.5.1 导航条链接 3.5.2 表单 3.5.3 导航条菜单 3.6 ⾯包屑式导航 3.7 分⻚导航 前后⻚导航 3.8 标签 3.9 圆标签 3.10 排版相关的元素 3.10.1 重头消息 3.10.2 ⻚⾯标题 3.11 缩略图 3.12 警⽰框 3.13 进度条 3.14 媒体对象 3.15 其他组件 3.15.1 洼地 3.15.2 辅助类 第4章 Bootstrap⽀持的JavaScript插件 4.1 概述 可编程的API 4.2 过渡 4.3 模态框 4.3.1 ⽤法 4.3.2 选项

4.3.3 ⽅法 4.3.4 事件 4.4 下拉菜单 4.4.1 ⽤法 4.4.2 通过JavaScript使⽤下拉菜单 4.4.3 ⽅法 4.5 滚动监控器 4.5.1 ⽤法 4.5.2 .scrollspy('refresh')⽅法 4.5.3 选项 4.5.4 事件 4.6 可切换的标签⻚ 4.6.1 ⽤法 4.6.2 事件 4.7 提⽰条 4.7.1 ⽤法 4.7.2 选项 4.7.3 ⽅法 4.8 弹出层 4.8.1 ⽤法 4.8.2 选项 4.8.3 ⽅法 4.9 警⽰框 4.9.1 ⽤法 4.9.2 关闭⽅法 4.9.3 事件 4.10 按钮 4.10.1 加载状态 4.10.2 单选开关

4.10.3 复选按钮 4.10.4 单选按钮 4.10.5 ⽤法 4.10.6 ⽅法 4.11 折叠框 4.11.1 ⽤法 4.11.2 选项 4.11.3 ⽅法 4.11.4 事件 4.12 传送带 4.12.1 ⽤法 4.12.2 选项 4.12.3 ⽅法 4.12.4 事件 4.13 预先输⼊ 4.13.1 ⽤法 4.13.2 选项 4.14 粘条 4.14.1 ⽤法 4.14.2 选项 第5章 实际使⽤Bootstrap 5.1 GitHub项⽬ 5.2 定制Bootstrap 5.2.1 使⽤LESS 5.2.2 Snippets插件 5.2.3 Photoshop模板 5.2.4 主题 5.3 获得灵感 5.4 ⼩结

作者及封⾯介绍      

版权声明 ©2013 by Jake Spurlock. Simplified Chinese Edition,jointly published by O’Reilly Media,Inc.and Posts & Telecom Press, 2013 Authorized translation of the English edition, 2013 O'Reilly Media,Inc.,the owner of all rights to publish and sell the same. All rights reserved including the rights of reproduction in whole or in part in any form. 英⽂原版由O'Reilly Media, Inc.出版2013。 简体中⽂版由⼈⺠邮电出版社出版， 2013。英⽂原版的翻译得到 O'Reilly Media, Inc.的授权。此简体中⽂版的出版和销售得到出版权和 销售权的所有者 —— O'Reilly Media,Inc.的许可。 版权所有，未得书⾯许可，本书的任何部分和全部不得以任何形式重 制。  

O'Reilly Media, Inc.介绍 O'Reilly Media通过图书、杂志、在线服务、调查研究和会议等⽅式传 播创新知识。⾃1978年开始，O'Reilly⼀直都是前沿发展的⻅证者和推 动者。超级极客们正在开创着未来，⽽我们关注真正重要的技术趋势 ——通过放⼤那些“细微的信号”来刺激社会对新科技的应⽤。作为技 术社区中活跃的参与者，O'Reilly的发展充满了对创新的倡导、创造和 发扬光⼤。 O'Reilly为软件开发⼈员带来⾰命性的“动物书”；创建第⼀个商业⽹站 （GNN）；组织了影响深远的开放源代码峰会，以⾄于开源软件运动 以此命名；创⽴了Make杂志，从⽽成为DIY⾰命的主要先锋；公司⼀ 如既往地通过多种形式缔结信息与⼈的纽带。O'Reilly的会议和峰会集 聚了众多超级极客和⾼瞻远瞩的商业领袖，共同描绘出开创新产业的 ⾰命性思想。作为技术⼈⼠获取信息的选择，O'Reilly现在还将先锋专 家的知识传递给普通的计算机⽤户。⽆论是通过书籍出版，在线服务 或者⾯授课程，每⼀项O'Reilly的产品都反映了公司不可动摇的理念 ——信息是激发创 新的⼒量。

业界评论 “O'Reilly Radar博客有⼝皆碑。” ——Wired “O'Reilly凭借⼀系列（真希望当初我也想到了）⾮凡想法建⽴了数百 万美元的业务。” ——Business 2.0 “O'Reilly Conference是聚集关键思想领袖的绝对典范。” ——CRN “⼀本O'Reilly的书就代表⼀个有⽤、有前途、需要学习的主题。” ——Irish Times “Tim是位特⽴独⾏的商⼈，他不光放眼于最⻓远、最⼴阔的视野并且 切实地按照Yogi Berra的建议去做了：‘如果你在路上遇到岔路⼝，⾛ ⼩路（岔路）。’回顾过去Tim似乎每⼀次都选择了⼩路，⽽且有⼏次 都是⼀闪即逝的机会，尽管⼤路也不错。” ——Linux Journal  

序 我在Mac⾯世之前就开发软件了，因此我记得当时技术界的反应。很 ⼤程度上，技术圈的⼈都对此不太感冒。有意思的是，今天很多⼈对 Bootstrap的负⾯影响议论纷纷，像极了1984年⼈们对Mac的指指点 点。但两个事件中⼀致的是，⼈们不喜欢的东⻄，对他们却⾮常重 要。 苹果意识到有些事所有软件都必须做，那为什么这些软件不采⽤相同 的⽅法来做呢？如果能做到这⼀点，开发和调试就容易多了，⽽更重 要的是，⽤起来也就容易多了！如果只有⼀种创建菜单的⽅式，那么 ⽤户只要在⼀个应⽤上学会使⽤菜单，就会使⽤任何应⽤中的菜单 了。滚动条、窗⼝、键盘、⿏标、打印机、⾳乐，不都⼀样吗？ 那时，程序员（包括我）之所以不喜欢Mac，是因为觉得它要拿我们 做过的东⻄转变成商品去卖钱。另外，这种⼤⼀统的⽅式存在局限 性。有⼀些应⽤的界⾯元素并不规范。怎么办？好，你⾃⼰来改，只 能这样。 这在技术上就叫重构。如果你发现⾃⼰⼀遍⼀遍地在重复做⼀件事， 不妨再努⼒⼀次做得更好⼀点，做出个API来，保证它灵活好⽤。然 后，就再也不⽤重复了。这正是软件也能写得像摩天⼤楼那样⾼⼤复 杂的奥秘。五年前最前沿的技术如今已经融⼊了操作系统。这就是进 步，这样多好啊！ 同样的情形在⽹站开发过程也随处可⻅。事实上，以Mac当年对未来 的愿景观之，Web开发领域的重复劳动以及开发环境的落后程度是令 ⼈沮丧的。然⽽，Bootstrap⾄少担负起了重构的责任。如果我想做个 菜单，那就⽤它来做好了。没错，我的菜单跟别⼈的没什么区别。但

这对⽤户是好事⼉啊。⽤户不⽤再学习第⼆种菜单、第三种菜单的⽤ 法了。 Bootstrap是必需的、绝对必要的，它的迅速普及就是明证。不光我的 服务器端软件会⽤到它，我开发的模板语⾔⾥也少不了它，这样只要 ⽤户想使⽤Bootstrap，随时随地⽤就可以了。什么也不⽤做，也不⽤ 包含什么库。就像服务器硬件的⼀部分，跟苹果1984年在Mac OS上所 做的⼀样。 跟所有重要的技术⼀样，Bootstrap只是“够好”⽽已，并⾮完美。换句 话说，Mark Otto和Jacob Thornton还可以让⾃⼰的重构更上⼀层楼。然 ⽽，假如他们不断追求让代码更简洁、外观更漂亮，那恐怕就没有那 么好⽤了。Bootstrap为你我这样忙于写⽹站的⼈彻底解决了⽤户界⾯ 的问题。 不过，我认为这只是开始。我预感到Bootstrap会成为Web的⼀个组 件，或者说它很可能出现在你会⽤到的所有开发⼯具中。有朝⼀⽇ ——应该不会太久，设计⼈员将能够不修改任何样式和脚本，就给整 个⽹站换⼀次⽪肤。我没发现使⽤Bootstrap会带来什么局限性。 Bootstrap不能取代设计师，相反，它是设计师⼿中的利器，也拓展了 设计师的想象空间。 今天，能在O'Reilly出⼀本书往往标志着⼀种新技术⾛向成熟。现在， Bootstrap的书也出版了。作者Jake Spurlock是⼀位Web开发⼈员，已经 使⽤Bootstrap写了很多⽹站，并在技术⼤会上分享过他的经验。我很 荣幸，据说他是在看了我写的⼀系列博客⽂章之后才决定使⽤ Bootstrap的。现在，我⾮常⾼兴地把他的书推荐给各位读者。来听听 他为⼤家讲解Bootstrap的魔法吧，让⾃⼰也拥有推动世界进步的魔 ⼒！ Dave Winer

Scripting News编辑 2013年1⽉于纽约  

前⾔ 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的价值，希望⾃⼰的经历对 ⼤家有⽤，也请专家们批评指正。