简体网页||繁体网页

☆☆☆☆☆

吕国泰，何升隆，曾伟凯 著

图书标签:

• 响应式网页设计
• Bootstrap
• 前端开发
• HTML
• CSS
• JavaScript
• Web开发
• 移动优先
• 网页布局
• 前端框架

出版社： 清华大学出版社

ISBN：9787302466314

版次：1

商品编码：12154668

包装：平装

开本：16开

出版时间：2017-03-01

用纸：胶版纸

页数：234

字数：397000

正文语种：中文

产品特色

编辑推荐

热门的Bootstrap让许多企业在招聘网页设计师时都将之列为必备的技能条件，Bootstrap采用了模组化设计，简易到只要懂得如何套用，就可以快速开发出具有美感的响应式（RWD）网页。
本书对于许多不擅长视觉设计的网页工程师来说，省去了许多美化的时间与困惑，而对于视觉设计师来说，也能按照自己设计的版型设计出网页，同时支持市面上大部分的主流浏览器，而对于想踏入响应式网页领域的初学者来说，则可以在短时间内学到*实用的响应式网页设计技能。
本书从认识响应式网页设计与Bootstrap开始，详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势，导入视觉设计与网页制作两个不同领域的专业知识，并提供120多个Bootstrap功能范例网页文件，说明如何使用Bootstrap框架所提供的各种CSS与组件等内容，*后以3个完整实例制作出响应式网页，让大家综合运用所学知识，提高实战技能。

内容简介

本书从认识响应式网页设计与Bootstrap开始，详解网站的开发流程、响应式网页的设计思维、SEO设置以及网页设计趋势，导入视觉设计与网页制作两个不同领域的专业知识，并提供120多个Bootstrap功能范例网页文件，说明如何使用Bootstrap框架所提供的各种CSS与组件等内容，*终以3个完整实例（书籍宣传网页、产品推广网页、网站首页）制作出响应式网页，以让大家综合运用所学知识，提高实战技能。
本书以丰富的范例程序和详细的图解逐一讲解 RWD 技术 + Bootstrap 结合使用的核心技术和方法，既适合负责网页前端和后端的程序人员阅读，也适合网站的企划人员和视觉设计人员参考，还可供想学习和了解响应式网页设计 + Bootstrap 开发网站的人员自学和参考。

作者简介

吕国泰，资深设计师，多媒体兼任讲师。

目录

目 录

第1章 响应式网页简介 1
1.1 何谓响应式网页 1
1.2 响应式网页的优点 2
1.3 响应式网页的缺点 3
1.4 响应式的概念 3
1.5 Viewport 4
1.6 流式网格 5
1.6.1 网格设计 5
1.6.2 流式布局 6
1.7 媒体查询的基础 7
1.7.1 使用方法 8
1.7.2 设置方式 8
1.7.3 媒体类型 8
1.7.4 判断条件 9
1.7.5 媒体特征 10
1.8 流式图像 10
1.9 字体 11
第2章 Bootstrap简介 12
2.1 何谓Bootstrap 12
2.2 Bootstrap 具有哪些内容 12
2.3 下载Bootstrap 13
2.4 链接Bootstrap框架 15
2.5 下载与链接 jQuery 文件 16
2.6 快速体验——运用 CSS 样式 17
第3章 网站的开发流程 20
3.1 项目 20
3.2 企划 21
3.3 设计 21
3.4 前端 22
3.5 后端 22
3.6 测试 23
3.7 上线 23
第4章 响应式网页的设计思维 25
4.1 与传统网站开发的差异 25
4.2 响应式网页的设计考虑 26
4.3 移动设备的设计考虑 28
4.3.1 移动设备的特征 28
4.3.2 移动设备优先 28
第5章 视觉设计师与前端工程师的专业认知 31
5.1 网页与印刷的差异 31
5.2 网页向量格式 SVG 32
5.3 版面设计时的常见词汇 33
5.4 网格的运用与制作 35
5.4.1 网格辅助—— PSD 35
5.4.2 网格辅助—— AI 36
5.4.3 网格辅助——自行设置 38
5.5 让视觉设计师懂得切版 42
5.5.1 切版重点 42
5.5.2 了解版面的构成 42
第6章 SEO简介 44
6.1 何谓SEO 44
6.2 改善网站标题与描述 45
6.3 改善网站架构 47
6.3.1 网站架构简介 47
6.3.2 架构*佳做法 48
6.3.3 让网站更易于浏览 48
6.3.4 易于浏览的*佳做法 49
6.4 可优化的内容与做法 50
6.4.1 优质内容与服务 50
6.4.2 链接 50
6.4.3 图片 51
6.4.4 标题 52
6.5 管理与营销 53
6.5.1 使用网站管理工具 53
6.5.2 网站营销工作要点 54

