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

目 錄
模塊1 項(xiàng)目準(zhǔn)備階段
第1章 技術(shù)簡(jiǎn)介
1.1 jQuery簡(jiǎn)介
1.2 Bootstrap簡(jiǎn)介
1.3 集成開(kāi)發(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 可見(jiàn)性（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 分頁(yè)（Pagination）
2.4.19 彈出框（Popover）
2.4.20 進(jìn)度條（Progress）
2.4.21 加載動(dòng)畫(huà)（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 過(guò)濾選擇器
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)畫(huà)
3.5.1 顯示和隱藏
3.5.2 自定義動(dòng)畫(huà)
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)式頁(yè)面制作
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)頁(yè)面結(jié)構(gòu)
4.2.1 步驟 1：頁(yè)面頭部設(shè)置
4.2.2 步驟 2：配置響應(yīng)式容器和頁(yè)腳
4.2.3 步驟 3：頁(yè)眉導(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)式折疊展開(kāi)效果
4.3 任務(wù)3：實(shí)現(xiàn)首頁(yè)主體部分
4.3.1 步驟 1：添加首頁(yè)屏廣告
4.3.2 步驟 2：添加首頁(yè)“觀鳥(niǎo)召集”中的圖文單元
4.3.3 步驟 3：首頁(yè)“觀鳥(niǎo)召集”版塊響應(yīng)式布局
4.3.4 步驟 4：“觀鳥(niǎo)召集”版塊美化
4.3.5 步驟 5：添加“熱門(mén)線路”版塊中的圖文單元
4.3.6 步驟 6：為“熱門(mén)線路”添加“瀑布流”效果
4.3.7 步驟 7：為首頁(yè)屏廣告添加輪播器
4.4 任務(wù)4：實(shí)現(xiàn)“線路展示”頁(yè)面
4.4.1 步驟 1：實(shí)現(xiàn)頁(yè)面主體部分響應(yīng)式布局
4.4.2 步驟 2：實(shí)現(xiàn)“線路區(qū)劃導(dǎo)航欄”的響應(yīng)式布局
4.4.3 步驟 3：實(shí)現(xiàn)“線路區(qū)劃導(dǎo)航欄”頁(yè)內(nèi)導(dǎo)航功能
4.4.4 步驟 4：為“線路展示”版塊添加標(biāo)題
4.5 任務(wù)5：實(shí)現(xiàn)“線路詳情”頁(yè)面
4.5.1 步驟 1：實(shí)現(xiàn)頁(yè)面中的“面包屑”導(dǎo)航
4.5.2 步驟 2：實(shí)現(xiàn)頁(yè)面“線路詳情”版塊
4.5.3 步驟 3：實(shí)現(xiàn)頁(yè)面“選項(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)式頁(yè)面制作
5.1 任務(wù) 1：實(shí)現(xiàn)“線路維護(hù)”頁(yè)面導(dǎo)航部分
5.1.1 步驟 1：實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)
5.1.2 步驟 2：實(shí)現(xiàn)頁(yè)眉導(dǎo)航
5.1.3 步驟 3：實(shí)現(xiàn)側(cè)邊欄導(dǎo)航
5.2 任務(wù)2：實(shí)現(xiàn)“線路維護(hù)”頁(yè)面內(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：“定制線路”頁(yè)面實(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)前頁(yè)面
6.2.3 步驟 3：動(dòng)態(tài)設(shè)置導(dǎo)航條目“活躍”狀態(tài)
6.3 任務(wù)3：管理系統(tǒng)“側(cè)邊欄導(dǎo)航”中橫向展開(kāi)子菜單
6.3.1 步驟 1：添加側(cè)邊欄“資源管理”導(dǎo)航模塊
6.3.2 步驟 2：橫向展開(kāi)的子菜單內(nèi)容制作
6.3.3 步驟 3：采用彈出框?qū)崿F(xiàn)橫向展開(kāi)子菜單
6.4 任務(wù)4：管理系統(tǒng)側(cè)邊導(dǎo)航欄活躍狀態(tài)跟蹤
6.4.1 步驟 1：獲取當(dāng)前打開(kāi)的文件所在的子目錄
6.4.2 步驟 2：設(shè)置活躍狀態(tài)的側(cè)邊欄導(dǎo)航子模塊為“展開(kāi)”
6.4.3 步驟 3：網(wǎng)頁(yè)加載時(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需通過(guò)驗(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)畫(huà)效果制作
7.5.1 步驟 1：記錄刪除前被刪除條目的位置
7.5.2 步驟 2：以淡出的動(dòng)畫(huà)效果原位恢復(fù)被刪除的條目
7.5.3 步驟 3：警告框“飛入”動(dòng)畫(huà)的實(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：編寫(xiě)異步獲取酒店信息的 Ajax 請(qǐng)求
8.2.3 步驟 3：配置模擬后臺(tái)路由，成功加載酒店數(shù)據(jù)
8.2.4 步驟 4：顯示提示信息
8.3 任務(wù) 3：酒店信息的分頁(yè)顯示
8.3.1 步驟 1：實(shí)現(xiàn)酒店信息分頁(yè)頁(yè)碼的動(dòng)態(tài)添加
8.3.2 步驟 2：獲取指定頁(yè)碼的數(shù)據(jù)
8.3.3 步驟 3：實(shí)現(xiàn)分頁(yè)顯示功能
8.4 任務(wù) 4：修改酒店信息
8.4.1 步驟 1：實(shí)現(xiàn)修改信息模態(tài)框
8.4.2 步驟 2：將指定記錄的信息填寫(xiě)到表單控件中
8.4.3 步驟 3：發(fā)送異步請(qǐng)求，完成信息的修改
8.4.4 步驟 4：防止重復(fù)提交 Ajax 請(qǐng)求
任務(wù)延展
本章高保真圖
參考文獻(xiàn)