Bootstrap 是由 Twitter 在2011年8月推出的开源前端框架，如今已发展成为广受欢迎的前端 UI框架。《Bootstrap前端开发从新手到高手（微视频版）》深入探讨了 Bootstrap 的框架基础、栅格系统、基础样式、组件等核心内容，并进一步展示了如何利用 Bootstrap进行实际网站开发。本书共分8章，内容涵盖了Bootstrap快速入门、基础样式、组件库、工具类、弹性布局、表格样式、表单样式以及定制与优化等。在每章的最后还提供了紧贴实战的综合案例，力求为读者带来良好的学习体验。
本书提供了与内容同步的案例操作教学资源，读者可扫描前言中的二维码进行学习。本书具有很强的实用性和可操作性，可以作为初学者的自学用书，也可作为Web前端开发技术人员的首选参考书，还可作为高等院校Web前端开发、网站设计等相关专业的教材。
本书对应的电子课件、完整代码文档和实例源文件可以到http://www.tupwk.com.cn/downpage网站下载，也可以通过扫描前言中的二维码获取。读者还可以扫描前言中的视频二维码直接观看教学视频。

图文并茂 双色印刷
本书采用基础知识 实用案例 要点分析的模式编写，全程详解基于Bootstrap5的 Web 前端开发技术，实现技术与思维的双重提升。
案例精彩 实用性强
精选行业应用中的典型案例，深入探讨了 Bootstrap 的框架基础、栅格系统、基础样式、组件和工具等核心内容，力求让读者用最短的时间高效掌握 Bootstrap 框架应用的技术精髓。

Bootstrap是目前最受欢迎的前端框架之一。它建立在HTML、CSS和JavaScript之上，以其简洁和灵活的特点，大大简化了Web前端开发的难度，使得开发人员可以更加高效地创建响应式、现代化的网站和应用程序。这种便利性和强大的功能使得Bootstrap成为全球无数开发者的首选工具，深受初学者和资深开发人员的喜爱。
然而，尽管Bootstrap功能强大，但对于初学者来说，熟练掌握这一框架可能并不容易。许多初学者在学习时可能会遇到诸如如何使用其多样化的组件、理解其复杂的栅格系统，以及自定义主题等难题。
《Bootstrap前端开发从新手到高手（微视频版）》正是基于这些难题编写的，旨在帮助读者全面掌握Bootstrap技术。书中的内容由浅入深，以通俗易懂的语言和丰富的实例，详细阐述了Bootstrap各个方面的内容。无论是基础的组件使用、复杂的页面布局，还是高级的主题定制与开发，本书都提供了深入的讲解和示例。此外，书中的结构设计合理，从基本概念到高级应用，每一步都为读者铺设了通往精通Bootstrap 之路的坚实台阶。
一、本书内容特点
(1) 零基础、入门级讲解。无论读者是否从事相关行业，或是否接触过 Bootstrap 网页设计，都能从本书中找到合适的起点。
(2) 实用、专业的范例和项目。从Bootstrap的基本操作入手，逐步引导读者学习各类应用技术，侧重实战技能。书中提供简明易懂的案例分析和操作指导，让学习过程更
轻松。
(3) 细致入微、贴心提示。各章节中设置了各类代码解释，帮助读者更清楚地理解相关操作与概念，轻松掌握各种技巧。
(4) 赠送学习资源。提供详细的素材，包括实例源代码、教学课件等，帮助读者学习和巩固相关内容。
二、本书内容简介
《Bootstrap前端开发从新手到高手（微视频版）》深入探讨了Bootstrap的框架基础、栅格系统、基础样式、组件等核心内容，并进一步展示了如何利用Bootstrap进行实际网站开发。
本书共分8章，内容涵盖了Bootstrap快速入门、基础样式、组件库、工具类、弹性布局、表格样式、表单样式以及定制与优化等，各章内容简介如下。