第7章 网页设计趋势 56
7.1 响应式网页设计 56
7.2 全幅背景 57
7.3 单页式网页 57
7.4 固定式菜单 59
7.5 扁平化设计 59
7.6 微动画 60
7.7 卡片式设计 61
7.8 隐藏式菜单 61
7.9 超大的字体 62
7.10 幽灵按钮 63
第8章 HTML5+CSS3 的基础知识 64
8.1 认识DIV与CSS 64
8.1.1 认识DIV 64
8.1.2 CSS Class 与 CSS ID 65
8.2 HTML5与CSS3的新增内容 67
8.2.1 认识 HTML5 67
8.2.2 HTML5 的新元素与属性 68
8.2.3 认识 CSS3 71
8.2.4 CSS3 新增的属性 71
第9章 响应式网页的布局方式 76
9.1 Grid System简介 76
9.1.1 何谓 Grid System 76
9.1.2 网页的 Grid System 77
9.1.3 网页设计为何需要 Grid System 78
9.1.4 Grid System 的使用方法 78
9.2 布局规则 79
9.2.1 Bootstrap 中的 Grid System 79
9.2.2 不同设备的 Grid 设置 80
9.2.3 嵌套排版 82
9.2.4 移动与调整 Column 的位置 83
9.2.5 Column 的规则 83
9.2.6 调整Column的顺序 84
第10章 Bootstrap CSS 样式的使用 86
10.1 排版 86
10.1.1 标题 86
10.1.2 页面主题 87
10.1.3 行内文字元素 88
10.1.4 对齐类 90
10.1.5 转换类 91
10.1.6 联系字段 91
10.1.7 引用 91
10.1.8 列表 93
10.2 表格 95
10.2.1 表格类 95
10.2.2 状态类 97
10.2.3 响应式表格 97
10.3 窗体 98
10.3.1 基本范例 98
10.3.2 窗体布局 99
10.3.3 支持的控件 100
10.3.4 焦点状态 105
10.3.5 禁用状态 105
10.3.6 只读状态 106
10.3.7 验证状态 106
10.4 按钮 108
10.4.1 按钮标签 108
10.4.2 颜色类 109
10.4.3 大小类 109
10.4.4 启用状态 111
10.4.5 禁用状态 111
10.5 图片 113
10.5.1 响应式图片 113
10.5.2 图片形状 113
第11章 Bootstrap布局组件的使用 115
11.1 字体图标 115
11.2 下拉式菜单 116
11.2.1 说明 116
11.2.2 使用的方法 116
11.2.3 其他辅助项目 117
11.2.4 范例 119
11.3 按钮群组 120
11.3.1 说明 120
11.3.2 使用方法 120
11.3.3 其他辅助项目 120
11.3.4 范例 122
11.4 输入框群组 123
11.4.1 说明 123
11.4.2 使用方法 123
11.4.3 其他辅助项目 124
11.4.4 范例 125
11.5 导航 127
11.5.1 说明 127
11.5.2 使用方法 127
11.5.3 其他辅助项目 127
11.5.4 范例 129
11.6 导航栏 130
11.6.1 说明 130
11.6.2 使用方法 130
11.6.3 其他辅助项目 131
11.6.4 范例 133
11.7 分页 135
11.7.1 说明 135
11.7.2 使用方法 135
11.7.3 其他辅助项目 135
11.7.4 范例 137
11.8 提示标志 137
11.8.1 说明 137
11.8.2 范例 138
11.9 大屏幕效果 138
11.9.1 说明 138
11.9.2 范例 139
11.10 缩略图 139
11.10.1 说明 139
11.10.2 使用方法 140
11.10.3 范例 140
11.11 进度条 141
11.11.1 说明 141
11.11.2 使用方法 142
11.11.3 其他辅助项目 142
11.11.4 范例 144
11.12 面板 144
11.12.1 说明 144
11.12.2 使用方法 144
11.12.3 其他辅助项目 145
11.12.4 范例 146
11.13 响应式嵌入内容 147
11.13.1 说明 147
11.13.2 范例 147
第12章 Bootstrap JS 插件的使用 149
12.1 概观 149
12.2 页签 149
12.2.1 说明 149
12.2.2 使用方法 150
12.2.3 淡入效果 150
12.2.4 范例 150
12.3 提示工具 152
12.3.1 说明 152
12.3.2 使用方法 152
12.3.3 范例 153
12.4 弹出提示 154
12.4.1 说明 154
12.4.2 使用方法 154
12.4.3 范例 155
12.5 折叠效果 156
12.5.1 说明 156
12.5.2 使用方法 156
12.5.3 范例 157
12.6 轮播效果 159
12.6.1 说明 159
12.6.2 使用方法 159
12.6.3 标题制作 161
12.6.4 范例 161
第13章 网站实践——书籍宣传网页 164
13.1 套入链接 164
13.2 网格布局 165
13.3 页面设计 166
13.3.1 左边容器 166
13.3.2 右边容器 167
13.4 CSS美化与运用 171
第14章 网站实践——产品推广网页 174
14.1 套入链接 174
14.2 网格布局 175
14.2.1 建立分层说明文字 175
14.2.2 *外层与*层的布局 176
14.2.3 第二层的布局 177
14.2.4 第三层左边的布局 178
14.2.5 第三层右边的布局 179
14.2.6 第四层的布局 180
14.3 页面设计 180
14.3.1 *层设计 180
14.3.2 第二层设计 180
14.3.3 第三层左边的设计 181
14.3.4 第三层右边的设计 183
14.3.5 第四层设计 183
14.4 运用CSS 184
14.4.1 *层 184
14.4.2 第二层 185
14.4.3 第三层左边 186
14.4.4 第三层右边 187
14.4.5 第四层 189
第15章 网站实践——网站首页制作 190
15.1 套入链接 190
15.2 网格布局 191
15.2.1 建立层次说明文字 192
15.2.2 *层与第二层布局 193
15.2.3 第三层布局 193
15.2.4 第四层布局 194
15.2.5 第五层与第六层布局 195
15.3 *层设计——菜单 195
15.3.1 运用导航栏 JavaScript 195
15.3.2 修改类 196
15.3.3 运用 CSS 样式 197
15.4 第二层设计——广告横幅 198
15.4.1 使用轮播JavaScript 198
15.4.2 修改内容 199
15.4.3 运用 CSS 样式 200
15.5 第三层设计——*新公告与广告区 200
15.5.1 加入*新公告图片 200
15.5.2 应用折叠效果 JavaScript 201
15.5.3 修改类 201
15.5.4 加入广告图片 202
15.5.5 运用 CSS 样式 203
15.6 第四层设计——课程分享 204
15.6.1 加入课程标题图片 204
15.6.2 加入课程 1 图片与内容 204
15.6.3 加入课程 2 图片与内容 205
15.6.4 加入课程 3 图片与内容 206
15.6.5 加入课程 4 图片与内容 206
15.6.6 运用 CSS 样式 207
15.7 第五层设计——按钮链接 210
15.7.1 加入图片 210
15.7.2 运用 CSS 样式 211
15.8 第六层页面设计——页脚 212
15.8.1 加入文字 212
15.8.2 运用 CSS 样式 212
15.9 回到顶部按钮的制作 212
15.10 检查各尺寸浏览状态 214
15.10.1 问题一的解决方式 214
15.10.2 问题二的解决方式 215
第16章 辅助工具 217
16.1 Bootstrap 套件下载 217
16.2 可视化Bootstrap 在线编辑器 219
16.2.1 GRID SYSTEM 219
16.2.2 BASIC CSS 220
16.2.3 COMPONENTS 221
16.2.4 JAVASCRIPT 222
16.2.5 预览版式 222
16.2.6 下载结果 223
16.3 浏览器开发者模式检测 224
16.3.1 Firefox 浏览器 224
16.3.2 IE浏览器 226
16.3.3 Google Chrome 浏览器 226
16.3.4 在线检测 228
16.3.5 插件的辅助检测 231
16.4 尺寸对照工具 232
16.5 检测优化工具 233
16.6 设备尺寸参考 234

精彩书摘

第11章 Bootstrap布局组件的使用
11.1 字体图标
Bootstrap约有200个由Glyphicon Halflings 所提供的字体格式符号，让设计者选择使用，而不是像早期那样需通过设计软件来产生符号图片。
在每个符号的下方都有用于引用的类名称，如图11-1所示，在 HTML 设计中只要在指定的元素中加入此类名称，即可运用该图标。

图11-1 字体图标及其类名称
在使用图标的过程中，并非所有情况都适用。*常发生的问题是，将图标类应用到本身已经应用了非常多类的标签中，这种做法的结果常会导致图标无法顺利显示。因此，*佳的用法应该是先加入一个 标签，再将图标类应用其中。
范例
可在按钮、工具栏的群组、导航栏或窗体 input 元素使用图标类。本范例以 标签为例，并加入两种图标类进行说明，效果如图11-2所示。
? 范例：图标类的使用 (ch11.1example.html)




Star


图11-2 图标类使用的示范 (ch11.1example.html)
11.2 下拉式菜单
11.2.1 说明
下拉式菜单通常被用于导航栏或窗体中，将某个类进行分类以呈现一个具有层次关系的菜单。例如，“视频教学”是*上层的按钮，当单击后可展开“Android 应用开发”“GameSalad 2D 游戏制作”“Google Web Design”等选项，届时用户再通过单击鼠标选择其一，以便前往对应的页面。下拉式菜单的效果如图11-3所示。

图11-3 下拉式菜单的效果 (ch11.2example.html)
11.2.2 使用的方法
使用方法有两种，一种为加入 dropdown 类，另一种为建立 data 属性做呼应，具体说明如下（参考图11-4）：

图11-4 下拉式菜单的使用方法
（1）在*外层的 标签中设置 dropdown 类。
（2）在 标签中建立 data-toggle="dropdown" 属性，与*外层的dropdown类呼应。
11.2.3 其他辅助项目
可搭配使用的类如表11-1所示。
表11-1 辅助项目类
类 名称 说明 使用方法
dropdown-menu-right 菜单向右对齐 菜单按钮不变，但菜单项内容会整体靠右对齐 在 标签中的 dropdown-menu 类之后加入此类
dropdown-menu-left 菜单向左对齐 菜单按钮不变，但菜单项内容会整体靠左对齐 在 标签中的 dropdown-menu 类之后加入此类
dropdown-header 标题 给下拉菜单加入标题，以呈现出一个群组的概念 在 标签中加入此类
divider 分隔线 用来分隔每个系列下拉菜单的链接 在 标签中加入此类且此标签不需具有任何内容，只单纯显示分隔线效果，
disabled 禁用链接 链接完全失去作用 在 标签中加入此类
相关类的页面展示效果如图11-5~图11-8所示。

