内容简介

《Bootstrap从入门到项目实战》从零基础开始讲解，用实例引导读者深入学习，深入浅出地讲解了Bootstrap 4网页设计的各项技术及实战技能。
本书共18章，主要内容包括：开发框架Bootstrap 4简介、使用新的架Bootstrap 4、快速掌握Bootstrap 4布局、Bootstrap 4的新布局—弹性盒子、核心工具库—CSS通用样式类、Bootstrap 4的新版式、认识CSS组件、深入掌握CSS组件、高级的CSS组件、Bootstrap 4的新增组件—旋转器和卡片、快速认识JavaScript插件、深入精通JavaScript插件等。之后讲解了6个行业热点项目实训，包括招聘网中的简历模板、仿星巴克网站、相册类博客项目、设计流行企业网站、Web设计与定制网站、开发神影视频网站。
《Bootstrap从入门到项目实战》适合任何想学习Bootstrap网页设计的读者，无论您是否从事相关行业，是否接触过Bootstrap网页设计，通过学习本书内容均可快速掌握Bootstrap网页设计和开发动态网站的方法和技巧。

前言
为什么要写这样一本书
Bootstrap 是目前最受欢迎的前端框架之一。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，能够在很大程度上降低Web 前端开发的难度，因此深受广大Web 前端开发人员的喜爱。Bootstrap 框架功能虽然强大，但是对于初学者来说入门比较困难，市场上的图书则以翻译为主，缺少一本真正适合初学者入门的书。本书以能让读者掌握Bootstrap 框架技术作为编写本书的思路，知识点从易到难，讲解详细且透彻，结构合理，对于读者快速掌握Bootstrap 前端框架有很大的帮助。
本书特色
零基础、入门级的讲解
无论您是否从事相关行业，无论您是否接触过Bootstrap 网页设计，都能从本书中找到最佳起点。
实用、专业的范例和项目
本书从Bootstrap 基本操作开始，逐步带领读者学习Bootstrap 的各种应用技术，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者学起来简明轻松，操作起来有章可循。
细致入微、贴心提示
本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小栏目，使读者在学习过程中能更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。
超值资源大放送
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更能轻松
地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分使您得到比书中更多的收获。
超多容量王牌资源
赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88 个实用类网页模板、12 部网页开发必备参考手册、HTML 5 标签速查手册、精选的JavaScript 实例、CSS 3 属性速查表、JavaScript 函数速查手册、CSS+DIV 布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web 前端工程师常见面试题等。
读者对象
没有任何Bootstrap网页开发基础的初学者。
有一定的Bootstrap网页开发基础，想精通前端框架开发的人员。
有一定的网页前端设计基础，没有项目经验的人员。
大专院校及培训学校的老师和学生。
创作团队
本书由李爱玲编著，参加编写的人员还有刘春茂、李艳恩和李佳康。在编写过程中，我们虽竭尽所能将最好的讲解呈现给了读者，但难免有疏漏和不妥之处，敬请读者不吝指正。
若您在学习中遇到困难或疑问，或有任何建议，可写信发送至邮箱。
编 者
 

目录