章节 内容说明
第1章 主要介绍Bootstrap的基础知识，包括Bootstrap的由来、发展历程、浏览器支持、下载和安装Bootstrap的方法，以及布局容器、栅格系统
第2章 主要介绍Bootstrap定义的大量通用样式类，包括边距、边框、颜色、对齐方式、阴影、浮动、显示与隐藏等
第3章 主要介绍从导航条、按钮到模态窗口、卡片和进度条等各种常见的组件集合
第4章 主要介绍布局、排版、颜色、边框等常见工具类
第5章 主要介绍实现Bootstrap弹性布局的一系列工具类
第6章 主要介绍Bootstrap 提供的各种表格样式
第7章 主要介绍Bootstrap的表单样式，以及利用如 .form-control、.form-group、.form-label和.form-check 等类，实现高质量表单设计的方法
第8章 主要介绍使用Sass编写CSS代码的相关知识与具体操作

三、本书配套资源及服务
本书提供了与内容同步的案例操作教学资源，读者可随时扫码学习。此外，本书免费提供电子课件、完整代码文档和实例源文件，读者可以扫描下方的二维码获取，也可以进入本书信息支持网站(http://www.tupwk.com.cn/downpage)下载。
本书分为8章，其中陈奋编写了第3、6、7、8章，张晓兰编写了第1、2、4、5章。由于作者水平有限，本书难免有不足之处，欢迎广大读者批评指正。我们的邮箱是992116@qq.com，电话是010-62796045。

编者
2024年11月

第 1 章快速入门 1
1.1Bootstrap概述 2
1.1.1Bootstrap的由来 2
1.1.2Bootstrap的发展历程 2
1.1.3Bootstrap浏览器支持 3
1.1.4选择Bootstrap的原因 4
1.2下载Bootstrap 5
1.2.1下载源码版Bootstrap 7
1.2.2下载编译版Bootstrap 8
1.3引入Bootstrap 9
1.4布局容器 15
1.5栅格系统 17
1.5.1基础知识 17
1.5.2自动布局列 21
1.5.3响应式布局类 25
1.5.4嵌套布局 28
1.5.5列布局 29
1.6实战案例企业网站首页 32
1.6.1案例概述 32
1.6.2设计页面导航区 33
1.6.3设计页面展示区 34
1.6.4添加搜索栏 34
1.6.5设计主体内容区 35
1.6.6设计两栏图文区 38
1.6.7添加footer区 39
1.6.8设计页面样式 40
1.7思考与练习 44
第 2 章基础样式 45
2.1页面排版 46
2.2标题 47
2.2.1Bootstrap标准标题 47
2.2.2内联子标题 49
2.2.3标题辅助文本 49
2.3正文 49
2.3.1段落样式 50
2.3.2内联文本 51
2.4文本块 52
2.4.1缩略语 52
2.4.2引用 53
2.4.3列表 54
2.4.4代码 57
2.5图片 58
2.5.1响应式图片 58
2.5.2图片边框 59
2.5.3图片形状 60
2.6轮廓 61
2.7实战案例在线简历模板 62
2.7.1案例概述 62
2.7.2设计布局 64
2.7.3制作信息栏 65
2.7.4制作导航条 67
2.7.5制作简历主页 67
2.8思考与练习 73
第 3 章组件库 75
3.1正确使用Bootstrap组件 76
3.2按钮和按钮组 79
3.2.1按钮 79
3.2.2按钮组 83
3.3标签和徽章 85
3.3.1标签 85
3.3.2徽章 86
3.4导航系统 87
3.4.1导航和导航条 87
3.4.2下拉菜单 94
3.4.3列表组 98
3.4.4分页 100
3.5进度条 101
3.6卡片和旋转器 102
3.6.1卡片 103
3.6.2旋转器 107
3.7模态窗口 111
3.8提示组件 113
3.8.1工具提示框 113
3.8.2弹出提示框 114
3.8.3警告框 116
3.9折叠组件和手风琴组件 117
3.9.1折叠组件 117
3.9.2手风琴组件 119
3.10轮播组件 121
3.11滚动监听组件 124
3.11.1监听导航 124
3.11.2监听导航条 125
3.12实战案例网站后台管理页面 128
3.12.1案例概述 128
3.12.2设计页面布局 129
3.12.3设计导航栏 130
3.12.4设计左侧边栏 134
3.12.5设计主功能区 135
3.12.6设计版权区域 138
3.13思考与练习 139
第 4 章工具类 141
4.1认识工具类 142
4.1.1工具类的概念 142
4.1.2工具类的命名 143
4.1.3工具类的种类 145
4.2文本工具类 146
4.2.1文本对齐和换行 146
4.2.2文本字号和转换 149
4.2.3字体粗细和斜体 150
4.2.4控制行高 151
4.2.5文字修饰 152
4.3颜色工具类 153
4.3.1文本颜色和背景颜色 153
4.3.2链接颜色 154
4.4边框工具类 156
4.4.1添加与删除边框 156
4.4.2圆角边框 157
4.5边距工具类 159
4.5.1外边距和内边距 159
4.5.2响应式边距 160
4.6宽度和高度工具类 161
4.7显示和浮动工具类 163
4.7.1显示工具类 163
4.7.2浮动工具类 166
4.8其他工具类 167
4.8.1位置工具类 167
4.8.2阴影工具类 167
4.9案例演练旅行社旅游平台网页 168
4.9.1案例概述 168
4.9.2设计网页头部 169
4.9.3设计轮播 172
4.9.4设计分类列表 173
4.9.5设计旅游景点页面 176
4.9.6设计页脚部分 182
4.10思考与练习 184
第 5 章弹性布局 185
5.1定义弹性布局 186
5.2弹性布局容器样式 187
5.2.1项目对齐工具类 188
5.2.2排列方向工具类 191
5.2.3项目换行工具类 193
5.3弹性布局项目样式 194
5.3.1项目排序工具类 194
5.3.2项目伸缩工具类 195
5.3.3自身对齐工具类 199
5.3.4自动浮动工具类 200
5.4实战案例烧烤餐厅网页 201
5.4.1案例概述 201
5.4.2设计网页头部导航栏 202
5.4.3添加轮播广告区 204
5.4.4设计网页主要内容 205
5.4.5添加页脚信息 208
5.5思考与练习 210
第 6 章表格样式 211
6.1Bootstrap基本表格 212
6.2Bootstrap表格类 214
6.3面板中的表格 215
6.4响应式表格 217
6.5实战案例在线教育平台网页 220
6.5.1案例概述 220
6.5.2设计网页头部 223
6.5.3设计课程和大纲模块 228
6.5.4设计学习路径模块 233
6.5.5设计教学团队模块 235
6.5.6设计问答模块 238
6.5.7设计页脚部分 241
6.6思考与练习 242
第 7 章表单样式 243
7.1表单布局 244
7.1.1水平表单 245
7.1.2内联表单 247
7.1.3复杂表单 249
7.2表单控件 251
7.2.1输入框 251
7.2.2单选按钮和复选框 254
7.2.3下拉列表 257
7.2.4滑动条 258
7.2.5输入框组 259
7.3表单校验 260
7.4实战演练酒店入住订购网页 263
7.4.1案例概述 263
7.4.2设计主页 264
7.4.3设计侧边栏 277
7.4.4添加登录模块 280
7.5思考与练习 281
第 8 章定制与优化 283
8.1CSS预处理程序 284
8.1.1CSS预处理程序的概念 284
8.1.2引入CSS预处理程序的原因 284
8.2安装Ruby和Sass 286
8.2.1安装Ruby 286
8.2.2安装Sass 287
8.3Sass的基本应用 288
8.3.1使用变量 288
8.3.2计算功能 290
8.3.3选择器嵌套 290
8.3.4添加注释 292
8.3.5代码重用 293
8.3.6控制语句 297
8.4思考与练习 300