图11-5 菜单靠右对齐 (ch11.2alignment.html)

图11-6 标题 (ch11.2headers.html)

图11-7 分隔线 (ch11.2divider.html)

图11-8 禁用链接 (ch11.2disabled menu items.html)
11.2.4 范例
此范例使用了标题、分隔线、禁用链接3种类，执行结果如图11-9所示。
? 范例：下拉式菜单的制作 (ch11.2example final.html)



视频教学




双口吕教学










凯弟教学






图11-9 下拉式菜单的制作 (ch11.2example final.html)
11.3 按钮群组
11.3.1 说明
通过群组的方式将 标签放置于同一行中，以产生如同单选（radio）或复选（checkbox）效果的操作，如图11-10所示。

图11-10 按钮群组的效果 (ch11.3example.html)
在按钮群组的工具提示与弹出窗口中需要特别设置（参阅第 12.3 或 12.4节的内容）。
当在 .btn-group 中的元素使用工具提示（Tooltips） 或弹出提示（popovers）时必须指定 container: 'body' 选项，以避免不必要的副作用（例如，工具提示或弹出窗口被触发时会让元素变宽和（或）失去圆角效果）。
11.3.2 使用方法
在*外层的 标签中加入 .btn-group 类来包覆其他需要群组的 标签即可。在群组的效果部分，*左边与*右边的按钮会以圆角样式来呈现，如图11-11所示。

图11-11 按钮群组的使用方法
11.3.3 其他辅助项目
可搭配使用的类如表11-2所示，各个范例的执行结果如图11-12~图11-16所示。
表11-2 按钮群组辅助类
类 名称 说明
btn-toolbar 按钮工具栏 在 < div class="btn-toolbar" > 内包含多组< div class="btn-group" > 内容
.btn-group-* 大小 为群组内每个button运用大小作用类的替代做法，只需要在.btn- group加入.btn-group-*类，尺寸为lg、md、sm、xs四种
（续表）
类 名称 说明
嵌套 在一个按钮组内嵌套另一个按钮组，即在一个 .btn-group 内嵌套另一个 .btn-group
.btn-group-vertical 垂直变化 让群组按钮以垂直堆叠方式呈现而不是水平方式
. btn-group-justi?ed 水平变化 让群组按钮延伸为相同大小（平均分配）以填满父元素的宽度


图11-12 按钮工具栏 (ch11.3utton toolbar.html)

图11-13 大小 (ch11.3sizing.html)

图11-14 嵌套 (ch11.3 esting.html)

图11-15 垂直变化 (ch11.3vertical variation.html)

图11-16 水平变化 (ch11.3Justified button groups.html)
11.3.4 范例
此范例使用了工具栏、嵌套、水平变化3种类，范例的执行结果如图11-17所示。
? 范例：按钮群组的制作 (ch11.3example final.html)

















图11-17 按钮群组的制作 (ch11.3example final.html)
11.4 输入框群组
11.4.1 说明
在输入框（input）群组的使用当中，可在 标签之前、之后加入其他元素，让用户在通过输入框进行相关操作时可更直觉与便利。添加的元素可为美元符号、@符号、按钮等。输入框的效果范例如图11-18所示。

图11-18 输入框的效果 (ch11.4example.html)
11.4.2 使用方法
为 .input-group 加入 .input-group-addon 类，可以让 .form-control 的前面或后面额外加入其他元素。建立的步骤如下：
在*外层的 标签中加入 .input-group 类。
建立 标签，并加入 .input-group-addon 类与内容，并将 标签放置在 标签的前面或后面，如图11-19所示。

图11-19 建立输入框的方法
11.4.3 其他辅助项目
可搭配使用的类与其他效果，如表11-3所示，4个辅助项对应的范例如图11-20~图11-23所示。
表11-3 输入框群组辅助类
类 / 效果 名称 说明
.input-group-* 大小 为 .input-group 加入对应的大小类，包含的元素会自动重设大小，尺寸为 lg、md、sm、xs 四种
type="radio"、type="checkbox" 单选与复选 添加单选（radio）或复选（checkbox）选项到 群组，以替换文字
包覆按钮内容 使用 .input-group-btn 替代 .input-group-addon 来包覆 button 内容
下拉式菜单 在输入框群组中添加带有下拉式菜单的按钮，只需要简单地在一个 .input-group-btn 类中包裹按钮和下拉式菜单即可。建立的方式请参阅第11.2节

图11-20 大小 (ch11.4sizing.html)

图11-21 附加checkbox 和 radio 元素 (ch11.4checkboxes and radio addons.html)

图11-22 前后包覆按钮 (ch11.4utton addons.html)

图11-23 下拉式菜单 (ch11.4dropdown.html)
11.4.4 范例
此范例结合了按钮与下拉式菜单两种项目，同时让单边可呈现多个按钮，且加入粗体与斜体两种图标类（图标类请参阅第11.1节）。范例的执行结果如图11-24所示。
? 范例：多个按钮与图标的运用 (ch11.4example final.html)








下拉式菜单













图11-24 多个按钮与图标的运用范例 (ch11.4example final.html)
11.5 导 航
11.5.1 说明
导航（见图11-25）在Bootstrap中可共享相同的标签（.nav 类）样式。此方式需搭配 JavaScript 的页签功能，使其呈现切换的效果，页签功能请参阅第 12 章。

图11-25 导航效果 (ch11.5example.html)
11.5.2 使用方法
导航是一个无项目符号的效果，因此必须使用 与 标签的关系来建立内容。建立的步骤如下（参考图11-26）：
在*外层的 标签中加入 .nav 类。
在 .nav 类之后加入 .nav-tabs 类。

图11-26 导航的使用方法 (ch11.5example.html)
11.5.3 其他辅助项目
可搭配使用的类如表11-4的示，各个辅助项目的范例如图11-27~图11-30所示。
表11-4 导航辅助类
类 名称 说明
.nav-pills 按钮样式 使用 .nav-pills 替换 .nav-tabs
.nav-stacked 垂直堆叠 .nav-stacked 类需加在 .nav-tabs 或 .nav-pills 之后
.nav-justi?ed 等宽样式 在大于 768px 的屏幕上，通过加入 .nav-justi?ed 很容易让页签或按钮样式以等宽的样式来呈现。另外，在小屏幕上，导航链接会以堆叠方式呈现
.disabled 禁用链接 对于任何导航组件（ 页签或按钮样式）都可以加入 .disabled 类，以呈现灰色链接和无鼠标滑入的效果


图11-27 按钮样式 (ch11.5pills.html)

图11-28 垂直堆叠 (ch11.5stacked.html)

图11-29 等宽样式 (ch11.5justified.html)

图11-30 禁用链接 (ch11.5disabled links.html)
11.5.4 范例
此范例与下拉式菜单功能进行整合（制作下拉式菜单的方式可参阅第 11.2节的内容），执行结果如图11-31所示。

图11-31 导航加下拉式菜单制作 (ch11.5example final.html)
? 范例：导航加下拉式菜单的制作 (ch11.5example final.html)
















11.6 导 航 栏
11.6.1 说明
导航栏可用于应用程序或网站导航标题的响应式基础组件。它们在移动设备的可视区域是以折叠方式呈现的（可切换开关），在可视区域的宽度渐渐增加时（大于移动设备的判断点时）会转为以水平布局方式呈现。范例的执行结果如图11-32所示。

