工业和信息化“十三五”人才培养规划教材

Bootstrap基础教程

从零起步学习Bootstrap前端框架开发
分享 推荐 1 收藏 8 阅读 387
赵丙秀 (作者)

关于本书的内容有任何问题,请联系 祝贺

实践性强,作者教学经验和前端开发经验丰富;
内容合理,知识点介绍和案例展示有机结合;
突出职业化教学特色,结合案例详细讲解如何从零开始搭建一个具体的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












读者评论

  • 本书内容简明易懂,实例丰富实用,每个知识点都结合具体实例来展示其效果,各章最后还配有综合案例。为方便其他老师教学,并对教学效果起到应有大保障作用,本书配备了教学PPT、案例代码和相关工具,欢迎各位老师自行下载使用。

    教学PPT清单:

    教学ppt.png

    案例代码清单:

    案例代码1.png

    相关工具清单:

    支持工具.png

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

我要评论

作者介绍

赵丙秀任职于武汉软件工程职业学院,前期教授前端设计课程,具有丰富教学经验。出版过多本计算机相关专业课程书籍,有《软件测试技术教程》《VB程序设计》《数据结构》《Linux操作系统配置与管理》等。

推荐用户

同系列书

相关图书

  • 多媒体技术与应用

    张振花

    本书共分11章,详细讲解图形、图像、视频、动画、音频、多媒体压缩和数据可视化与D3等原理和应用以及构建多媒体网...

    ¥49.80
  • 微信公众平台开发技术

    秦长春 欧国建 谢雪景 邓剑勋

    本书较为全面地介绍了微信公众平台开发的基本流程与方法。全书共11章,主要分为两个部分:第一部分(第1~8章)介...

    ¥49.80
  • 传输网络技术

    李世银 李晓滨 杨福猛 应祥岳 李良

    本书较为全面地介绍了传输网络主流技术原理、设备组成和典型组网等内容。全书共9章,主要介绍了光纤通信技术原理、网...

    ¥49.80
  • 智能楼宇技术(第3版)

    王用伦

    本书根据智能建筑的发展,全面介绍智能建筑的概念、组成、设计和管理等主要技术。 全书共分10章,分别为智能建筑...

    ¥42.00
  • 移动UI界面设计(微课版)

    张晓景

    内容提要 本书主要讲解了iOS和Android这2种主流智能手机操作系统界面和APP元素,基本风格,全面解析...

    ¥59.80