Bootstrap基础教程-图书-人邮教育社区

内容摘要

Bootstrap是一个基于HTML5、CSS3和JavaScript的前端开发框架，它现成可用的HTML标记、CSS样式、JavaScript插件，极大地提高了Web前端界面开发的效率。目前，Bootstrap已成为前端设计领域最受欢迎的辅助技术。
本书讲述了Bootstrap框架中各类排版元素，表单、表格、列表、图片、导航等各类CSS组件和轮播、对话框、下拉菜单、滚动监听等JavaScript插件的使用。本书共8章，主要内容包括Bootstrap是什么，栅格系统，CSS布局，表单和其他CSS组件，JavaScript插件，第三方扩展等，每章都提供有丰富的实例和一个综合案例。附录还简单介绍了Less的使用。
本书是为从未接触过Bootstrap技术而想学习Bootstrap技术的读者编写的，适合有一定HTML、CSS、JavaScript基础的读者。

前言

Bootstrap 来自Twitter，由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发，是目前很受欢迎的前端开发框架。Bootstrap 基于HTML、CSS、JavaScript，使用简洁灵活，让Web 开发变得更加快捷。Bootstrap 提供了HTML 和CSS 规范，由动态CSS 语言Less 编写而成。Bootstrap一经推出就颇受欢迎，一直是GitHub 上的热门开源项目，NASA（美国航空航天局）和MSNBC（微软全国广播公司）的Breaking News 都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5 前端开源框架等，也是基于Bootstrap 源码进行性能优化而来。Bootstrap 是2011 年8 月在GitHub 上发布的开源产品。目前使用较广的是版本2 和版本3，其中Bootstrap 2 的最新版本是2.3.2，Bootstrap 3 的最新版本是3.3.7。2015 年8 月下旬，Bootstrap 四周岁之际，Bootstrap 团队发布了Bootstrap 4 alpha 版；2017 年8 月10 日发布了Bootstrap 4 beta 版。本书以Bootstrap 3.3.7 为基础进行讲解。
本书作者在总结多年前端开发经验和多年讲授HTML、Bootstrap 课程的经验与体会的基础上，参考大量国内外相关文献和网站，完成了本书的编写工作。
全书内容简明易懂，循序渐进，实例丰富实用，每个知识点都结合具体实例来展示其效果。每章最后还配有综合案例。全书共8 章。
第1 章介绍Bootstrap 的下载、文件结构以及如何使用模板等内容。
第2 章介绍Bootstrap 框架中响应式布局系统——栅格。
第3 章介绍Bootstrap 中的排版标签元素。
第4 章介绍Bootstrap 中比较重要的CSS 组件——表单。
第5 章讲解Bootstrap 中的其他CSS 组件，如导航条、面板、下拉菜单、列表组等。
第6 章讲解Bootstrap 框架中各JavaScript 插件的使用，包括触发、属性、方法、事件。
第7 章介绍常用的第三方扩展组件，包括Buttons 插件、FontAwesome 字体图标、日期时间选择器DateTimePicker、Flat UI 组件包。
第8 章以一个综合案例详细讲解如何从零开始搭建一个具体的Bootstrap 网站。
附录A 介绍Less 和Sass 的基本使用，附录B 介绍所有的CSS 选择器的含义。
本书由武汉软件工程职业学院的赵丙秀、张松慧担任主编，江平、孙琳担任副主编，董宁担任主审。参与本书编写工作的还有武汉软件工程职业学院的李唯、陈丹、吴海天、李文蕙、汪晓青、程永恒等长期教授前端设计课程、具有丰富教学经验的一线教师。全书由赵丙秀、董宁审校。
本书除了可用作高等院校计算机专业的教材和参考书外，还兼顾一般读者，可作为计算机从业人员的参考书，适合前端框架设计爱好者。本书适合从未接触过Bootstrap 技术的读者。如果具有一定的HTML、CSS、JavaScript 基础知识和开发经验，那么更容易掌握本书内容。
在本书的编写过程中，参考和引用了许多专家、学者的著作和论文，在文中未能一一注明。在此谨向相关参考文献的作者表示衷心的谢意。限于编者的水平，本书难免存在不足和不当之处，恳请读者批评指正。作者E-mail：sonyxiu@163.com。

课程视频清单

