《Bootstrap入门经典》代码示例

编辑推荐

全球销量逾百万册的系列图书；连续十余年打造的经典；直观、循序渐进的学习教程；掌握关键知识的适合起点；“Read Less，Do More”（精读多练）的教学理念；以示例引导读者完成常见的任务；每章内容针对初学者精心设计，1小时轻松阅读学习，24小时彻底掌握关键知识；每章案例与练习题助你轻松完成常见任务；通过实践提高应用技能，巩固所学知识。 通过阅读本书，读者将学会使用Bootstrap快速搭建可以响应用户设备、提升用户体验的网站。本书采用直观、循序渐进的方法，演示了安装Bootstrap并快速构建基本网站；使用样式、组件和JavaScript插件对网站进行扩展；使用Bootstrap高级特性创建复杂设计在内的知识。本书每章内容都建立在已学的知识之上，为读者充分发挥Bootstrap的威力打下坚实的基础。循序渐进的示例引导读者完成常见的Bootstrap开发任务。问与答、测验和练习帮助读者检验知识的掌握情况。“注意”、“提示”和“警告”指出捷径和解决方案。学习如何：下载Bootstrap并集成到开发项目中；使用基本的模板快速构建Bootstrap网站；使用Bootstrap内置的网格创建美观的响应式网站布局；使用标签、徽章、面板和Well显示文本；对表格和表单进行样式化处理，增加吸引力、可读性和响应性；使用图像、媒体和图标（包括免费的Glyphicons）；使用Bootstrap的CSS功能添加对齐、颜色和可见性；使用警告、图像轮播和其他JavaScript插件扩展网站；迅速创建吸引人的功能原型；使用CSS、Less和Sass自定义Bootstrap；通过剥离不必要的特性减轻Bootstrap的下载负担；构建具有Web可访问性的网站；创建具有独特外观的复杂设计。

内容简介

Bootstrap是Twitter推出的开源的前端开发工具包，可以帮助用户轻松创建响应式网站，目前在前端开发中具有广泛的应用。《Bootstrap入门经典》是Bootstrap的入门类图书，主要分为4个部分。第1部分为Bootstrap的入门知识，讲解了Bootstrap的安装方法以及使用Bootstrap构建网站的方法；第2部分讲解了使用Bootstrap CSS样式和组件创建网站的方法；第3部分侧重的是使用Bootstrap JavaScript插件为网站增加功能的方法；第4部分涵盖了Bootstrap的自定义方法，介绍了Bootstrap Web开发的高级功能，以及如何创建不同于Bootstrap默认外观的复杂设计。《Bootstrap入门经典》内容系统，讲解简明实用，代码示例利于理解，是前端开发人员入门Bootstrap的绝佳读物，适合所有前端开发人员阅读，有志于了解Bootstrap的读者也可以从中获益。

作者简介

Jenifer Kyrnin从1997年开始进行HTML、XML和Web设计的网上教学。她曾经构建和维护各种规模的网站，从单页面的手册型网站到由数百万个页面组成的数据库驱动型网站，不一而足。她当前的研究重点是使用Bootstrap和WordPress进行响应式设计。

目录

