项目1 弹性盒布局……………………………………1
任务1.1 认识flex弹性盒布局…………………………1
1.1.1 为什么使用弹性布局 ………………………………1
1.1.2 初识flex 弹性布局 …………………6
任务1.2 使用弹性盒容器的属性整体控制子元素…………………9
1.2.1 flex-direction 设置主轴及其方向…………………9
1.2.2 flex- wrap 设置换行方式 ……………………………12
1.2.3 flex-flow设置主轴方向和换行方式 ………………………16
1.2.4 justify-content 设置主轴元素的排列方式 ………………16
1.2.5 align - items设置侧轴(交叉轴)元素的排列方式………………18
1.2.6 align -content多行元素在侧轴(交叉轴)的排列方式 ……………19
任务1.3 使用弹性子元素的属性控制个别子元素 ……………22
1.3.1 align -self设置子元素在侧轴(交叉轴)的对齐方式…………………23
1.3.2 flex-grow设置子元素主轴放大比例……………………23
1.3.3 flex- shrink 设置子元素主轴缩小比例 ……………………29
1.3.4 flex-basis 设置子元素主轴的基准尺寸 ………………30
1.3.5 flex综合属性设置子元素空间分配…………………………31
1.3.6 order设置子元素的顺序 …………………………33
项目评价表 ……………………………37
项目小结 ………………………………37
项目2 响应式页面设计 ………………………38
任务2.1 初识响应式设计和媒体查询 ……………………38
2.1.1 响应式设计 ……………………………38
2.1.2 媒体类型………………………………39
2.1.3 媒体查询……………………………41
2.1.4 媒体特性…………………………42
2.1.5 引入方式…………………………43
任务2.2 利用媒体查询实现响应式 ……………………44
任务2.3 应用弹性盒与响应式设计页面 ………………50
项目评价表 …………………………55
项目小结 ……………………………56
项目3 Bootstrap布局 ………………………57
任务3.1 初识 Bootstrap ……………………57
3.1.1 下载、使用Bootstrap ……………………………57
3.1.2 第一个 Bootstrap 示例 …………………………59
3.1.3 认识视口…………………………………59
任务3.2 使用容器…………………………………63
任务3.3 使用栅格系统进行页面布局 ……………67
3.3.1 引入栅格系统 …………………………68
3.3.2 栅格参数……………………………………70
3.3.3 列的自动布局 …………………………………71
3.3.4 多种屏幕情况栅格的使用……………………………73
3.3.5 栅格的对齐、排列与偏移………………………76
3.3.6 列嵌套……………………………………80
项目评价表 ………………………………83
项目小结 ……………………………………………………84
项目4 Bootstrap 内容 ………………………85
任务4.1 应用 Bootstrap排版 …………………85
4.1.1 全局设置………………………………………85
4.1.2 标题 …………………………………………86
4.1.3 文本类与文本元素 …………………………………………88
4.1.4 文本实用程序 ……………………………………………90
4.1.5 列表 ………………………………………91
任务4.2 使用 Bootstrap代码、图片和图文 ………………94
4.2.1 代码 ……………………………………………94
4.2.2 Bootstrap图片和图文…………………………96
任务4.3 使用 Bootstrap 表格………………………98
任务4.4 使用 Bootstrap按钮 ……………………103
4.4.1 按钮样式 …………………………………103
4.4.2 按钮类应用元素…………………………………103
4.4.3 轮廓按钮 ……………………………………………104
4.4.4 不同大小的按钮………………………………104
4.4.5 块级按钮 …………………………………105
4.4.6 激活和禁用的按钮……………………………105
项目评价表………………………………106
项目小结……………………………………………107
项目5 Bootstrap 公共样式 ………………………108
任务5.1 设置元素边框和颜色 ………………108
5.1.1 设置边框 ………………………………108
5.1.2 设置颜色 ………………………110
任务5.2 元素设置浮动、显示和隐藏效果……………………112
5.2.1 设置浮动和清除浮动 ……………………………112
5.2.2 应用显示和隐藏………………………………113
任务5.3 设置元素宽度、高度和间隔……………………114
5.3.1 设置宽度、高度…………………………………114
5.3.2 设置间隔 ………………………………………115
任务5.4 应用flex 弹性布局………………………118
5.4.1 启用弹性行为……………………………118
5.4.2 方向………………………………………119
5.4.3 内容对齐与内容排列 ………………………………121
5.4.4 填满 ………………………………126
5.4.5 伸缩设置 ……………………………………127
5.4.6 排序 ………………………………………128
5.4.7 自动边距(自浮动)………………………128
5.4.8 包裹 …………………………………………………129
项目评价表………………………………130
项目小结……………………………………130
项目6 Bootstrap 组件 ………………………131
任务6.1 使用按钮组和下拉菜单…………131
6.1.1 按钮组 ……………………………131
6.1.2 Bootstrap下拉菜单 ………………………………134
任务6.2 使用 Bootstrap导航、导航栏、面包屑导航…………………136
6.2.1 Bootstrap 导航………………………………137
6.2.2 Bootstrap导航栏…………………………………141
6.2.3 面包屑导航 ………………………………………147
任务6.3 使用 Bootstrap 表单、表单控件、输入框组………148
6.3.1 表单 ………………………………………………148
6.3.2 表单控件 …………………………………149
6.3.3 各种输入框组………………………………153
任务6.4 应用 Bootstrap版式 …………………159
6.4.1 广告大块屏幕(jumbotron) ………………………………159
6.4.2 列表组(list-group) ……………………………160
6.4.3 卡片(card)………………………………………………164
任务6.5 使用工具提示框 tooltip、弹出框 popover、模态框 modal ……173
6.5.1 Bootstrap提示框(tooltip)……………………173
6.5.2 Bootstrap弹出框(popover) ………………………………174
6.5.3 Bootstrap 模态框(modal)……………………………175
任务6.6 使用carousel实现轮播………………………177
任务6.7 使用scrollspy实现滚动监听………………………181
任务6.8 使用 media实现多媒体对象混排 …………………184
任务6.9 使用alert实现警告提示框 ……………………187
任务6.10 应用徽章(badge)…………………………189
任务6.11 使用 progress实现进度条 ………………191
任务6.12 应用 pagination实现分页…………………194
任务6.13 使用collapse实现折叠面板……………………195
项目评价表 ……………………………………199
项目小结…………………………………………………199
项目7 Bootstrap4 综合实战 …………………………200
任务7.1 兰花赏析页面制作 ………………200
任务7.2 茶文化页面制作 ………………………207
项目评价表………………………………………216
项目小结………………………………………216

朱翠苗，1976年10月出生，中共党员，副教授，省“青蓝工程”中青年学术带头人。编写国家规划教材2本：《HTML5+CSS3网站设计基础》《Oracle数据库技术及应用》、专著1部、省重点教材1本。指导学生获省“互联网+”创新创业大赛二等奖1项、三等奖1项，省优秀毕业设计二等奖1项，三等奖1项，省技能三等奖、省教学能力大赛三等奖，以及其他奖项多次。主持省（部）级课题7项，横向课题多项，授权专利1项，实用新型、软件著作权多项。发表核心及其他论文30余篇。