第 1章 Bootstrap是什么 1
1.1　Bootstrap简述　2
1.2　为什么使用Bootstrap　2
1.3　如何使用Bootstrap　3
1.4　下载Bootstrap　3
1.5　简单模板　5
1.6　案例：第一个Bootstrap实例　7
1.7　Bootstrap 4　9
本章小结　9
练习与实训　9
第 2章　栅格系统　10
2.1　实现原理　11
2.2　工作原理　11
2.3　使用方法　13
2.3.1　基本用法　13
2.3.2　列偏移　14
2.3.3　列排序　15
2.3.4　列嵌套　17
2.3.5　响应式栅格　18
2.4　案例：招商银行首页　22
本章小结　26
练习与实训　26
第3章　CSS布局　27
3.1　排版　28
3.1.1　标题　28
3.1.2　段落　29
3.1.3　mark标签　30
3.1.4　小号文本　30
3.1.5　del和s标签　30
3.1.6　ins和u标签　30
3.1.7　strong和em标签　31
3.1.8　b和i标签　31
3.1.9　文本对齐方式　31
3.1.10　字母大小写　32
3.1.11　缩略语　32
3.1.12　地址　33
3.1.13　引用　34
3.2　列表　35
3.2.1　无序列表和有序列表　35
3.2.2　无样式列表　35
3.2.3　内联列表　36
3.2.4　描述列表　37
3.3　代码　38
3.4　表格　39
3.4.1　基本表格　39
3.4.2　斑马线表格　40
3.4.3　带边框的表格　41
3.4.4　鼠标悬停高亮行　41
3.4.5　紧凑型表格　42
3.4.6　状态类　43
3.4.7　响应式表格　44
3.5　按钮　45
3.5.1　预定义按钮　45
3.5.2　按钮尺寸　45
3.5.3　块级按钮　46
3.5.4　按钮激活状态　46
3.5.5　按钮禁用状态　46
3.5.6　按钮标签　47
3.6　图像　47
3.6.1　响应式图像　47
3.6.2　图像形状　47
3.7　辅助类　48
3.7.1　情景文本颜色　48
3.7.2　情景文本背景色　48
3.7.3　关闭按钮　49
3.7.4　三角符号　49
3.7.5　快速浮动　50
3.7.6　块级居中显示　50
3.7.7　清除浮动　51
3.7.8　显示或隐藏　51
3.7.9　屏幕阅读器和键盘焦点　52
3.7.10　图像替换　52
3.8　案例：个人简历　52
本章小结　57
练习与实训　57
第4章　表单　58
4.1　基础表单　59
4.1.1　基本实例　59
4.1.2　内联表单　60
4.1.3　水平表单　60
4.2　输入框　62
4.3　下拉框　63
4.4　文本域　64
4.5　复选框和单选按钮　64
4.6　表单焦点　66
4.7　表单禁用　67
4.8　验证样式　69
4.8.1　颜色提示　69
4.8.2　图标提示　70
4.8.3　文字提示　71
4.9　元素大小　72
4.9.1　高度　72
4.9.2　宽度　74
4.10　输入框组　74
4.11　案例：一个表单页面　78
本章小结　80
练习与实训　80
第5章　CSS组件　81
5.1　字体图标　82
5.1.1　可用的字体图标　82
5.1.2　使用字体图标　83
5.1.3　字体图标实例　83
5.1.4　定制字体图标　84
5.2　下拉菜单　84
5.2.1　基本用法　84
5.2.2　对齐　85
5.2.3　标题和分割线　85
5.2.4　菜单状态　86
5.3　按钮组　86
5.3.1　基本按钮组　86
5.3.2　按钮工具栏　87
5.3.3　尺寸　88
5.3.4　嵌套　88
5.3.5　垂直的按钮组　89
5.3.6　两端对齐的按钮组　89
5.4　按钮式弹出菜单　90
5.4.1　单按钮下拉菜单　90
5.4.2　分裂式按钮下拉菜单　90
5.4.3　尺寸　91
5.4.4　向上弹出式菜单　92
5.5　输入框组　92
5.5.1　基本实例　92
5.5.2　尺寸　93
5.5.3　作为额外元素的复选框和单选
　按钮　93
5.5.4　作为额外元素的按钮　94
5.5.5　作为额外元素的按钮式下拉菜单　94
5.5.6　作为额外元素的分裂式按钮下拉菜单　95
5.5.7　作为额外元素的多个按钮　95
5.6　导航　96
5.6.1　选项卡导航　96
5.6.2　胶囊式导航　96
5.6.3　两端对齐的导航　97
5.6.4　禁用的链接　98
5.6.5　带有下拉菜单的导航　98
5.7　导航栏　99
5.7.1　默认样式的导航栏　99
5.7.2　品牌图标　100
5.7.3　表单　100
5.7.4　按钮　101
5.7.5　文本　101
5.7.6　非导航的链接　101
5.7.7　对齐方式　102
5.7.8　固定在顶部　103
5.7.9　固定在底部　103
5.7.10　静止在顶部　103
5.7.11　反色导航栏　104
5.7.12　响应式导航栏　104
5.8　路径导航　105
5.9　分页　106
5.9.1　基本实例　106
5.9.2　禁用和激活状态　106
5.9.3　尺寸　107
5.10　翻页　108
5.10.1　基本实例　108
5.10.2　对齐链接　108
5.10.3　可选的禁用状态　109
5.11　标签　109
5.11.1　基本实例　109
5.11.2　多样式的标签　110
5.12　徽章　110
5.13　巨幕　111
5.14　页头　112
5.15　缩略图　113
5.15.1　基本实例　113
5.15.2　自定义内容　114
5.16　警告框　115
5.16.1　基本警告框　115
5.16.2　可关闭的警告框　116
5.16.3　警告框中的链接　116
5.17　进度条　117
5.17.1　基本实例　117
5.17.2　根据情景变化的进度条　117
5.17.3　条纹进度条　118
5.17.4　动画进度条　119
5.17.5　堆叠进度条　120
5.18　媒体对象　120
5.18.1　默认样式　121
5.18.2　对齐方式　122
5.18.3　媒体对象列表　123
5.19　列表组　125
5.19.1　基本实例　125
5.19.2　向列表组添加徽章　125
5.19.3　向列表组添加链接　126
5.19.4　向列表组中添加按钮　126
5.19.5　列表项目禁用状态　127
5.19.6　列表项目情景类　127
5.19.7　向列表组添加自定义内容　128
5.20　面板　128
5.20.1　基本实例　128
5.20.2　带标题的面板　128
5.20.3　带脚注的面板　129
5.20.4　情景效果　129
5.20.5　带表格的面板　130
5.20.6　带列表组的面板　131
5.21　Well　132
5.22　案例：制作一个个人简历页面　133
本章小结　138
练习与实训　138
第6章　JavaScript插件　139
6.1　插件库说明　140
6.2　模态框　140
6.2.1　模态框的结构　141
6.2.2　模态框的特点　142
6.2.3　模态框触发方式　144
6.2.4　过渡效果　145
6.2.5　触发参数data-*　145
6.2.6　JavaScript触发——参数　146
6.2.7　JavaScript触发——方法　148
6.2.8　JavaScript触发——事件　149
6.3　下拉菜单　151
6.3.1　声明式触发　151
6.3.2　JavaScript触发　152
6.3.3　事件　152
6.4　滚动监听　154
6.4.1　组件说明　154
6.4.2　滚动监听实现步骤　155
6.4.3　声明式触发　156
6.4.4　JavaScript触发　158
6.5　选项卡　160
6.5.1　选项卡的组成　161
6.5.2　声明式触发　161
6.5.3　JavaScript触发　162
6.5.4　过渡效果　163
6.5.5　事件　163
6.6　工具提示　165
6.6.1　结构　165
6.6.2　JavaScript触发　165
6.6.3　Data-*属性　166
6.6.4　事件　167
6.7　弹出框　168
6.7.1　弹出框结构　168
6.7.2　声明式属性　169
6.7.3　JavaScript触发　169
6.7.4　事件　170
6.8　警告框　172
6.8.1　Alert结构　172
6.8.2　声明式触发　172
6.8.3　JavaScript触发　173
6.8.4　事件　174
6.9　按钮　175
6.9.1　按钮加载状态　175
6.9.2　单选按钮　176
6.9.3　复选框　176
6.9.4　方法　177
6.10　折叠　178
6.10.1　结构　178
6.10.2　声明式触发　180
6.10.3　方法　181
6.10.4　事件　182
6.11　轮播　183
6.11.1　轮播结构　184
6.11.2　声明式触发　186
6.11.3　JavaScript触发　187
6.11.4　事件　187
6.12　Afflix插件　188
6.12.1　声明属性　188
6.12.2　JavaScript方法　189
6.12.3　事件　190
6.13　案例　190
本章小结　200
练习与实训　200
第7章　第三方扩展　201
7.1　字体图标　202
7.1.1　介绍　202
7.1.2　常规用法　203
7.1.3　List列表上的图标　204
7.1.4　导航上的图标　205
7.1.5　固定角度旋转图标　207
7.1.6　动画图标　207
7.1.7　多图叠加　208
7.2　Buttons　210
7.3　DateTimePicker　217
7.4　Flat UI　222
7.5　案例：特性页面　223
本章小结　225
练习与实训　226
第8章　综合案例　227
8.1　网站概述　228
8.2　开始页面　230
8.3　主要内容的制作　230
8.3.1　制作第一屏　230
8.3.2　制作第二屏　232
8.3.3　制作第三屏　234
8.3.4　制作第四屏　239
8.4　完善网站　240
8.4.1　添加地图　240
8.4.2　添加导航条　242
8.4.3　设置页脚　244

8.4.4　设置滚动监听　245
8.4.5　平滑滚动　245
本章小结　246
练习与实训　246
附录A　Less和Sass　247
附录B　CSS选择器　255
参考文献　258

读者评论

新增加了课程标准和实施方案，老师可自行下载。

祝智敏发表于 2020/3/11 14:01:55
感谢读者发现书中错误，36页实例3-20勘误如下：

祝智敏发表于 2019/3/19 13:40:07
本书内容简明易懂，实例丰富实用，每个知识点都结合具体实例来展示其效果，各章最后还配有综合案例。为方便其他老师教学，并对教学效果起到应有大保障作用，本书配备了教学PPT、案例代码和相关工具，欢迎各位老师自行下载使用。
教学PPT清单：

案例代码清单：

相关工具清单：

祝智敏发表于 2018/3/9 13:53:37