• 第1章 什么是Bootstrap，为什么要使用它1
• 1.1　什么是Web框架　1
• 1.1.1　框架不仅是一个模板　2
• 1.1.2　框架的优缺点　5
• 1.2　什么是Bootstrap　6
• 1.3　Bootstrap与其他框架有何
• 不同　6
• 1.4　为什么应该使用Bootstrap　8
• 1.5　小结　8
• 1.6　讨论　8
• 第2章　下载安装Bootstrap　11
• 2.1　从哪里得到Bootstrap　11
• 2.2　获取Bootstrap的其他
• 途径　13
• 2.2.1　用Less编写的源代码　13
• 2.2.2　Sass　15
• 2.2.3　Bootstrap CDN　16
• 2.3　小结　16
• 2.4　讨论　16
• 第3章　用基本模板构建第一个
• BootStrap网站　20
• 3.1　最小的Bootstrap页面　20
• 3.2　基本Bootstrap模板　21
• 3.3　更多Bootstrap模板示例　25
• 3.3.1　Bootstrap Starter模板　25
• 3.3.2　Bootstrap主题　27
• 3.3.3　Bootstrap Jumbotron　27
• 3.4　小结　28
• 3.5　讨论　28
• 第4章　理解Normalize.CSS和
• Bootstrap　CSS基础知识　31
• 4.1　什么是Normalize.css　31
• 4.1.1　什么是CSS重置　32
• 4.1.2　CSS重置的利弊　32
• 4.1.3　Normalize.css不仅仅是CSS
• 重置　32
• 4.2　理解Bootstrap基础结构　34
• 4.2.1　Bootstrap使用HTML5　34
• 4.2.2　移动优先　34
• 4.2.3　排版和基本链接样式　34
• 4.3　小结　37
• 4.4　讨论　37
• 第5章　网格及其用法　40
• 5.1　设计中的网格　40
• 5.1.1　为什么在Web设计中使用
• 网格　41
• 5.1.2　三分法　42
• 5.1.3　黄金分割率　44
• 5.2　Bootstrap网格系统　45
• 5.3　如何在Bootstrap中创建网格　45
• 5.3.1　创建基本网格　45
• 5.3.2　响应式列重置　49
• 5.3.3　列的偏移、排序和嵌套　50
• 5.4　Bootstrap中的响应式Web
• 布局　51
• 5.5　小结　52
• 5.6　讨论　53
• 第6章　标签、徽章、面板、Well和超大屏幕　56
• 6.1　标签和徽章　56
• 6.1.1　标签　56
• 6.1.2　徽章　59
• 6.2　Well和面板　60
• 6.2.1　Well　60
• 6.2.2　面板　61
• 6.3　超大屏幕　63
• 6.4　小结　64
• 6.5　讨论　65
• 第7章　Bootstrap排版　68
• 7.1　Bootstrap中的基本排版　68
• 7.2　标题　70
• 7.2.1　标题　70
• 7.2.2　页眉　74
• 7.3　正文　75
• 7.3.1　内联文本　76
• 7.3.2　元素对齐　77
• 7.3.3　文本元素转换　78
• 7.4　其他文本块　79
• 7.4.1　代码　79
• 7.4.2　引用语　80
• 7.4.3　列表　80
• 7.4.4　缩略语　81
• 7.4.5　地址　81
• 7.5　小结　81
• 7.6　讨论　83
• 第8章　设置表格样式　86
• 8.1　基本表格　86
• 8.2　Bootstrap表格类　88
• 8.3　包含表格的面板　91
• 8.4　响应式表格　93
• 8.5　小结　94
• 8.6　讨论　94
• 第9章　设置表单样式　97
• 9.1　基本表单　97
• 9.1.1　水平表单　100
• 9.1.2　内联表单　101
• 9.2　Bootstrap支持的表单控件　103
• 9.2.1　基本输入标记　103
• 9.2.2　复选框和单选按钮　104
• 9.2.3　下拉菜单　106
• 9.2.4　设置表单控件的大小　107
• 9.2.5　帮助块　108
• 9.3　输入组　108
• 9.3.1　基本输入组　108
• 9.3.2　设置输入组的大小　109
• 9.3.3　奇妙的附加控件　110
• 9.4　Bootstrap表单的交互性　111
• 9.4.1　焦点状态　111
• 9.4.2　禁用和只读状态　112
• 9.4.3　验证状态　112
• 9.5　小结　113
• 9.6　讨论　114
• 第10章　图像、媒体对象和
• Glyphicons　117
• 10.1　图像　117
• 10.1.1　响应式图像　118
• 10.1.2　图像形状　118
• 10.2　媒体对象　119
• 10.3　缩略图　122
• 10.4　Glyphicon　124
• 10.5　小结　126
• 10.6　讨论　129
• 第11章　按钮和按钮组样式设置及
• 使用　132
• 11.1　基本按钮　132
• 11.1.1　按钮标记　133
• 11.1.2　按钮类和大小　133
• 11.1.3　按钮状态　135
• 11.2　按钮组　136
• 11.2.1　水平按钮组　137
• 11.2.2　垂直按钮组　138
• 11.2.3　按钮工具栏　138
• 11.3　按钮JavaScript　139
• 11.4　小结　139
• 11.5　讨论　140
• 第12章　用Bootstrap创建导航系统　144
• 12.1　标准导航元素　144
• 12.2　下拉菜单　147
• 12.2.1　拆分下拉菜单　148
• 12.2.2　上拉式变种　150
• 12.3　导航栏　151
• 12.3.1　导航栏标题和品牌　153
• 12.3.2　切换导航开关　153
• 12.3.3　导航栏中的链接、文本、按钮
• 和表单　154
• 12.3.4　改变导航栏的颜色和对齐
• 方式　158
• 12.4　面包屑导航和分页　159
• 12.5　列表组　160
• 12.6　小结　163
• 12.7　讨论　164
• 第13章　Bootstrap实用工具　168
• 13.1　助手类　168
• 13.1.1　更改颜色　169
• 13.1.2　图标　170
• 13.1.3　布局类　171
• 13.1.4　显示和隐藏内容　174
• 13.2　响应式实用工具　174
• 13.3　打印类　176
• 13.4　响应式嵌入　176
• 13.5　Bootstrap中的可访问性　177
• 13.6　小结　177
• 13.7　讨论　179
• 第14章　使用Bootstrap JavaScript
• 插件　183
• 14.1　如何使用Bootstrap JavaScript
• 插件　183
• 14.2　设置插件选项　184
• 14.2.1　参数形式的选项　184
• 14.2.2　数据属性形式的选项　185
• 14.3　使用JavaScript API　186
• 14.3.1　事件　187
• 14.3.2　无冲突　187
• 14.3.3　禁用JavaScript　187
• 14.4　小结　188
• 14.5　讨论　188
• 第15章　模态窗口　191
• 15.1　什么是模态窗口　191
• 15.2　如何构建模态窗口　192
• 15.2.1　触发模态窗口　192
• 15.2.2　模态窗口编码　194
• 15.3　修改模态窗口　197
• 15.3.1　更改模态窗口的打开
• 方式　197
• 15.3.2　更改模态窗口的大小　200
• 15.3.3　更改布局　201
• 15.3.4　动态更改模态内容　203
• 15.4　小结　204
• 15.5　讨论　206
• 第16章　附加导航、选项卡和滚动
• 监听　209
• 16.1　附加导航　209
• 16.2　选项卡　212
• 16.3　滚动监听　215
• 16.4　结合使用这些插件　216
• 16.5　小结　217
• 16.6　讨论　219
• 第17章　弹出框和工具提示　222
• 17.1　工具提示　222
• 17.1.1　工具提示选项　228
• 17.1.2　工具提示方法　229
• 17.1.3　工具提示事件　229
• 17.2　弹出框　229
• 17.2.1　弹出框选项　232
• 17.2.2　弹出框方法　233
• 17.2.3　弹出框事件　233
• 17.3　小结　233
• 17.4　讨论　235
• 第18章　过渡、按钮、警告框和
• 进度条　239
• 18.1　过渡　239
• 18.2　按钮　240
• 18.2.1　按钮状态　240
• 18.2.2　切换按钮　241
• 18.2.3　复选框和单选按钮　241
• 18.2.4　按钮方法　243
• 18.3　警告框　243
• 18.3.1　警告框方法　245
• 18.3.2　警告框事件　245
• 18.4　进度条　245
• 18.4.1　创建进度条　245
• 18.4.2　设置进度条样式　246
• 18.5　小结　248
• 18.6　讨论　249
• 第19章　折叠插件和折叠面板　254
• 19.1　折叠插件　254
• 19.1.1　创建一个可折叠部分　254
• 19.1.2　水平折叠元素　258
• 19.1.3　折叠选项　259
• 19.1.4　折叠方法　259
• 19.1.5　折叠事件　259
• 19.2　折叠面板　260
• 19.2.1　创建折叠面板　260
• 19.2.2　使用折叠面板导航　263
• 19.3　小结　265
• 19.4　讨论　266
• 第20章　轮播　270
• 20.1　创建轮播　270
• 20.1.1　基本轮播　272
• 20.1.2　更精致的轮播　274
• 20.2　使用轮播插件　276
• 20.2.1　添加多个轮播　277
• 20.2.2　轮播选项　278
• 20.2.3　轮播方法　279
• 20.2.4　轮播事件　279
• 20.3　Web上的轮播　279
• 20.3.1　轮播最佳实践　279
• 20.3.2　轮播的问题和解决方案　280
• 20.4　小结　281
• 20.5　讨论　282
• 第21章　自定义Bootsrap和Bootstrap
• 网站　286
• 21.1　使用自己的CSS　286
• 21.2　使用Bootstrap Customizer　290
• 21.2.1　Less文件和jQuery插件　291
• 21.2.2　Less变量　292
• 21.2.3　下载和安装自定义
• Bootstrap　294
• 21.3　使用第三方Bootstrap定制
• 工具　295
• 21.4　小结　295
• 21.5　讨论　295
• 第22章　提高Bootstrap的可访问性　299
• 22.1　什么是可访问性　299
• 22.1.1　可访问性设计实践　300
• 22.1.2　WAI-ARIA和可访问性　301
• 22.2　Bootstrap中的可访问设计　301
• 22.2.1　跳过导航　302
• 22.2.2　嵌套标题　302
• 22.2.3　颜色对比　303
• 22.3　Bootstrap网站可访问性
• 技巧　303
• 22.4　小结　304
• 22.5　讨论　304
• 第23章　使用Less和Sass与Bootstrap
• 配合　307
• 23.1　什么是CSS预处理器　307
• 23.2　使用Less　308
• 23.2.1　Less的功能　308
• 23.2.2　结合使用Less和
• Bootstrap　310
• 23.3　使用Sass　312
• 23.3.1　Sass的功能　312
• 23.3.2　结合使用Sass和
• Bootstrap　314
• 23.4　小结　315
• 23.5　讨论　315
• 第24章　进一步应用Bootstrap　319
• 24.1　Bootstrap编辑器　319
• 24.1.1　Web编辑器　319
• 24.1.2　主题构建和定制
• 工具　321
• 24.2　在WordPress中使用
• Bootstrap　322
• 24.2.1　使用WordPress插件　322
• 24.2.2　寻找用于WordPress的
• Bootstrap主题　323
• 24.2.3　构建自己的WordPress
• 主题　323
• 24.3　用第三方附加程序扩展
• Bootstrap　330
• 24.3.1　Bootstrap主题　330
• 24.3.2　Bootstrap插件　330
• 24.3.3　Bootstrap社区　331
• 24.3.4　漂亮的Bootstrap网站　331
• 24.4　小结　333
• 24.5　讨论　334