图11-32 导航栏说明 (ch11.6example.html)
11.6.2 使用方法
建立导航栏的步骤如下，范例如图11-33所示。
在*外层的 标签中按序加入 .navbar 与 .navbar-default 两个类。
在第二层 标签中加入 .navbar-header 类，且此 标签内的内容必须带有 .navbar-brand 类的




















Submit



















图11-39 导航栏的示范 (ch11.6example final.html)
11.7 分 页
11.7.1 说明
此效果是一种无顺序符号，可为网站的应用程序提供分页链接的多分页组件，提供简单的换页功能。
11.7.2 使用方法
因为此效果属于无顺序符号，所以必须使用 与 两个标签建立出顺序的效果。分页效果的显示只需在 标签中加入 .pagination 类即可。分页的范例效果如图11-40所示。

图11-40 分页效果 (ch11.7example.html)
11.7.3 其他辅助项目
可搭配使用的类如表11-6所示，各个范例如图11-41~图11-44所示。
表11-6 分页辅助类
类 名称 说明
.disabled 禁用 指定为不能单击的链接
.active 启用 标示为当前的页面
.pagination-* 大小 尺寸为 lg、md、sm、xs 四种
.pager 换页 默认的状态下，换页链接会居中对齐，且不必使用 .previous与.next两个类
.previous 上一页 标签中需加入 pager 类才可顺利呈现效果
.next 下一页 标签中需加入 pager 类才可顺利呈现效果

图11-41 禁用与启用 (ch11.7disabled.html)

图11-42 大小 (ch11.7sizing pagination.html)

图11-43 换页 (ch11.7pager.html)

图11-44 对齐链接 (ch11.7pager aligned links.html)
11.7.4 范例
此范例以*常见的分页方式作为介绍，执行结果如图11-45所示。
? 范例：分页的制作 (ch11.7example final.html)
















图11-45 分页制作的示范 (ch11.7example final.html)
11.8 提示标志
11.8.1 说明
加入 < span class="badge" > 元素到链接、导航或其他元素，可呈现出醒目的“新”或“未读”信息的提示效果，如图11-46 所示。

图11-46 提示标志效果 (ch11.8example.html)
11.8.2 范例
? 范例：提示标志的制作 (ch11.8example final.html，见图11-47)






图11-47 提示标志制作的示范 (ch11.8example final.html)
11.9 大屏幕效果
11.9.1 说明
此效果能使元素延展至整个浏览器的可视区域，以展示网站的关键内容。这个组件本身已具有响应式的效果。范例的执行结果如图11-48所示。

图11-48 大屏幕的效果 (ch11.9example.html)
11.9.2 范例
在 标签中加入 .jumbotron 类，且搭配 .container 类可使内容显示的区域不是整个浏览器宽度。范例的执行结果如图11-49所示。
? 范例：大屏幕效果的制作 (ch11.9example final.html)


Hello, world!

这是一个超大屏幕（Jumbotron）的范例

图11-49 大屏幕效果制作的示范 (ch11.9example final.html)
11.10 缩 略 图
11.10.1 说明
在网页设计中，多数都需要在网格中布局图像、视频、文字等内容。通过thumbnail 类，只需用*少的标签就可以展示出带有链接的图片，如图11-50所示。

图11-50 缩略图的效果 (ch11.10example.html)
11.10.2 使用方法
使用 Bootstrap 创建缩略图的步骤如下（参考范例，如图11-51所示）：
在

缩略图标签

123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。

图11-52 缩略图制作的示范 (ch11.10example final.html)
11.11 进 度 条
11.11.1 说明
通过这些简单又具有弹性的进度条，为工作流程或活动进度提供了*新的反馈信息，进度条的效果如图11-53所示。

图11-53 进度条效果 (ch11.11example.html)

Bootstrap 进度条使用 CSS3 过渡和动画来获得这种效果。IE 9以及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 则不支持进度条动画这个效果。
11.11.2 使用方法
创建一个基本的进度条步骤如下（见图11-54）：
在*外层的 标签中加入 .progress 类。
在第二层的 标签中加入 .progress-bar 类。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 属性表示进度条在 60% 的位置。

图11-54 创建进度条的步骤
11.11.3 其他辅助项目
可搭配使用的类如表11-7所示，各个辅助项目的范例如图11-55~图11-58所示。
表11-7 进度条辅助项目
类 名称 说明
progress-bar-primary、progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger 显示状态 进度条使用与按钮类和警告类一致的场景颜色样式
progress-bar-striped 条纹样式 此类需加在 progress-bar 类之后
active 动画样式 将.active加入.progress-bar-striped类，以呈现从右向左的条纹动画效果
堆叠样式 将多个进度条（.progress-bar）放置于同一个.progress容器内

图11-55 显示状态 (ch11.11contextual alternatives.html)

图11-56 条纹样式 (ch11.11striped.html)

图11-57 动画样式 (ch11.11animated.html)

图11-58 堆叠样式 (ch11.11stacked.html)
11.11.4 范例
此范例在每条进度条中加入对应的数值并显示出来，该范例的执行结果如图11-59所示。
? 范例：进度条的制作 (ch11.11example final.html)

35%


20%

10%



图11-59 进度条制作的示范 (ch11.11example final.html)
11.12 面 板
11.12.1 说明
建立一个面板，并将需要放置的内容放置在此面板中，以显示出一个区块的效果，如图11-60所示。

图11-60 面板效果 (ch11.12example.html)
11.12.2 使用方法
创建面板只需在 标签中按序加入 .panel 和 .panel-default 这两个类即可，范例及其执行结果如图11-61所示。

图11-61 创建面板的方法
11.12.3 其他辅助项目
可搭配使用的类如表11-8所示，各个辅助项目的范例如图11-62~图11-64所示。
表11-8 面板辅助项目
类 名称 说明
.panel-heading 标题 加入标题类到面板之中，在视觉显示上更为突显主题
.panel-footer 页脚 将按钮或次要文字放置在 .panel-footer 内。面板页脚不会从状态类继承颜色或边框的设置，因为它们并不是主要的内容
panel-primary、panel-success、panel-info、panel-warning、panel-danger 显示状态 与其他组件一样，只需要为面板加入状态类，很容易让面板在特定场景下更有意义

图11-62 标题 (ch11.12panel with heading.html)

图11-63 页脚 (ch11.12panel with footer.html)

图11-64 显示状态 (ch11.12contextual alternatives.html)
11.12.4 范例
本范例采用了标题与显示状态两个类，并加入表格内容进行显示，如图11-65所示。
? 范例：面板的制作 (ch11.12example final.html)


123LearnGo


我们是一个热爱程序设计、游戏以及视觉设计的小团队


AndroidGameSalad
教学 A教学 A
教学 B教学 B



图11-65 面板制作的示范 (ch11.12example final.html)
11.13 响应式嵌入内容
11.13.1 说明
在网页设计中，有时会嵌入外部的视频或相关页面，但嵌入的内容并无法应对响应式网页的缩放而实时进行调整，只会以固定的大小显示出来。
因此，此响应式的嵌入内容可直接运用于 < iframe >、< embed > 和 < object > 元素上，当想要符合某些属性的样式时，可以选择使用明确的类 .embed-responsive-item。
11.13.2 范例
本范例按步骤引导各位读者制作响应式嵌入内容。
? 完整范例：范例文件ch11ch11.13example.html
复制视频嵌入的全部程序代码，如图11-66所示。

