響應(yīng)式Web應(yīng)用前端開發(fā)教程（活頁式）

目 錄
模塊1 項(xiàng)目準(zhǔn)備階段
第1章 技術(shù)簡(jiǎn)介
1.1 jQuery簡(jiǎn)介
1.2 Bootstrap簡(jiǎn)介
1.3 集成開發(fā)環(huán)境
第2章 Bootstrap技術(shù)資料
2.1 Bootstrap布局（Layout）
2.1.1 容器（Container）
2.1.2 柵格（Grid）
2.2 公共樣式（Utilities）
2.2.1 邊框（Border）
2.2.2 浮動(dòng)清除（Clearfix）
2.2.3 關(guān)閉圖標(biāo)（Close icon）
2.2.4 顏色（Colors）
2.2.5 Display 屬性（Display）
2.2.6 內(nèi)嵌（Embed）
2.2.7 彈性盒（Flex）
2.2.8 浮動(dòng)（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 縱向?qū)R（Vertical alignment）
2.2.20 可見性（Visibility）
2.3 內(nèi)容（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 面包屑導(dǎo)航（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 媒體對(duì)象（Media object）
2.4.15 模態(tài)框（Modal）
2.4.16 導(dǎo)航（Navs）
2.4.17 導(dǎo)航欄（Navbar）
2.4.18 分頁（Pagination）
2.4.19 彈出框（Popover）
2.4.20 進(jìn)度條（Progress）
2.4.21 加載動(dòng)畫（Spinners）
2.4.22 信息提示框（Toasts）
2.4.23 工具提示框（Tooltip）
2.5 圖標(biāo)（icon）
2.5.1 方式 1：＜img＞標(biāo)簽使用
2.5.2 方式 2：Web 字體使用
2.5.3 方式 3：SVG 文檔片段使用
第3章 jQuery技術(shù)資料
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 讀取和設(shè)置 HTML 元素
3.3.2 向 HTML 元素添加內(nèi)容
3.3.3 刪除 HTML 元素及其屬性
3.3.4 復(fù)制和替換 HTML 元素
3.3.5 遍歷 HTML 元素
3.3.6 操作 DOM 樣式
3.4 jQuery 事件處理
3.4.1 事件管理方法
3.4.2 事件處理方法
3.5 jQuery動(dòng)畫
3.5.1 顯示和隱藏
3.5.2 自定義動(dòng)畫
3.6 jQuery 對(duì) Ajax 的支持
3.6.1 底層接口
3.6.2 快捷方法
3.6.3 輔助方法
3.6.4 事件方法
3.7 雜項(xiàng)
模塊2 Bootstrap靜態(tài)網(wǎng)站制作
第4章 客戶界面響應(yīng)式頁面制作
4.1 任務(wù)1：Bootstrap4的安裝與配置
4.1.1 步驟 1：下載 Bootstrap4.6 庫(kù)
4.1.2 步驟 2：引用 Bootstrap 并測(cè)試
4.1.3 步驟 3：下載引用 jQuery 庫(kù)
4.2 任務(wù)2：實(shí)現(xiàn)頁面結(jié)構(gòu)
4.2.1 步驟 1：頁面頭部設(shè)置
4.2.2 步驟 2：配置響應(yīng)式容器和頁腳
4.2.3 步驟 3：頁眉導(dǎo)航欄的實(shí)現(xiàn)
4.2.4 步驟 4：站內(nèi)搜索框的實(shí)現(xiàn)
4.2.5 步驟 5：導(dǎo)航內(nèi)容的實(shí)現(xiàn)
4.2.6 步驟 6：實(shí)現(xiàn)導(dǎo)航內(nèi)容的響應(yīng)式折疊展開效果
4.3 任務(wù)3：實(shí)現(xiàn)首頁主體部分
4.3.1 步驟 1：添加首頁屏廣告
4.3.2 步驟 2：添加首頁“觀鳥召集”中的圖文單元
4.3.3 步驟 3：首頁“觀鳥召集”版塊響應(yīng)式布局
4.3.4 步驟 4：“觀鳥召集”版塊美化
4.3.5 步驟 5：添加“熱門線路”版塊中的圖文單元
4.3.6 步驟 6：為“熱門線路”添加“瀑布流”效果
4.3.7 步驟 7：為首頁屏廣告添加輪播器
4.4 任務(wù)4：實(shí)現(xiàn)“線路展示”頁面
4.4.1 步驟 1：實(shí)現(xiàn)頁面主體部分響應(yīng)式布局
4.4.2 步驟 2：實(shí)現(xiàn)“線路區(qū)劃導(dǎo)航欄”的響應(yīng)式布局
4.4.3 步驟 3：實(shí)現(xiàn)“線路區(qū)劃導(dǎo)航欄”頁內(nèi)導(dǎo)航功能
4.4.4 步驟 4：為“線路展示”版塊添加標(biāo)題
4.5 任務(wù)5：實(shí)現(xiàn)“線路詳情”頁面
4.5.1 步驟 1：實(shí)現(xiàn)頁面中的“面包屑”導(dǎo)航
4.5.2 步驟 2：實(shí)現(xiàn)頁面“線路詳情”版塊
4.5.3 步驟 3：實(shí)現(xiàn)頁面“選項(xiàng)卡”版塊導(dǎo)航功能
4.5.4 步驟 4：實(shí)現(xiàn)“行程”時(shí)間線
4.5.5 步驟 5：實(shí)現(xiàn)“評(píng)價(jià)”內(nèi)容
任務(wù)延展
本章高保真圖
第5章 管理員界面響應(yīng)式頁面制作
5.1 任務(wù) 1：實(shí)現(xiàn)“線路維護(hù)”頁面導(dǎo)航部分
5.1.1 步驟 1：實(shí)現(xiàn)頁面結(jié)構(gòu)
5.1.2 步驟 2：實(shí)現(xiàn)頁眉導(dǎo)航
5.1.3 步驟 3：實(shí)現(xiàn)側(cè)邊欄導(dǎo)航
5.2 任務(wù)2：實(shí)現(xiàn)“線路維護(hù)”頁面內(nèi)容部分
5.2.1 步驟 1：添加內(nèi)容部分頂部
5.2.2 步驟 2：添加內(nèi)容部分底部
5.2.3 步驟 3：實(shí)現(xiàn)數(shù)據(jù)表格
5.2.4 步驟 4：實(shí)現(xiàn)刪除確認(rèn)
5.3 任務(wù)3：“定制線路”頁面實(shí)現(xiàn)
5.3.1 步驟 1：實(shí)現(xiàn)“基本信息”內(nèi)容窗行控件
5.3.2 步驟 2：實(shí)現(xiàn)“基本信息”內(nèi)容窗第二行控件
5.3.3 步驟 3：實(shí)現(xiàn)添加“行程”內(nèi)容窗
5.3.4 步驟 4：實(shí)現(xiàn)添加“團(tuán)費(fèi)”內(nèi)容窗
5.3.5 步驟 5：實(shí)現(xiàn)上傳“圖片”內(nèi)容窗
任務(wù)延展
本章高保真圖
模塊3 jQuery交互效果優(yōu)化
第6章 導(dǎo)航的完善與優(yōu)化
6.1 任務(wù)1：用戶界面導(dǎo)航欄“聯(lián)系我們”處彈出二維碼
6.1.1 步驟 1：jQuery 編程起步
6.1.2 步驟 2：為“聯(lián)系我們”添加二維碼圖片彈出框
6.2 任務(wù)2：用戶界面菜單活躍狀態(tài)跟蹤
6.2.1 步驟 1：設(shè)置導(dǎo)航目標(biāo)
6.2.2 步驟 2：確定當(dāng)前頁面
6.2.3 步驟 3：動(dòng)態(tài)設(shè)置導(dǎo)航條目“活躍”狀態(tài)
6.3 任務(wù)3：管理系統(tǒng)“側(cè)邊欄導(dǎo)航”中橫向展開子菜單
6.3.1 步驟 1：添加側(cè)邊欄“資源管理”導(dǎo)航模塊
6.3.2 步驟 2：橫向展開的子菜單內(nèi)容制作
6.3.3 步驟 3：采用彈出框?qū)崿F(xiàn)橫向展開子菜單
6.4 任務(wù)4：管理系統(tǒng)側(cè)邊導(dǎo)航欄活躍狀態(tài)跟蹤
6.4.1 步驟 1：獲取當(dāng)前打開的文件所在的子目錄
6.4.2 步驟 2：設(shè)置活躍狀態(tài)的側(cè)邊欄導(dǎo)航子模塊為“展開”
6.4.3 步驟 3：網(wǎng)頁加載時(shí)動(dòng)態(tài)設(shè)置“活躍”導(dǎo)航子模塊圖標(biāo)
6.4.4 步驟 4：用戶切換導(dǎo)航子模塊時(shí)切換圖標(biāo)
任務(wù)延展
本章高保真圖
第7章 用戶數(shù)據(jù)交互的完善與優(yōu)化
7.1 任務(wù)一：“定制線路”選項(xiàng)卡的動(dòng)態(tài)啟用
7.1.1 步驟 1：“行程”選項(xiàng)的動(dòng)態(tài)啟用
7.1.2 步驟 2：任意選項(xiàng)內(nèi)容的動(dòng)態(tài)啟用
7.2 任務(wù) 2：“行程”編輯條目數(shù)的動(dòng)態(tài)生成
7.2.1 步驟 1：獲取行程天數(shù)
7.2.2 步驟 2：動(dòng)態(tài)添加日程編輯卡片
7.2.3 步驟 3：動(dòng)態(tài)設(shè)置日程編輯卡片的標(biāo)題和 id 屬性值（方法 1）
7.2.4 步驟 4：動(dòng)態(tài)設(shè)置日程編輯卡片的標(biāo)題和 id 屬性值（方法 2）
7.2.5 步驟 5：設(shè)置折疊面板的狀態(tài)，添加圖標(biāo)
7.3 任務(wù)3：“基本信息”用戶輸入合法性檢查
7.3.1 步驟 1：設(shè)置表單控件驗(yàn)證模式
7.3.2 步驟 2：“交通方式”驗(yàn)證的實(shí)現(xiàn)
7.3.3 步驟 3：?jiǎn)螕簟跋乱徊健卑粹o需通過驗(yàn)證才啟用下一個(gè)選項(xiàng)
7.4 任務(wù) 4：添加、刪除、撤銷刪除“團(tuán)次”編輯條目的實(shí)現(xiàn)
7.4.1 步驟 1：添加“團(tuán)次”編輯條目
7.4.2 步驟 2：全選與取消全選的實(shí)現(xiàn)
7.4.3 步驟 3：刪除編輯條目與撤銷刪除
7.5 任務(wù) 5：團(tuán)費(fèi)編輯條目恢復(fù)及警告框動(dòng)畫效果制作
7.5.1 步驟 1：記錄刪除前被刪除條目的位置
7.5.2 步驟 2：以淡出的動(dòng)畫效果原位恢復(fù)被刪除的條目
7.5.3 步驟 3：警告框“飛入”動(dòng)畫的實(shí)現(xiàn)
7.5.4 步驟 4：自定義警告框的關(guān)閉
任務(wù)延展
本章高保真圖
模塊4 動(dòng)態(tài)網(wǎng)站搭建
第8章 Ajax前后端數(shù)據(jù)異步交互
8.1 任務(wù) 1：管理員界面?zhèn)冗厵趯?dǎo)航的異步加載
8.1.1 步驟 1：將側(cè)邊欄導(dǎo)航單獨(dú)形成一個(gè)文件
8.1.2 步驟 2：異步加載側(cè)邊欄導(dǎo)航文件
8.2 任務(wù) 2：酒店信息的異步讀取
8.2.1 步驟 1：使用 mock.js 生成模擬酒店數(shù)據(jù)
8.2.2 步驟 2：編寫異步獲取酒店信息的 Ajax 請(qǐng)求
8.2.3 步驟 3：配置模擬后臺(tái)路由，成功加載酒店數(shù)據(jù)
8.2.4 步驟 4：顯示提示信息
8.3 任務(wù) 3：酒店信息的分頁顯示
8.3.1 步驟 1：實(shí)現(xiàn)酒店信息分頁頁碼的動(dòng)態(tài)添加
8.3.2 步驟 2：獲取指定頁碼的數(shù)據(jù)
8.3.3 步驟 3：實(shí)現(xiàn)分頁顯示功能
8.4 任務(wù) 4：修改酒店信息
8.4.1 步驟 1：實(shí)現(xiàn)修改信息模態(tài)框
8.4.2 步驟 2：將指定記錄的信息填寫到表單控件中
8.4.3 步驟 3：發(fā)送異步請(qǐng)求，完成信息的修改
8.4.4 步驟 4：防止重復(fù)提交 Ajax 請(qǐng)求
任務(wù)延展
本章高保真圖
參考文獻(xiàn)