Bootstrap响应式Web开发

1.本书参考了1+X证书制度相关的考试大纲，是黑马程序员Web前端开发系列丛书中的一本。 2.本书配套了教学视频、教学PPT、源代码、课后习题及答案。

本书是面向移动Web开发学习者的一本入门教材，以通俗易懂的语言、丰富实用的案例，详细讲解Bootstrap的开发技术。 本书共8章，第1～3章讲解Bootstrap和移动Web开发的基础知识；第4章讲解移动端页面布局的相关知识；第5～7章讲解Bootstrap的核心知识，包括栅格系统、常用组件和布局样式的相关内容；第8章通过一个综合项目—潮流穿搭网站，讲解如何利用Bootstrap相关技术开发响应式网站。本书既可作为高等教育本、专科院校计算机相关专业的教材，也可作为网站开发爱好者的参考读物。

第1章 初识Bootstrap 001
1.1 Bootstrap概述 001
1.1.1 什么是Bootstrap 001
1.1.2 Bootstrap的特点 001
1.1.3 Bootstrap的组成 002
1.2 浏览器 003
1.2.1 PC端的浏览器 003
1.2.2 移动端设备 003
1.2.3 移动端的浏览器 005
1.3 Visual Studio Code编辑器 005
1.3.1 什么是Visual Studio Code 005
1.3.2 下载和安装Visual Studio Code 005
1.3.3 使用Visual Studio Code 006
1.4 移动Web开发的主流方案 007
1.4.1 单独制作移动端页面 008
1.4.2 制作响应式页面 008
本章小结 010
课后练习 010
第2章 移动Web开发基础（上） 012
2.1 视口 012
2.1.1 什么是视口 012
2.1.2 利用Chrome浏览器模拟手机屏幕 013
2.1.3 利用标签设置视口 016
2.1.4 视口的常用设置 017
2.2 移动Web页面的样式编写 017
2.2.1 利用Normalize.css初始化默认样式 017
2.2.2 设置box-sizing为border-box 019
2.2.3 设置移动端的特殊样式 021
2.3 分辨率和设备像素比 022
2.3.1 分辨率 022
2.3.2 设备像素比 023
2.4 二倍图 023
2.4.1 什么是二倍图 023
2.4.2 背景图片的缩放 024
2.4.3 实现背景图片的二倍图 027
2.5 SVG矢量图 027
2.5.1 什么是SVG 028
2.5.2 标签和样式 028
2.5.3 从外部引入SVG文件 029
本章小结 031
课后练习 031
第3章 移动Web开发基础（下） 033
3.1 HTML5常用API 033
3.1.1 检测网络连接 033
3.1.2 全屏操作 035
3.1.3 文件读取 037
3.1.4 地理定位 041
3.1.5 拖曳 052
3.1.6 Web存储 055
3.1.7 播放视频和音频 059
3.2 移动端常用事件 065
3.2.1 touch事件概述 065
3.2.2 touch事件实现轮播图效果 067
3.2.3 模拟移动端单击事件 071
3.3 移动端常用插件 072
3.3.1 Fastclick插件的使用 072
3.3.2 利用Fastclick处理点透事件 073
3.3.3 iScroll插件的使用 075
3.3.4 Swipe插件的使用 077
3.3.5 Swiper插件的使用 079
本章小结 081
课后练习 081
第4章 移动端页面布局 083
4.1 移动端页面常用布局 083
4.2 流式布局 084
4.3 弹性盒布局 086
4.3.1 什么是弹性盒布局 086
4.3.2 弹性盒布局常用属性 087
4.4 媒体查询 091
4.4.1 什么是媒体查询 091
4.4.2 响应式布局容器 091
4.5 Rem适配布局 093
4.5.1 rem单位 093
4.5.2 通过媒体查询和rem单位实现元素大小动态变化 094
4.6 Sass 095
4.6.1 什么是Sass 095
4.6.2 在Node.js环境中使用Sass 096
4.6.3 Sass语法格式 097
4.6.4 Sass编译 098
4.6.5 Sass嵌套 098
4.6.6 Sass运算 099
4.7 Less 100
4.7.1 什么是Less 100
4.7.2 Less语法格式 100
4.7.3 Less编译 101
4.8 Bootstrap响应式布局 102
4.8.1 下载Bootstrap 102
4.8.2 预编译的Bootstrap 103
4.8.3 Bootstrap源文件 104
4.8.4 使用Bootstrap CDN 104
4.8.5 Bootstrap初体验 105
本章小结 106
课后练习 107
第5章 Bootstrap栅格系统 108
5.1 栅格系统简介 108
5.1.1 栅格系统概述 108
5.1.2 动手实现简单版栅格系统 109
5.2 Bootstrap布局容器 111
5.2.1 布局容器 111
5.2.2 .container-fluid类 112
5.2.3 .container类 113
5.3 栅格系统的基本使用 114
5.3.1 栅格系统的行和列 114
5.3.2 学生信息表格案例 115
5.4 栅格系统的屏幕适配 117
5.4.1 栅格系统的类前缀 117
5.4.2 使用类前缀设置列的宽度 117
5.4.3 利用栅格系统实现导航栏效果 119
5.5 栅格系统中列的操作 121
5.5.1 栅格系统中的列嵌套 121
5.5.2 栅格系统中的列偏移 122
本章小结 124
课后练习 124
第6章 Bootstrap框架常用组件 126
6.1 组件基础 126
6.1.1 什么是组件 126
6.1.2 组件的优势 126
6.1.3 Bootstrap组件的依赖文件 127
6.2 Bootstrap常用组件 127
6.2.1 引入依赖文件 128
6.2.2 按钮 128
6.2.3 导航 130
6.2.4 面包屑导航 131
6.2.5 分页 132
6.2.6 列表 133
6.2.7 表单 134
6.2.8 按钮组 135
6.2.9 输入框组 136
6.3 Bootstrap实现菜单功能 137
6.3.1 引入依赖文件 137
6.3.2 折叠菜单 138
6.3.3 下拉菜单 139
6.4 Bootstrap实现轮播图功能 140
6.4.1 什么是轮播图 141
6.4.2 轮播图的功能分析 141
6.4.3 轮播图活动信息 142
6.4.4 轮播图左侧箭头 143
6.4.5 轮播图右侧箭头 143
6.4.6 轮播图指示器 144
本章小结 144
课后练习 144
第7章 Bootstrap常用布局样式 146
7.1 内容布局 146
7.1.1 标题类 146
7.1.2 文本类 149
7.1.3 列表类 154
7.2 代码和图文布局 157
7.2.1 代码样式 157
7.2.2 图文样式 158
7.3 表格布局 163
7.4 辅助样式 165
7.4.1 边框样式 165
7.4.2 背景颜色 166
本章小结 167
课后练习 168
第8章 综合项目——潮流穿搭网站 169
8.1 项目分析 169
8.1.1 项目展示 169
8.1.2 创建项目目录结构 172
8.2 前期准备 172
8.2.1 设置元素间距 172
8.2.2 设置字体图标 173
8.2.3 页面初始化 174
8.2.4 页面结构 174
8.3 代码讲解 175
8.3.1 导航栏模块 175
8.3.2 轮播图模块 178
8.3.3 潮流穿搭技巧模块 180
8.3.4 潮流穿搭风格模块 182
8.3.5 潮流穿搭新闻模块 184
8.3.6 合作伙伴和著作权声明模块 185
本章小结 187
课后练习 187