图11-66 复制视频嵌入的全部程序代码
将语句粘贴到 标签中。
将程序代码中的“宽”与“高”部分删除，如图11-67所示。

图11-67 粘贴程序代码并删除代码中的“宽”与“高”部分
添加一个 标签并加入 embed-responsive 类，其后再加入embed-responsive embed-responsive-16by9 类即可完成，如图11-68所示。

图11-68 添加一个 标签并加入 embed-responsive 类

前言/序言

前 言
2012年之后，在各大企业和公司都会听到一个名词RWD（Responsive Web Design），即被称作“响应式网页设计”的名词。就网页发展史而言，无论在美感或技术等层面上，它一直都在不断地演进与更新，因此对于从事网页设计的人而言，必须不断进步以强化自身的实力，进而设计出更好的网页来呈现在众人面前。

随着科技的演进，造就了移动设备的普及，使浏览网页的设备不再仅限于计算机。演变至今，移动设备在尺寸上的不一致使得网页在视觉呈现上所要顾虑的因素越来越多，为了使浏览者在移动设备上能获得*佳阅读体验，因而诞生了“响应式网页设计”的概念。

预计在今后几年，响应式网页（Web或网站）设计仍会继续巩固其地位。在这个不断创新的时代，使用响应式网页设计技术而制作的网页已跃升为现代与未来重要的营销媒介。本书收录了完整的设计范例和基础的示范教学，以引导网页工程师在Bootstrap网页框架的辅助下快速进入响应式网页设计领域。

同时，对于从事网页平面设计的人员而言，也可从书中了解到什么是响应式网页，以及学习响应式网页设计与传统网页设计之间的差异等知识，使得设计出来的网页版式能符合工程师的需求。借此希望每位读者可以通过此书成为一个与时俱进、具有充实技术能力、深得客户和老板欢心的设计师。


吕国泰 曾伟凯 何升隆

