Bootstrap前端开发（全案例微课版）

第1章 快速进入Bootstrap世界     001
1.1 认识 Bootstrap    002
1.1.1 Bootstrap 的由来    002
1.1.2 Bootstrap 的构成模块    003
1.2 Bootstrap 的优势      004
1.3 下载 Bootstrap    005
1.4 安装 Bootstrap    006
1.4.1 本地安装    006
1.4.2 在线安装    007
1.5 Bootstrap 的在线开发工具  007
1.6 小试身手—设计轮播图效果   008
1.7 新手常见疑难问题     009
1.8 实战技能训练营   010
第2章 响应式网页设计     011
2.1 什么是响应式网页设计   012
2.2 像素和屏幕分辨率     013
2.3 视口     013
2.3.1 视口的分类和常用属性   013
2.3.2 媒体查询    014
2.4 响应式网页的布局设计   015
2.4.1 常用布局类型     015
2.4.2 布局的实现方式    015
2.4.3 响应式布局的设计与实现    016
2.5 响应式图片   016
2.5.1 使用 标签   016
2.5.2 使用 CSS 图片     017
2.6 响应式视频   018
2.7 响应式导航菜单   019
2.8 响应式表格   020
2.8.1 隐藏表格中的列    020
2.8.2 滚动表格中的列    022
2.8.3 转换表格中的列    023
2.9 新手常见疑难问题     025
2.10 实战技能训练营      025
第3章 深入掌握Bootstrap 基本架构     027
3.1 认识 Bootstrap 结构    028
3.1.1 源码版 Bootstrap文件结构    028
3.1.2 编译版 Bootstrap 文件结构    029
3.2 布局基础  029
3.2.1 布局容器    029
3.2.2 响应断点    031
3.2.3 z-index     031
3.3 网格系统  031
3.3.1 网格选项    031
3.3.2 自动布局列      032
3.3.3 响应类     035
3.3.4 重排序     037
3.3.5 列嵌套     040
3.4 布局工具类   041
3.4.1 display 块属性定义   041
3.4.2 Flexbox 选项      041
3.4.3 外边距和内边距    041
3.4.4 切换显示和隐藏    041
3.5 设计 QQ 登录界面     041
3.6 开发电商网站特效     044
3.7 新手常见疑难问题     046
3.8 实战技能训练营   046
第4 章 精通页面排版     048
4.1 页面排版的初始化     049
4.2 优化页面排版    050
4.2.1 标题   050
4.2.2 段落   053
4.2.3 强调   054
4.2.4 缩略语     055
4.2.5 引用   055
4.3 显示代码  056
4.3.1 行内代码    056
4.3.2 多行代码块      057
4.4 响应式图片   057
4.4.1 图像的同步缩放    057
4.4.2 图像缩略图      058
4.4.3 图像对齐方式     058
4.5 优化表格的样式   059
4.5.1 表格默认风格     059
4.5.2 为表格设计个性化风格   060
4.6 设计商品管理系统页面   063
4.7 新手常见疑难问题     065
4.8 实战技能训练营   065
第5 章 响应式新布局—弹性盒子     066
5.1 定义弹性盒子    067
5.2 排列方向  068
5.2.1 水平方向排列     068
5.2.2 垂直方向排列     069
5.3 内容排列布局    069
5.4 项目对齐布局    070
5.5 自动对齐布局    071
5.6 自动相等布局    072
5.7 等宽变换布局    073
5.8 自动浮动布局    074
5.8.1 水平方向浮动布局   074
5.8.2 垂直方向浮动布局   074
5.9 弹性布局—包裹     075
5.10 排列顺序布局    076
5.11 对齐内容布局    077
5.12 新手常见疑难问题    078
5.13 实战技能训练营      078
第6 章 核心框架—CSS 通用样式    079
6.1 文本处理  080
6.1.1 文本对齐    080
6.1.2 文本换行    081
6.1.3 转换大小写      082
6.1.4 粗细和斜体      083
6.1.5 其他文本样式类    083
6.2 颜色样式  084
6.2.1 文本颜色    084
6.2.2 链接颜色    085
6.2.3 背景颜色    086
6.3 边框样式  087
6.3.1 添加边框    087
6.3.2 边框颜色    088
6.3.3 圆角边框    089
6.4 宽度和高度   090
6.4.1 相对于父元素     090
6.4.2 相对于视口      092
6.5 边距     093
6.5.1 边距的定义      093
6.5.2 响应式边距      094
6.6 浮动样式   094
6.6.1 实现浮动样式     094
6.6.2 响应式浮动样式    095
6.7 display 属性   096
6.7.1 隐藏或显示元素    096
6.7.2 响应式地隐藏或显示元素    097
6.8 嵌入网页元素    098
6.9 内容溢出   099
6.10 定位网页元素    099
6.11 阴影效果    101
6.12 新手常见疑难问题    101
6.13 实战技能训练营      102
第7 章 认识CSS 组件     103
7.1 正确使用CSS 组件    104
7.2 按钮     105
7.2.1 定义按钮    105
7.2.2 设计按钮风格     106
7.3 按钮组    108
7.3.1 定义按钮组      109
7.3.2 定义按钮组工具栏   109
7.3.3 设计按钮组布局和样式   110
7.4 下拉菜单  112
7.4.1 定义下拉菜单     112
7.4.2 设计下拉按钮的样式    114
7.4.3 设计下拉菜单的样式    115
7.5 导航组件   118
7.5.1 定义导航    118
7.5.2 设计导航的布局    119
7.5.3 设计导航的风格    121
7.5.4 设计导航选项卡    124
7.6 超大屏幕   126
7.6.1 定义超大屏幕     126
7.6.2 设计风格    126
7.7 新手常见疑难问题     127
7.8 实战技能训练营   127
第8 章 精通CSS 组件     129
8.1 徽章     130
8.1.1 定义徽章    130
8.1.2 设置颜色    131
8.1.3 椭圆形徽章      132
8.1.4 链接徽章    132
8.2 警告框    133
8.2.1 定义警告框      133
8.2.2 添加链接颜色     134
8.2.3 额外附加内容     135
8.2.4 关闭警告框      135
8.3 媒体对象  136
8.3.1 媒体版式    136
8.3.2 媒体嵌套    137
8.3.3 对齐方式    137
8.3.4 排列顺序    138
8.3.5 媒体列表    139
8.4 进度条    140
8.4.1 定义进度条      140
8.4.2 设计进度条样式    140
8.4.3 设计进度条风格    142
8.5 导航栏    143
8.5.1 定义导航栏      144
8.5.2 定位导航栏      147
8.5.3 设计导航栏的颜色   148
8.6 新手常见疑难问题     149
8.7 实战技能训练营   150
第9 章 高级的CSS 组件    151
9.1 表单     152
9.1.1 定义表单控件     152
9.1.2 设计单选按钮/ 复选框布局和样式    154
9.1.3 表单布局风格     156
9.1.4 帮助文本    158
9.1.5 禁用表单    159
9.2 列表组    160
9.2.1 定义列表组      160
9.2.2 设计列表组的风格样式   160
9.2.3 定制内容    162
9.3 面包屑    163
9.3.1 定义面包屑      163
9.3.2 设计分隔符      164
9.4 分页效果   165
9.4.1 定义分页    165
9.4.2 使用图标    166
9.4.3 设计分页风格     166
9.5 新手常见疑难问题     169
9.6 实战技能训练营   170
第10 章 玩转卡片和旋转器     171
10.1 卡片内容   172
10.1.1 卡片的标题、主体、文本和超链接   172
10.1.2 卡片中的图片     172
10.1.3 卡片的列表组     173
10.1.4 卡片的页眉和页脚   173
10.2 控制卡片的宽度      174
10.2.1 使用网格系统控制卡片的宽度     174
10.2.2 使用宽度类控制卡片的宽度   175
10.2.3 使用CSS 样式控制卡片的宽度     175
10.3 卡片中文本的对齐方式  176
10.4 卡片中添加导航      176
10.5 设计卡片的风格      178
10.5.1 设置卡片的背景颜色    178
10.5.2 设置背景图像     178
10.5.3 设置卡片的边框颜色    179
10.5.4 设计卡片的样式    180
10.6 卡片排版   180
10.7 旋转器   183
10.7.1 定义旋转器      183
10.7.2 设计旋转器风格    183
10.7.3 设置旋转器的对齐方式     185
10.7.4 按钮旋转器      186
10.8 新手常见疑难问题    187
10.9 实战技能训练营      188
第11 章 认识JavaScript 插件    189
11.1 插件概述    190
11.1.1 插件分类    190
11.1.2 安装插件    190
11.1.3 调用插件    191
11.1.4 事件      192
11.2 模态框   192
11.2.1 定义模态框      192
11.2.2 模态框布局和样式   194
11.2.3 调用模态框      197
11.2.4 添加用户行为     198
11.3 下拉菜单    199
11.3.1 调用下拉菜单     200
11.3.2 设置下拉菜单     201
11.3.3 添加用户行为     202
11.4 弹窗     203
11.4.1 定义弹窗    203
11.4.2 弹窗方向    204
11.4.3 调用弹窗    205
11.4.4 添加用户行为     207
11.5 工具提示    208
11.5.1 定义工具提示     209
11.5.2 工具提示方向     210
11.5.3 调用工具提示     210
11.5.4 添加用户行为     212
11.6 标签页   213
11.6.1 定义标签页      214
11.6.2 调用标签页      214
11.6.3 添加用户行为     215
11.7 新手常见疑难问题    217
11.8 实战技能训练营      217
第12 章 精通JavaScript 插件    218
12.1 按钮     219
12.2 警告框   221
12.2.1 关闭警告框      222
12.2.2 添加用户行为     223
12.3 折叠     224
12.3.1 定义折叠    224
12.3.2 控制多目标      225
12.3.3 设计手风琴      226
12.3.4 调用折叠    227
12.3.5 添加用户行为     227
12.4 轮播     228
12.4.1 定义轮播    228
12.4.2 设计轮播风格     230
12.4.3 调用轮播    231
12.4.4 添加用户行为     233
12.5 滚动监听   234
12.5.1 定义滚动监听     234
12.5.2 调用滚动监听     238
12.5.3 添加用户行为     239
12.6 新手常见疑难问题    240
12.7 实战技能训练营      240
第13 章 项目实训1—开发企业门户网站    241
13.1 系统分析   242
13.2 系统设计   242
13.2.1 系统目标    242
13.2.2 系统功能结构     242
13.2.3 文件夹组织结构    242
13.3 网页预览   243
13.3.1 网站首页效果     243
13.3.2 产品分类效果     243
13.3.3 产品介绍效果     244
13.3.4 新闻分类效果     244
13.3.5 详细新闻页面     244
13.4 项目代码实现    244
13.4.1 网站首页页面代码   244
13.4.2 图片动态效果代码   248
13.4.3 公司简介页面代码   248
13.4.4 产品介绍页面代码   249
13.4.5 新闻中心页面代码   251
13.4.6 联系我们页面代码   252
13.5 项目总结   253
第14 章 项目实训2—开发游戏中心网站    254
14.1 网站概述   255
14.1.1 网站文件的结构    255
14.1.2 排版架构    255
14.1.3 设计准备    255
14.2 项目代码实现    256
14.2.1 设计游戏中心网站的首页    256
14.2.2 设计游戏列表页面   262
14.2.3 设计游戏评论页面   263
14.2.4 设计游戏新闻页面   264
14.2.5 设计游戏博客页面   264
14.2.6 设计联系我们页面   266
第15 章 项目实训3—开发连锁咖啡网站    267
15.1 网站概述   268
15.1.1 网站结构    268
15.1.2 设计效果    268
15.1.3 设计准备    269
15.2 设计首页布局    269
15.3 设计可切换导航      270
15.4 主体内容   273
15.4.1 设计轮播广告区    273
15.4.2 设计产品推荐区    274
15.4.3 设计登录注册和Logo   275
15.4.4 设计特色展示区    275
15.4.5 设计产品生产流程区    276
15.5 设计底部隐藏导航    277
第16 章 项目实训4—开发网上商城式网站     279
16.1 系统分析   280
16.2 系统设计   280
16.2.1 系统目标    280
16.2.2 系统功能结构     280
16.2.3 文件夹组织结构    280
16.3 网页预览   281
16.3.1 网站首页效果     281
16.3.2 关于我们效果     281
16.3.3 商品展示效果     281
16.3.4 商品详情效果     282
16.3.5 购物车效果      282
16.3.6 品牌故事效果     282
16.3.7 用户登录效果     282
16.3.8 用户注册效果     282
16.4 项目代码实现    282
16.4.1 首页页面代码     282
16.4.2 动态效果代码     293
16.4.3 购物车代码      294
16.4.4 登录页面代码     296
16.4.5 商品展示页面代码   296
16.4.6 联系我们页面代码   301
16.5 项目总结   302
第17 章 项目实训5—开发房产企业网站    303
17.1 网站概述   304
17.1.1 网站结构    304
17.1.2 设计效果    304
17.1.3 设计准备    305
17.2 设计主页   305
17.2.1 主页布局    305
17.2.2 设计导航条      306
17.2.3 设计轮播广告     308
17.2.4 设计功能区      309
17.2.5 设计特色展示     310
17.2.6 设计脚注    313
17.3 设计侧边导航栏      314
17.4 设计登录页     316