第1章　开发框架Bootstrap 4简介  001
1.1　Bootstrap概述 001
1.1.1 Bootstrap发展历史 001
1.1.2 Bootstrap的优势 002
1.1.3 Bootstrap 4介绍 003
1.1.4 Bootstrap 4浏览器支持 004
1.2　Bootstrap特性 005
1.2.1 Bootstrap 4的构成 005
1.2.2 Bootstrap的特色 007
1.3　Bootstrap应用浏览 007
1.3.1 Bootstrap网站 008
1.3.2 Bootstrap插件 009
1.4　Bootstrap开发工具和资源 010
1.4.1 Bootstrap开发工具 010
1.4.2 Bootstrap资源 011
第2章　使用最新的框架Bootstrap 4  012
2.1　下载Bootstrap 012
2.2　Bootstrap 的结构 014
2.2.1 源码版Bootstrap文件结构 014
2.2.2 编译版Bootstrap文件结构 015
2.3　安装 Bootstrap 016
2.3.1 本地安装016
2.3.2 在线安装017
2.4　案例实训1—设计网页按钮 017
2.5　案例实训2—设计网页轮播组件 018
第3章　快速掌握Bootstrap 4布局  021
3.1　布局基础021
3.1.1 布局容器021
3.1.2 响应断点023
3.1.3 z-index 023
3.2　网格系统024
3.2.1 网格选项024
3.2.2 自动布局列025
3.2.3 响应类028
3.2.4 重排序031
3.2.5 列嵌套034
3.3　布局工具类 035
3.4　案例实训1—仿QQ登录界面 036
3.5　案例实训2—开发电商网站特效 041
第4章　Bootstrap 4的新布局—弹性盒子  045
4.1　定义弹性盒子 045
4.2　排列方向047
4.2.1 水平方向排列047
4.2.2 垂直方向排列047
4.3　内容排列048
4.4　项目对齐050
4.5　自动对齐051
4.6　自动相等053
4.7　等宽变换053
4.8　自动浮动054
4.8.1 水平方向浮动054
4.8.2 垂直方向浮动055
4.9　弹性布局—包裹 056
4.10　排列顺序057
4.11　对齐内容 057
第5 章　核心工具库—CSS 通用样式类  061
5.1　文本处理061
5.1.1 文本对齐061
5.1.2 文本换行063
5.1.3 文本转换064
5.1.4 粗细和斜体065
5.1.5 其他一些文本类066
5.2　颜色 066
5.2.1 文本颜色066
5.2.2 链接文本颜色068
5.2.3 背景颜色069
5.3　边框 069
5.3.1 添加边框070
5.3.2 边框颜色071
5.3.3 圆角边框072
5.4　宽度和高度 074
5.4.1 相对于父元素074
5.4.2 相对于视口076
5.5　边距 077
5.5.1 边距的定义077
5.5.2 响应式边距078
5.6　浮动 079
5.6.1 实现浮动079
5.6.2 响应式浮动080
5.7　display 属性类 081
5.7.1 实现display 属性 081
5.7.2 响应式的隐藏或显示元素082
5.8　嵌入 083
5.9　内容溢出084
5.10　定位 085
5.11　阴影 086
5.12　关闭图标087
第6 章　Bootstrap 4 的新版式   088
6.1　初始化与CSS 重置 088
6.2　排版 090
6.2.1 标题090
6.2.2 段落093
6.2.3 强调094
6.2.4 缩略语095
6.2.5 引用096
6.3　代码 097
6.4　图片 100
6.5　表格 102
6.5.1 表格默认风格103
6.5.2 设计个性化风格104
6.6　案例实训— 设计后台人员管理页面 108
第7 章　认识CSS 组件   111
7.1　正确使用CSS 组件 111
7.2　按钮 114
7.2.1 定义按钮114
7.2.2 设计按钮风格114
7.3　按钮组 117
7.3.1 定义按钮组117
7.3.2 定义按钮组工具栏118
7.3.3 设计按钮组布局和样式119
7.4　下拉菜单121
7.4.1 定义下拉菜单121
7.4.2 设计下拉按钮的样式123
7.4.3 设计下拉菜单的样式124
7.5　导航 128
7.5.1 定义导航128
7.5.2 设计导航的布局129
7.5.3 设计导航的风格131
7.5.4 设计导航选项卡135
7.6　超大屏幕137
7.6.1 定义超大屏幕137
7.6.2 设计风格138
7.7　案例实训—设计广告牌 139
第8 章　深入掌握CSS 组件   141
8.1　徽章 141
8.1.1 定义徽章141
8.1.2 设置颜色143
8.1.3 椭圆形徽章143
8.1.4 链接徽章144
8.2　警告框 145
8.3　媒体对象148
8.3.1　媒体版式149
8.3.2 媒体嵌套149
8.3.3　对齐方式150
8.3.4　排列顺序151
8.3.5　媒体列表152
8.4　进度条 153
8.4.1 定义进度条153
8.4.2 设计进度条样式154
8.4.3 设计进度条风格156
8.5　导航栏 158
8.5.1 定义导航栏158
8.5.2 定位导航栏163
8.5.3 设计导航栏配色164
8.5.4 扩展导航栏内容165
8.6　案例实训—设计动态进度条 167
第9 章　高级的CSS 组件   169
9.1　表单 169
9.1.1 定义表单控件169
9.1.2 设计单选按钮/ 复选框布局和样式173
9.1.3 表单布局风格176
9.1.4 帮助文本180
9.1.5 禁用表单180
9.2　列表组 181
9.2.1 定义列表组181
9.2.2 设计列表组的风格样式182
9.2.3 定制内容185
9.3　面包屑 186
9.3.1 定义面包屑186
9.3.2 设计分隔符187
9.4　分页 188
9.4.1 定义分页188
9.4.2 使用图标189
9.4.3 设计分页风格190
第10 章　Bootstrap 4 的新增组件—旋转器和卡片  194
10.1　旋转器特效 194
10.1.1 定义旋转器194
10.1.2 设计旋转器风格195
10.1.3 对齐旋转器196
10.1.4 按钮旋转器198
10.2　卡片 199
10.2.1 定义卡片199
10.2.2 卡片的内容类型200
10.2.3 控制卡片的宽度203
10.2.4 文本对齐方式205
10.2.5 添加导航206
10.2.6 图像背景208
10.2.7 卡片风格208
10.2.8 卡片排版211
10.3　案例实训1—仿云巴网站 215
10.4　案例实训2—动态进度条及百分比数字显示 218
第11 章　快速认识JavaScript 插件  223
11.1　插件概述 223
11.1.1 插件分类 223
11.1.2 安装插件 224
11.1.3 调用插件 225
11.1.4 事件 226
11.2　按钮 226
11.2.1 切换状态 227
11.2.2 按钮式复选框和单选框 227
11.3　警告框 230
11.3.1 关闭警告框 230
11.3.2 添加用户行为 232
11.4　下拉菜单 233
11.4.1 调用下拉菜单 233
11.4.2 添加用户行为 235
11.5　模态框 237
11.5.1 定义模态框 237
11.5.2 模态框布局和样式 239
11.5.3 调用模态框 243
11.5.4 添加用户行为 245
11.6　标签页 246
11.6.1 定义标签页 247
11.6.2 调用标签页 248
11.6.3 添加用户行为 249
11.7　案例实训1—仿淘宝抢红包 251
11.8　案例实训2—仿京东商品推荐区 252
第12 章　深入精通JavaScript 插件  257
12.1　折叠 257
12.1.1 定义折叠257
12.1.2 控制多目标258
12.1.3 设计手风琴效果259
12.1.4 调用折叠261
12.1.5 添加用户行为261
12.2　工具提示263
12.2.1 定义工具提示263
12.2.2 工具提示方向264
12.2.3 调用工具提示266
12.2.4 添加用户行为267
12.3　弹窗 269
12.3.1 定义弹窗269
12.3.2 弹窗方向271
12.3.3 调用弹窗271
12.3.4 添加用户行为273
12.4　轮播 275
12.4.1 定义轮播275
12.4.2 设计轮播风格278
12.4.3 调用轮播279
12.4.4 添加用户行为282
12.5　滚动监听283
12.5.1 定义滚动监听283
12.5.2 调用滚动监听289
12.5.3 添加用户行为290
12.6　实战实训1—设计折叠搜索框 291
12.7　实战实训2—仿小米内容展示 293
第13 章　项目实训1—招聘网中的简历模板  295
13.1　案例概述295
13.1.1 案例结构295
13.1.2 设计效果296
13.1.3 设计准备298
13.2　设计布局298
13.3　设计左侧信息栏 299
13.4　设计导航条 300
13.5　设计主页301
13.5.1 工作经历301
13.5.2 专业技能302
13.5.3 教育经历303
13.5.4 综合概述304
13.6　设计联系页 306
13.7　设计相册页 306
第14 章　项目实训2—仿星巴克网站  308
14.1　网站概述308
14.1.1 网站结构308
14.1.2 设计效果308
14.1.3 设计准备310
14.2　设计首页布局 310
14.3　设计可切换导航 311
14.4　主体内容317
14.4.1 设计轮播广告区317
14.4.2 设计产品推荐区319
14.4.3 设计登录注册区和Logo 319
14.4.4 设计特色展示区320
14.4.5 设计产品生产流程区321
14.5　设计底部隐藏导航 324
第15 章　项目实训3—相册类博客项目  326
15.1　案例概述326
15.1.1 案例结构326
15.1.2 设计效果327
15.1.3 设计准备328
15.2　设计导航栏 329
15.3　首页 330
15.3.1 设计相册展示330
15.3.2 添加Swipebox 灯箱插件333
15.4　分类页 337
15.4.1 设计相册分类展示337
15.4.2 添加Swipebox 灯箱插件340
15.5　博客 341
15.6　联系页 343
15.6.1 设计布局343
15.6.2 添加工具提示345
第16 章　项目实训4—设计流行企业网站 347
16.1　网站概述347
16.2　设计主页349
16.3　设计侧边导航栏 360
16.4　设计登录页 362
第17 章　项目实训5—Web 设计与定制网站  365
17.1　网站概述365
17.1.1 网站结构365
17.1.2 网站布局365
17.1.3 设计准备366
17.2　设计主页面导航 366
17.3　设计主页面内容 369
17.3.1 设计首页369
17.3.2 “关于我们”页面设计370
17.3.3 “我们的团队”页面设计372
17.3.4 “我们的服务”页面设计375
17.3.5 “我们的博客”页面设计376
17.3.6 “我们的定制”页面设计377
17.4　设计脚注379
第18 章　项目实训6—开发神影视频网站 380
18.1　网站概述380
18.2　设计主页面 382
18.2.1 设计头部内容382
18.2.2 设计轮播384
18.2.3 设计分类列表384
18.2.4 设计“视频内容”页面386
18.2.5 设计脚注391