响应式网页设计：Bootstrap开发速成 前言 互联网时代，用户体验至关重要。网站的呈现方式是否能适应不同屏幕尺寸的设备，直接影响着用户是否愿意停留、是否能高效获取信息。想象一下，你精心设计的网站在手机上变成一团糟，文字扭曲，图片错位，按钮难以点击，这无疑是对用户体验的巨大打击。而响应式网页设计，正是解决这一痛点的关键技术。它能够让你的网页像一位训练有素的侍者，根据访客使用的设备——无论是宽屏的台式电脑、便携的笔记本，还是小巧的智能手机、平板电脑——自动调整布局、尺寸和内容，提供最佳的浏览体验。 在众多响应式网页设计框架中，Bootstrap以其强大的功能、简洁的代码和易于上手的特性，成为了无数开发者和企业的首选。它不仅仅是一个CSS框架，更是一个集成了JavaScript插件、UI组件和预设样式的完整生态系统，能够极大地提高开发效率，让你快速构建出既美观又实用的响应式网站。 本书《响应式网页设计：Bootstrap开发速成》正是为了帮助您快速掌握Bootstrap，驾驭响应式网页设计的潮流而编写。我们深知，对于许多开发者来说，时间是宝贵的。您可能需要快速上手，高效完成项目，而不是沉浸在繁琐的概念和冗长的教程中。《响应式网页设计：Bootstrap开发速成》的目标就是为您提供一条直达掌握Bootstrap核心技能的捷径。 我们将从最基础的概念出发，逐步深入到Bootstrap的各项核心功能。您将学习如何利用Bootstrap强大的栅格系统来构建灵活、可扩展的网页布局，无论是在桌面端还是移动端，都能呈现出令人惊艳的效果。我们将详细讲解Bootstrap提供的丰富UI组件，从导航栏、按钮、表单到卡片、模态框等，让您的网页在功能和视觉上都达到专业水准。更重要的是，本书将聚焦于Bootstrap在响应式设计方面的核心优势，教您如何利用其预设的响应式类和工具，轻松实现网页在不同设备间的无缝切换和完美适配。 本书的编写，旨在将复杂的技术转化为易于理解和实践的操作。我们摒弃了冗余的理论，专注于实际应用。您将通过大量的代码示例和实际案例，亲身体验Bootstrap的强大之处，并在动手实践中巩固所学知识。无论您是初次接触响应式设计的新手，还是希望快速掌握Bootstrap以提升开发效率的资深开发者，本书都将是您不可多得的宝贵资源。 准备好了吗？让我们一起踏上这段快速掌握Bootstrap、打造卓越响应式网页的旅程吧！ 第一章：响应式网页设计概览与Bootstrap入门 在数字信息爆炸的时代，网站的可用性已经成为衡量其成功与否的关键指标之一。用户不再局限于使用台式电脑访问网站，智能手机和平板电脑的普及，使得多设备浏览成为了常态。在这种背景下，响应式网页设计应运而生，它提供了一种优雅的解决方案，让网站能够智能地适应各种屏幕尺寸，为用户提供一致且优化的浏览体验。 1.1 什么是响应式网页设计？ 响应式网页设计（Responsive Web Design, RWD）是一种利用HTML、CSS和JavaScript技术，创建能够根据用户设备屏幕尺寸、分辨率和方向自动调整页面布局、字体大小、图片大小及其他元素显示方式的网站设计方法。其核心思想是“一网多用”，即用一套代码，在不同的设备上都能呈现出最佳的效果，避免了为不同设备单独开发不同版本网站的繁琐。 响应式设计的几个关键技术点包括： 流体网格布局（Fluid Grids）： 使用百分比单位代替固定像素单位来定义元素的宽度，使布局能够随着屏幕大小的变化而伸缩。 弹性图片（Flexible Images）： 通过CSS设置图片的`max-width: 100%;`，确保图片不会超出其容器的边界，实现自适应缩放。 媒体查询（Media Queries）： CSS3的一项强大功能，允许开发者根据设备的特定属性（如屏幕宽度、分辨率、方向等）应用不同的CSS样式。这是实现响应式布局的基石，可以定义在特定屏幕尺寸范围内应用的样式规则。 1.2 为什么要学习响应式网页设计？ 提升用户体验： 响应式网站能够为用户提供无缝的跨设备浏览体验，无论用户使用何种设备，都能轻松阅读内容、浏览图片、进行交互，从而提高用户满意度和参与度。 搜索引擎优化（SEO）： 搜索引擎（如Google）倾向于为移动友好型网站提供更好的排名。一个响应式网站只有一个URL，这比拥有单独的移动版本（如m.example.com）在SEO方面更有优势，更容易获得搜索引擎的青睐。 降低开发和维护成本： 只需维护一套代码，即可覆盖所有设备，大大节省了开发时间和维护成本。避免了为桌面版和移动版分别开发和维护不同网站的麻烦。 适应未来设备： 随着新设备的不断涌现，响应式设计能够更好地适应未来可能出现的各种屏幕尺寸和分辨率，具有更好的前瞻性。 提高转化率： 良好的用户体验通常意味着更高的转化率。当用户能够轻松地在您的网站上找到所需信息或完成目标操作时，他们更有可能进行购买、注册或联系。 1.3 Bootstrap简介 Bootstrap，原名Twitter Bootstrap，是由Twitter团队开发的一个开源的前端Web开发框架。它是一个包含了HTML、CSS和JavaScript的工具集，用于快速开发响应式、移动优先的网站。Bootstrap提供了大量预先设计好的UI组件、栅格系统、JavaScript插件和实用工具类，极大地简化了前端开发的流程，让开发者能够专注于内容和功能实现，而不是从零开始构建基础样式和交互。 Bootstrap的核心优势： 响应式设计： Bootstrap天生为响应式设计而生。其强大的栅格系统和预设的响应式类，使创建适应不同屏幕的布局变得异常简单。 移动优先（Mobile First）： Bootstrap鼓励开发者从移动设备的视角出发进行设计，先为小屏幕构建基础样式，然后逐步为大屏幕添加更丰富的样式和功能。这种方式有助于构建更高效、更流畅的移动体验。 丰富的组件： 提供了大量可复用的UI组件，如导航栏、按钮、表单、模态框、轮播图、卡片等，开箱即用，大大提高了开发效率。 易于定制： 虽然提供了大量预设样式，但Bootstrap也允许开发者进行高度定制，可以轻松修改颜色、字体、间距等，以满足项目的个性化需求。 强大的社区支持： 作为一个流行的开源项目，Bootstrap拥有庞大的开发者社区，这意味着丰富的文档、教程、插件和解决问题的资源。 跨浏览器兼容性： Bootstrap经过广泛测试，能够良好地兼容主流的现代浏览器。 1.4 Bootstrap的安装与基本结构 在使用Bootstrap之前，您需要将其集成到您的项目中。Bootstrap提供了两种主要的引入方式： 1.4.1 通过CDN引入（推荐用于快速开始或小型项目） 这是最简单快捷的引入方式，您无需下载任何文件，只需在HTML文件的``部分添加Bootstrap的CSS和JavaScript的CDN链接即可。 ```html ``` 关键点解释： ``：这是响应式设计的关键之一。`width=device-width`告诉浏览器页面宽度与设备屏幕宽度相同，`initial-scale=1.0`设置初始缩放比例为1，确保页面在移动设备上以1:1的比例显示。 `Bootstrap CSS`：引入Bootstrap的CSS文件，它包含了所有的样式规则。 `Bootstrap JavaScript Bundle with Popper`：引入Bootstrap的JavaScript包。这个包包含了大部分Bootstrap组件所需的JavaScript插件，并且还包含了Popper.js，用于处理下拉菜单、工具提示等弹出式组件的定位。注意： 务必将JavaScript放在HTML文档的末尾，``标签之前，以确保页面元素在JavaScript执行前已经加载完毕。 1.4.2 下载Bootstrap文件并本地引入 如果您需要更精细的控制，或者在没有网络连接的环境下进行开发，可以下载Bootstrap的源文件，然后将其引入到您的项目中。 1. 访问Bootstrap官方网站（getbootstrap.com）下载最新版本的Bootstrap。 2. 解压下载的文件，您会看到`css`、`js`和`fonts`（或`img`）等文件夹。 3. 将这些文件放置在您的项目目录中，例如： ``` my-project/ ├── index.html ├── css/ │ └── bootstrap.min.css ├── js/ │ └── bootstrap.bundle.min.js └── img/ └── ... ``` 4. 在HTML文件的``部分引入本地的CSS文件，在``之前引入JavaScript文件： ```html ``` 1.5 你的第一个Bootstrap页面 现在，让我们创建一个简单的页面，看看Bootstrap是如何工作的。 ```html ``` 这段代码的亮点： `.container`：Bootstrap提供的一个用于居中内容并设置最大宽度的容器类。这是构建响应式布局的基础。 `.mt-4`, `.mb-4`, `.mt-5`：这是Bootstrap的间距工具类。`m`代表margin（外边距），`t`代表top（顶部），`b`代表bottom（底部），数字`4`和`5`代表不同的间距层级（从0到5，数字越大间距越大）。 `.text-center`：将文本居中对齐。 `.lead`：用于突出显示段落的类，通常用于页面的主要介绍性文字。 `.row`：Bootstrap栅格系统的核心。它表示一行，可以包含多个列。 `.col-md-6`：这是Bootstrap栅格系统的列类。`col`表示列，`md`表示中等屏幕（medium-sized devices and up），`6`表示该列将占据父容器（.row）12个网格单位中的6个。这意味着在屏幕宽度等于或大于中等屏幕时，此列将占据一半宽度。当屏幕宽度小于中等屏幕时，这个列将自动堆叠。 `.card`：Bootstrap提供的卡片组件，用于展示内容块。 `.card-img-top`：将图片放置在卡片顶部。 `.card-body`：卡片的正文区域。 `.card-title`：卡片标题样式。 `.card-text`：卡片文本样式。 `.btn`, `.btn-primary`, `.btn-success`：Bootstrap提供的按钮样式。`.btn`是基础按钮样式，`.btn-primary`和`.btn-success`是不同颜色的主题样式。 `.form-label`, `.form-control`, `.form-text`：Bootstrap提供的表单元素的样式类，使表单看起来更加整洁和专业。 `.mb-3`：为表单元素添加底部外边距。 在浏览器中打开这个HTML文件，您会看到一个带有居中标题、介绍性文字、一张卡片和一个简单表单的页面。尝试调整浏览器窗口的大小，您会发现卡片和表单会随着窗口大小的变化而变化，当窗口变小到一定程度时，它们会堆叠起来，这就是响应式设计的初步体现。 小结： 本章我们理解了响应式网页设计的必要性和核心概念，并对Bootstrap这一强大的前端框架进行了初步的介绍。通过CDN和本地引入两种方式，我们学会了如何将Bootstrap集成到项目中，并通过一个简单的示例页面，初步体验了Bootstrap的布局和组件功能。接下来的章节，我们将深入探索Bootstrap的栅格系统、排版、表单、组件和实用工具，一步步掌握构建专业响应式网页的技能。 第二章：Bootstrap栅格系统：构建灵活的响应式布局 响应式网页设计的基石在于灵活的布局，能够根据屏幕尺寸的变化自动调整内容区域的宽度和排列方式。Bootstrap强大的栅格系统（Grid System）正是为解决这一问题而生。它提供了一套预定义的网格结构，让开发者能够轻松地创建复杂的、响应式的页面布局。 2.1 栅格系统的概念 Bootstrap的栅格系统基于12列的网格模型。这意味着每一行（row）可以被划分为12个等宽的列（column）。您可以通过组合这些列来创建不同宽度的内容区域。Bootstrap还定义了几个断点（breakpoints），用于在不同屏幕尺寸上应用不同的布局。 核心组成部分： 容器（Container）： 页面布局的根基。Bootstrap提供了两种容器： `.container`：一个固定宽度（在不同屏幕尺寸下有不同最大宽度）的响应式容器，用于居中内容。 `.container-fluid`：一个全宽度的容器，它会延伸到整个视口的宽度。 行（Row）： 用于包裹列的容器。一行（`.row`）中的所有列的总宽度加起来不能超过12列。行还具有负外边距，用于抵消列的左右内边距，从而实现整洁的布局。 列（Column）： 实际放置内容的区域。列的类名遵循 `col-[size]-[number]` 的格式。 2.2 栅格系统的断点（Breakpoints） Bootstrap定义了几个用于响应式设计的断点，分别对应不同的设备屏幕尺寸。这些断点可以用来控制元素的显示和布局。 | 断点名称 | 屏幕尺寸（最小宽度） | 对应的CSS类前缀 | 描述 | | :----------- | :----------------- | :------------- | :----------------------- | | Extra extra small (xs) | < 576px | `col-` | 手机（通常所有设备都适用） | | Small (sm) | ≥ 576px | `col-sm-` | 平板电脑（纵向） | | Medium (md) | ≥ 768px | `col-md-` | 平板电脑（横向）/小笔记本 | | Large (lg) | ≥ 992px | `col-lg-` | 笔记本/桌面电脑 | | Extra large (xl) | ≥ 1200px | `col-xl-` | 大屏幕桌面电脑 | | Extra extra large (xxl) | ≥ 1400px | `col-xxl-` | 超大屏幕桌面电脑 | 2.3 使用栅格系统创建布局 2.3.1 基本的行和列 ```html ``` 在这个例子中，我们在一个`.container`中创建了一个`.row`，然后在其中放置了三个`.col`。由于没有指定具体的列宽，Bootstrap会自动将这三个列平均分配到12个网格单位中，每个列占据4个单位。在任何屏幕尺寸下，这三列都会并排显示。 2.3.2 指定列宽 使用 `col-[size]-[number]` 的格式来指定列的宽度。 `col-6`: 在任何屏幕尺寸下，占据6个网格单位（即一半宽度）。 `col-md-4`: 在中等屏幕（≥768px）及以上，占据4个网格单位。在小于中等屏幕时，它将独占一行。 `col-lg-3 col-md-6 col-sm-12`: 在超大屏幕 (lg) 及以上，占据3个网格单位。 在中等屏幕 (md) 及以上，占据6个网格单位。 在小屏幕 (sm) 及以上，占据12个网格单位（独占一行）。 在 Extra small (xs) 屏幕，也会自动占据12个单位。 示例：响应式布局 ```html ``` 2.3.3 自动布局的列 如果一行中的所有列都未指定宽度，Bootstrap会自动计算并平均分配宽度。 ```html ``` 在这个例子中，`col-md-3` 会在中等屏幕及以上占据3个网格单位。剩下的9个网格单位将由前后两个`.col`自动平均分配，每个占据4.5个单位。 2.3.4 列的顺序（Order） Bootstrap允许您使用类来改变列的视觉顺序，而不改变HTML的结构，这对于响应式设计非常有用。 `order-first`: 将该列显示在前面。 `order-last`: 将该列显示在后面。 `order-[size]-[number]`: 在指定的屏幕尺寸及以上，调整列的顺序。数字越大，显示越靠后。 ```html ``` 2.3.5 列的偏移（Offset） 如果您想在列之间创建空白区域，可以使用列的偏移类。 `offset-[size]-[number]`: 在指定的屏幕尺寸及以上，在列的左侧添加指定数量的网格单位的空白。 ```html ``` 2.3.6 列的嵌套（Nesting） 您可以在列内部嵌套另一个`.row`，以创建更复杂的布局结构。 ```html ``` 2.3.7 响应式列的通用类 除了上面提到的 `col-[size]-[number]` 之外，Bootstrap还提供了一些更通用的响应式类： `col-xs-12` (等同于 `col-12`): 在所有屏幕尺寸下都占据12列。 `col-sm-6`: 在小屏幕 (sm) 及以上，占据6列。 `col-md-4`: 在中等屏幕 (md) 及以上，占据4列。 `col-lg-3`: 在大屏幕 (lg) 及以上，占据3列。 `col-xl-2`: 在超大屏幕 (xl) 及以上，占据2列。 示例：一个典型的三栏布局 ```html ``` 2.4 常用栅格工具类 除了直接使用类名控制布局，Bootstrap还提供了一些实用的栅格工具类，可以帮助您快速调整元素的显示和对齐。 显示/隐藏元素（Display Utilities）： `.d-none`: 隐藏元素。 `.d-[size]-none`: 在指定屏幕尺寸（xs, sm, md, lg, xl, xxl）及以上隐藏元素。 `.d-[size]-block`, `.d-[size]-inline`, `.d-[size]-inline-block`, `.d-[size]-flex`, `.d-[size]-inline-flex`: 在指定屏幕尺寸及以上，以特定的显示方式显示元素。 `.d-flex`: 以 Flexbox 方式显示元素。 `.d-inline-flex`: 以内联 Flexbox 方式显示元素。 对齐和间距（Alignment and Spacing）： `.align-items-start`, `.align-items-center`, `.align-items-end`: 在 Flex 容器中垂直对齐项目。 `.justify-content-start`, `.justify-content-center`, `.justify-content-end`, `.justify-content-between`, `.justify-content-around`: 在 Flex 容器中水平对齐项目。 `.text-start`, `.text-center`, `.text-end`: 文本对齐。 前面已介绍的间距工具类 `.m-` 和 `.p-` (margin/padding, top/bottom/start/end/x/y, size)。 示例：使用显示工具类 ```html ``` 小结： Bootstrap的栅格系统是创建响应式布局的强大工具。通过理解容器、行和列的概念，以及掌握不同断点和列的类名，您可以轻松地构建出在各种设备上都能良好展示的网页结构。灵活运用列的宽度、偏移、顺序以及栅格工具类，能够帮助您实现更复杂、更精细化的页面设计。在下一章，我们将继续探索Bootstrap如何帮助我们美化文本和创建高质量的排版。

