响应式Web应用前端开发教程（活页式）

目 录
模块1 项目准备阶段
第1章 技术简介
1.1 jQuery简介
1.2 Bootstrap简介
1.3 集成开发环境
第2章 Bootstrap技术资料
2.1 Bootstrap布局（Layout）
2.1.1 容器（Container）
2.1.2 栅格（Grid）
2.2 公共样式（Utilities）
2.2.1 边框（Border）
2.2.2 浮动清除（Clearfix）
2.2.3 关闭图标（Close icon）
2.2.4 颜色（Colors）
2.2.5 Display 属性（Display）
2.2.6 内嵌（Embed）
2.2.7 弹性盒（Flex）
2.2.8 浮动（Float）
2.2.9 图片替换（Image replacement）
2.2.10 交互（Interactions）
2.2.11 溢出（Overflow）
2.2.12 定位（Position）
2.2.13 读屏器（Screen readers）
2.2.14 阴影（Shadows）
2.2.15 尺寸（Sizing）
2.2.16 间距（Spacing）
2.2.17 延展链接（Stretched link）
2.2.18 文本（Text）
2.2.19 纵向对齐（Vertical alignment）
2.2.20 可见性（Visibility）
2.3 内容（Content）
2.3.1 图片（Image）
2.3.2 表格（Table）
2.3.3 插图（Figure）
2.4 Bootstrap组件（Components）
2.4.1 警告框（Alerts）
2.4.2 徽章（Badge）
2.4.3 面包屑导航（Breadcrumb）
2.4.4 按钮（Button）
2.4.5 按钮组（Button group）
2.4.6 卡片（Card）
2.4.7 轮播器（Carousel）
2.4.8 折叠面板（Collapse）
2.4.9 下拉菜单（Dropdowns）
2.4.10 表单（Form）
2.4.11 输入组（Input group）
2.4.12 巨幕（Jumbotron）
2.4.13 列表组（List group）
2.4.14 媒体对象（Media object）
2.4.15 模态框（Modal）
2.4.16 导航（Navs）
2.4.17 导航栏（Navbar）
2.4.18 分页（Pagination）
2.4.19 弹出框（Popover）
2.4.20 进度条（Progress）
2.4.21 加载动画（Spinners）
2.4.22 信息提示框（Toasts）
2.4.23 工具提示框（Tooltip）
2.5 图标（icon）
2.5.1 方式 1：＜img＞标签使用
2.5.2 方式 2：Web 字体使用
2.5.3 方式 3：SVG 文档片段使用
第3章 jQuery技术资料
3.1 jQuery核心方法
3.2 jQuery选择器
3.2.1 基本选择器
3.2.2 层次选择器
3.2.3 过滤选择器
3.2.4 属性选择器
3.2.5 表单选择器
3.3 jQuery操作DOM
3.3.1 读取和设置 HTML 元素
3.3.2 向 HTML 元素添加内容
3.3.3 删除 HTML 元素及其属性
3.3.4 复制和替换 HTML 元素
3.3.5 遍历 HTML 元素
3.3.6 操作 DOM 样式
3.4 jQuery 事件处理
3.4.1 事件管理方法
3.4.2 事件处理方法
3.5 jQuery动画
3.5.1 显示和隐藏
3.5.2 自定义动画
3.6 jQuery 对 Ajax 的支持
3.6.1 底层接口
3.6.2 快捷方法
3.6.3 辅助方法
3.6.4 事件方法
3.7 杂项
模块2 Bootstrap静态网站制作
第4章 客户界面响应式页面制作
4.1 任务1：Bootstrap4的安装与配置
4.1.1 步骤 1：下载 Bootstrap4.6 库
4.1.2 步骤 2：引用 Bootstrap 并测试
4.1.3 步骤 3：下载引用 jQuery 库
4.2 任务2：实现页面结构
4.2.1 步骤 1：页面头部设置
4.2.2 步骤 2：配置响应式容器和页脚
4.2.3 步骤 3：页眉导航栏的实现
4.2.4 步骤 4：站内搜索框的实现
4.2.5 步骤 5：导航内容的实现
4.2.6 步骤 6：实现导航内容的响应式折叠展开效果
4.3 任务3：实现首页主体部分
4.3.1 步骤 1：添加首页屏广告
4.3.2 步骤 2：添加首页“观鸟召集”中的图文单元
4.3.3 步骤 3：首页“观鸟召集”版块响应式布局
4.3.4 步骤 4：“观鸟召集”版块美化
4.3.5 步骤 5：添加“热门线路”版块中的图文单元
4.3.6 步骤 6：为“热门线路”添加“瀑布流”效果
4.3.7 步骤 7：为首页屏广告添加轮播器
4.4 任务4：实现“线路展示”页面
4.4.1 步骤 1：实现页面主体部分响应式布局
4.4.2 步骤 2：实现“线路区划导航栏”的响应式布局
4.4.3 步骤 3：实现“线路区划导航栏”页内导航功能
4.4.4 步骤 4：为“线路展示”版块添加标题
4.5 任务5：实现“线路详情”页面
4.5.1 步骤 1：实现页面中的“面包屑”导航
4.5.2 步骤 2：实现页面“线路详情”版块
4.5.3 步骤 3：实现页面“选项卡”版块导航功能
4.5.4 步骤 4：实现“行程”时间线
4.5.5 步骤 5：实现“评价”内容
任务延展
本章高保真图
第5章 管理员界面响应式页面制作
5.1 任务 1：实现“线路维护”页面导航部分
5.1.1 步骤 1：实现页面结构
5.1.2 步骤 2：实现页眉导航
5.1.3 步骤 3：实现侧边栏导航
5.2 任务2：实现“线路维护”页面内容部分
5.2.1 步骤 1：添加内容部分顶部
5.2.2 步骤 2：添加内容部分底部
5.2.3 步骤 3：实现数据表格
5.2.4 步骤 4：实现删除确认
5.3 任务3：“定制线路”页面实现
5.3.1 步骤 1：实现“基本信息”内容窗行控件
5.3.2 步骤 2：实现“基本信息”内容窗第二行控件
5.3.3 步骤 3：实现添加“行程”内容窗
5.3.4 步骤 4：实现添加“团费”内容窗
5.3.5 步骤 5：实现上传“图片”内容窗
任务延展
本章高保真图
模块3 jQuery交互效果优化
第6章 导航的完善与优化
6.1 任务1：用户界面导航栏“联系我们”处弹出二维码
6.1.1 步骤 1：jQuery 编程起步
6.1.2 步骤 2：为“联系我们”添加二维码图片弹出框
6.2 任务2：用户界面菜单活跃状态跟踪
6.2.1 步骤 1：设置导航目标
6.2.2 步骤 2：确定当前页面
6.2.3 步骤 3：动态设置导航条目“活跃”状态
6.3 任务3：管理系统“侧边栏导航”中横向展开子菜单
6.3.1 步骤 1：添加侧边栏“资源管理”导航模块
6.3.2 步骤 2：横向展开的子菜单内容制作
6.3.3 步骤 3：采用弹出框实现横向展开子菜单
6.4 任务4：管理系统侧边导航栏活跃状态跟踪
6.4.1 步骤 1：获取当前打开的文件所在的子目录
6.4.2 步骤 2：设置活跃状态的侧边栏导航子模块为“展开”
6.4.3 步骤 3：网页加载时动态设置“活跃”导航子模块图标
6.4.4 步骤 4：用户切换导航子模块时切换图标
任务延展
本章高保真图
第7章 用户数据交互的完善与优化
7.1 任务一：“定制线路”选项卡的动态启用
7.1.1 步骤 1：“行程”选项的动态启用
7.1.2 步骤 2：任意选项内容的动态启用
7.2 任务 2：“行程”编辑条目数的动态生成
7.2.1 步骤 1：获取行程天数
7.2.2 步骤 2：动态添加日程编辑卡片
7.2.3 步骤 3：动态设置日程编辑卡片的标题和 id 属性值（方法 1）
7.2.4 步骤 4：动态设置日程编辑卡片的标题和 id 属性值（方法 2）
7.2.5 步骤 5：设置折叠面板的状态，添加图标
7.3 任务3：“基本信息”用户输入合法性检查
7.3.1 步骤 1：设置表单控件验证模式
7.3.2 步骤 2：“交通方式”验证的实现
7.3.3 步骤 3：单击“下一步”按钮需通过验证才启用下一个选项
7.4 任务 4：添加、删除、撤销删除“团次”编辑条目的实现
7.4.1 步骤 1：添加“团次”编辑条目
7.4.2 步骤 2：全选与取消全选的实现
7.4.3 步骤 3：删除编辑条目与撤销删除
7.5 任务 5：团费编辑条目恢复及警告框动画效果制作
7.5.1 步骤 1：记录删除前被删除条目的位置
7.5.2 步骤 2：以淡出的动画效果原位恢复被删除的条目
7.5.3 步骤 3：警告框“飞入”动画的实现
7.5.4 步骤 4：自定义警告框的关闭
任务延展
本章高保真图
模块4 动态网站搭建
第8章 Ajax前后端数据异步交互
8.1 任务 1：管理员界面侧边栏导航的异步加载
8.1.1 步骤 1：将侧边栏导航单独形成一个文件
8.1.2 步骤 2：异步加载侧边栏导航文件
8.2 任务 2：酒店信息的异步读取
8.2.1 步骤 1：使用 mock.js 生成模拟酒店数据
8.2.2 步骤 2：编写异步获取酒店信息的 Ajax 请求
8.2.3 步骤 3：配置模拟后台路由，成功加载酒店数据
8.2.4 步骤 4：显示提示信息
8.3 任务 3：酒店信息的分页显示
8.3.1 步骤 1：实现酒店信息分页页码的动态添加
8.3.2 步骤 2：获取指定页码的数据
8.3.3 步骤 3：实现分页显示功能
8.4 任务 4：修改酒店信息
8.4.1 步骤 1：实现修改信息模态框
8.4.2 步骤 2：将指定记录的信息填写到表单控件中
8.4.3 步骤 3：发送异步请求，完成信息的修改
8.4.4 步骤 4：防止重复提交 Ajax 请求
任务延展
本章高保真图
参考文献