评分☆☆☆☆☆

最近刚读完《响应式网页设计：Bootstrap开发速成》，不得不说，这本书的实用性真的超乎我的预期。作为一名在工作中经常需要处理网页布局问题的开发者，我一直希望能找到一种高效的方式来应对日益增长的移动端访问需求。 这本书的亮点在于它抓住了“痛点”，并给出了“利器”。它没有过多地纠缠于理论的深度，而是直接将Bootstrap这个强大的响应式前端框架摆在了我们面前。通过这本书，我才真正理解了Bootstrap是如何通过其预设的类名和组件，极大地简化了响应式网页的开发流程。 书中的内容组织得非常有条理。从最基础的Bootstrap网格系统讲解，到各种常用组件（如按钮、表单、导航条、卡片、模态框等）的使用，再到一些进阶的排版和辅助类，都进行了详尽的阐述。最难得的是，作者在讲解每一个知识点时，都会配以清晰的代码示例，并且对代码的含义和作用进行深入浅出的解释。我能够很容易地跟着书中的例子，在自己的电脑上进行实践，并且快速看到效果。 让我印象深刻的是，书中对于如何利用Bootstrap来实现“自适应”效果的讲解。它不仅仅是告诉你怎么用，而是告诉你为什么这么用。例如，如何利用不同的栅格类来控制元素在不同屏幕尺寸下的显示和隐藏，如何让图片根据容器的大小进行缩放，如何设计出在手机上堆叠显示，在桌面端并列显示的布局。这些都是实际开发中经常遇到的问题，而这本书都给出了非常实用的解决方案。 这本书的“速成”二字并非虚言。在我看来，它更像是一本“武功秘籍”，直接传授了最核心、最关键的招式。如果你和我一样，想要在短时间内掌握响应式网页设计的核心技术，并且能够快速地利用Bootstrap构建出美观、实用的网页，那么这本书绝对是值得你入手的一本宝典。它不仅节省了我的学习时间，更重要的是，它直接提升了我的工作效率。

评分☆☆☆☆☆

这本《响应式网页设计：Bootstrap开发速成》简直是我近期最惊喜的发现！作为一名初涉前端开发的学习者，我一直对响应式设计这个概念感到既好奇又有点畏惧，总觉得需要掌握很多复杂的理论和技术。然而，这本书的出现彻底打消了我的疑虑。 它没有一开始就抛出那些令人望而生畏的代码片段，而是用非常生动且易于理解的语言，一步步地引导我理解响应式设计的核心思想——如何让网站在不同尺寸的屏幕上都能展现出最佳的视觉效果和用户体验。书中的例子都是非常贴近实际开发场景的，比如如何根据屏幕宽度调整导航栏的显示方式，如何让图片自动适应容器大小，以及如何设计出在手机、平板和桌面电脑上都能流畅浏览的布局。 最让我印象深刻的是，它深入浅出地讲解了Bootstrap这个强大的前端框架。我之前听过Bootstrap的名字，也知道它能大大提高开发效率，但一直没有找到一个好的切入点。这本书就像一位耐心的老师，从最基础的网格系统开始，详细解释了Bootstrap的栅格类是如何工作的，如何使用预设的组件（如按钮、表单、导航条、卡片等）来快速构建美观且功能齐全的界面。我尤其喜欢它对组件的讲解，每一个组件都配有清晰的代码示例和实际效果图，让我能够立刻理解其用法和魅力。 学习过程中，我发现这本书最大的优点在于它的“速成”属性。它并没有冗余的理论铺垫，而是直击核心，让你在最短的时间内掌握最实用的技术。我尝试着按照书中的步骤，自己动手实践，很快就构建出了第一个简单的响应式网页。这种即时反馈和成就感，极大地增强了我学习前端开发的信心。而且，书中的讲解清晰明了，即使是对于不太熟悉HTML和CSS的新手，也能轻松上手。我强烈推荐给所有想要快速掌握响应式网页设计和Bootstrap开发的读者，相信你也会像我一样，感受到它带来的高效和便捷。

评分☆☆☆☆☆

《响应式网页设计：Bootstrap开发速成》这本书，给我带来的启示简直是“点石成金”。在接触这本书之前，我总是觉得“响应式设计”就像是一个遥不可及的“高阶技能”，需要深厚的前端功底才能驾驭。每次看到别人的网站在不同设备上都能完美适配，我都充满了羡慕，却不知道从何下手。 这本书的出现，彻底改变了我对响应式设计的看法。它就像一把钥匙，直接打开了Bootstrap这个强大工具的大门。作者以一种非常接地气的方式，将原本可能令人望而生畏的框架，变得简单易懂。我最欣赏的是它对Bootstrap网格系统的讲解，作者用非常生动的语言和图例，让我瞬间明白了“容器”、“行”和“列”是如何协同工作的，以及如何通过简单的类名来控制元素的布局和尺寸。 书中的内容安排也极具匠心。它不是一股脑地抛出所有东西，而是循序渐进，从基础的网格系统，到各种常用的UI组件（如导航、表单、卡片、警告框等），再到一些实用的小技巧，都进行了详尽的介绍。每个知识点都配有清晰的代码示例，并且对代码的逻辑进行了深入的剖析，让我不仅知道“怎么做”，更明白“为什么这么做”。 令我印象最深刻的是，这本书的“速成”属性。作者深谙学习者的心理，它没有华而不实的理论，而是将最核心、最实用的开发技巧直接传递给我们。我尝试着按照书中的例子进行实践，很快就构建出了第一个简单的响应式页面。这种即时的反馈和成就感，极大地激发了我继续学习的动力。 总而言之，如果你和我一样，曾经对响应式设计感到困惑，或者想要快速掌握前端开发的重要技能，那么这本书绝对是你不可错过的选择。它不仅仅是一本技术书籍，更像是为你量身打造的一套高效的学习方案，让你在短时间内就能成为一名合格的响应式网页开发者。我非常庆幸能读到这本书，它为我开启了全新的前端设计视野。

评分☆☆☆☆☆

这本书，《响应式网页设计：Bootstrap开发速成》，给我带来的冲击是颠覆性的。在此之前，我对于网页设计，尤其是要在各种设备上都能良好展示的“响应式”概念，一直是模糊不清的。我常常为如何在手机上适配复杂的桌面布局而头疼，要么就是效果惨不忍睹，要么就是耗费大量时间进行重复劳动。 这本书的出现，简直如同黑暗中的一道曙光。它不仅仅是教我如何使用Bootstrap，更是让我从根本上理解了响应式设计的哲学。作者以一种极其巧妙的方式，将那些原本看似复杂的概念，如流体布局、媒体查询，用非常具象的语言和贴合实际需求的案例讲解出来。我能够清晰地看到，Bootstrap的栅格系统是如何通过简单的类名，就能够实现内容在不同屏幕尺寸下的自动重排和伸缩，这种“巧劲”让我惊叹不已。 书中的内容安排也极其合理，循序渐进。它不会一下子就让你面对海量的组件代码，而是从最核心的网格系统入手，让你先建立起响应式布局的骨架。然后，再逐步引入导航、表单、卡片等各种常用组件，并详细说明如何在响应式布局中灵活运用它们。我最喜欢的部分是，每讲解一个组件，都会附带实际的网页截图，让你能够直观地感受到这个组件在不同设备上的实际表现。这对于我这种视觉型学习者来说，简直是福音。 最关键的是，这本书真的做到了“速成”。我原本以为学习一个框架需要花费数周甚至数月的时间，但通过这本书的学习，我发现只需要短短几天，我就能独立完成一个具备基本响应式功能的网页。它省去了我大量摸索的时间，直接将最有效、最实用的开发技巧传递给我。如果你和我一样，渴望快速掌握前端开发的关键技能，让自己的作品在任何屏幕上都能闪耀，那么这本书绝对是你的不二之选。它让我看到了前端开发的无限可能，也让我对未来的学习充满了期待。

评分☆☆☆☆☆

最近入手了《响应式网页设计：Bootstrap开发速成》，这本书给我带来的改变是实实在在的。在没读这本书之前，我对响应式设计一直处于一种“听说过，但不怎么会用”的状态。感觉需要掌握很多繁杂的CSS媒体查询，以及复杂的布局技巧。 这本书让我眼前一亮的地方在于，它直接切入了Bootstrap这个核心。我之前虽然听说过Bootstrap的大名，但总觉得它是一个庞大而复杂的框架，不敢轻易尝试。然而，这本书的讲解方式非常友好，就像一位经验丰富的前辈，循循善诱地将我带入了Bootstrap的世界。 它并没有一开始就罗列大量的代码，而是从最基础的Bootstrap栅格系统入手，用非常形象的比喻和直观的图示，让我理解了“容器”、“行”和“列”是如何工作的。我能够清晰地看到，Bootstrap是如何通过简单的类名，就能实现网页在不同屏幕尺寸下的自动适应。这大大降低了响应式设计的门槛。 接着，书中的内容逐步深入，开始讲解各种Bootstrap的预设组件。从最基础的按钮、表单，到更复杂的导航条、卡片、模态框等等，都进行了详细的介绍。我尤其喜欢它讲解每个组件时，都会附带可以直接复制粘贴的代码示例，并且会解释这些代码是如何构建出预期的效果的。这让我能够立刻上手实践，并在自己的项目中使用这些组件。 最让我感到惊喜的是，这本书的“速成”特质。它没有冗余的理论，而是直击核心，让你在最短的时间内掌握最实用的技术。通过这本书的学习，我感觉自己已经能够独立完成一个具备基本响应式功能的网页了。这对于我来说，是前所未有的成就感。如果你和我一样，想要快速提升网页设计的技能，让自己的作品在各种设备上都能有出色的表现，那么这本书绝对是你的不二之选。它不仅教会了我技术，更重要的是，它给了我信心。

评分☆☆☆☆☆

内容很不错，价格也合适

评分☆☆☆☆☆

专业必备，技术前沿。

评分☆☆☆☆☆

凑够10个字就有京豆啦&hellip;&hellip;哈哈

评分☆☆☆☆☆

适合学习前端移动开发的看 ，内容比较基础

评分☆☆☆☆☆

写的还行吧，

评分☆☆☆☆☆

认真的研究中

评分☆☆☆☆☆

书内容不知道怎么样

评分☆☆☆☆☆

写的还行吧，

评分☆☆☆☆☆

黑白印刷，一般