第 1章　Flex布局與響應(yīng)式布局　1 任務(wù)1　認識Flex彈性盒布局　2 1.1.1　為什么要使用彈性布局　2 1.1.2　實現(xiàn)彈性布局的方法　4 1.1.3　上機訓練　15 任務(wù)2　實現(xiàn)響應(yīng)式布局　16 1.2.1　響應(yīng)式網(wǎng)頁設(shè)計　16 1.2.2　媒體查詢　17 1.2.3　上機訓練　23 1.2.4　響應(yīng)式布局的應(yīng)用　24 1.2.5　響應(yīng)式布局的優(yōu)缺點　26 本章作業(yè)　26 第　2章 初識Bootstrap　27 任務(wù)1　認識Bootstrap　28 2.1.1　Bootstrap概述　28 2.1.2　Bootstrap使用方法　29 2.1.3　Bootstrap整體結(jié)構(gòu)　32 任務(wù)2　使用Bootstrap柵格系統(tǒng)進行頁面布局　33 2.2.1　柵格系統(tǒng)簡介　33 2.2.2　實現(xiàn)原理　33 2.2.3　柵格系統(tǒng)的使用　34 2.2.4　響應(yīng)式柵格　38 2.2.5　上機訓練　42 任務(wù)3　使用Bootstrap CSS全局樣式　42 2.3.1　Bootstrap排版　43 2.3.2　Bootstrap表單　46 2.3.3　Bootstrap按鈕　49 2.3.4　Bootstrap圖片　50 2.3.5　上機訓練　50 本章作業(yè)　51 第3章　Bootstrap CSS組件　55 任務(wù)1　使用圖標組件　56 3.1.1　使用方法　57 3.1.2　應(yīng)用場景　58 3.1.3　實現(xiàn)方式　59 任務(wù)2　使用下拉菜單組件　59 3.2.1　基本下拉菜單　59 3.2.2　分離式下拉菜單　61 3.2.3　上機訓練　62 任務(wù)3　使用輸入框組件　63 3.3.1　基本的輸入框組件　63 3.3.2　輸入框組件的大小　64 3.3.3　按鈕插件　64 任務(wù)4　使用導航和導航欄組件　65 3.4.1　導航　65 3.4.2　導航欄　68 3.4.3　上機訓練　74 任務(wù)5　使用縮略圖　75 任務(wù)6　使用媒體對象　77 任務(wù)7　使用列表組　78 任務(wù)8　使用分頁導航　80 3.8.1　分頁（Pagination）　80 3.8.2　翻頁（Pager）　81 3.8.3　上機訓練　81 本章作業(yè)　82 第4章　Bootstrap JavaScript插件　85 任務(wù)1　認識JavaScript插件　86 4.1.1　JavaScript插件的引入方式　86 4.1.2　data屬性概述　87 任務(wù)2　實現(xiàn)動畫過渡效果　87 任務(wù)3　使用Modal插件實現(xiàn)模態(tài)框效果　89 4.3.1　基礎(chǔ)布局與樣式　89 4.3.2　尺寸設(shè)置　91 4.3.3　常用屬性　92 4.3.4　動態(tài)設(shè)置模態(tài)框?qū)傩浴?2 4.3.5　上機訓練　93 任務(wù)4　使用Tab插件實現(xiàn)選項卡效果　94 4.4.1　基礎(chǔ)布局與樣式　94 4.4.2　動態(tài)操作選項卡插件的屬性及方法　96 4.4.3　上機訓練　96 任務(wù)5　使用Carousel插件實現(xiàn)輪播圖　97 4.5.1　基礎(chǔ)布局與樣式　97 4.5.2　自定義屬性　100 4.5.3　動態(tài)調(diào)用　100 4.5.4　上機訓練　101 任務(wù)6　使用ScrollSpy插件實現(xiàn)滾動監(jiān)聽　102 4.6.1　基礎(chǔ)布局與使用　102 4.6.2　動態(tài)調(diào)用　104 4.6.3　上機訓練　105 任務(wù)7　Bootstrap總結(jié)　106 本章作業(yè)　107 第5章　移動端頁面布局　111 任務(wù)1　移動Web概述　112 5.1.1　什么是移動Web　112 5.1.2　移動Web的現(xiàn)狀　113 5.1.3　PC與移動Web開發(fā)的區(qū)別　113 任務(wù)2　移動端開發(fā)、測試瀏覽器　114 5.2.1　移動端瀏覽器的類型　114 5.2.2　測試瀏覽器　115 任務(wù)3　移動端視口及視口標簽　119 5.3.1　移動端的三種視口　119 5.3.2　視口標簽　123 任務(wù)4　設(shè)備像素比　125 任務(wù)5　實現(xiàn)移動端布局　126 5.5.1　使用em布局網(wǎng)頁內(nèi)容　126 5.5.2　使用rem布局網(wǎng)頁內(nèi)容　129 5.5.3　上機訓練　133 本章作業(yè)　134 第6章　移動端事件與Zepto框架　137 任務(wù)1　使用移動端事件　138 6.1.1　click事件　138 6.1.2　touch（觸摸）事件　139 6.1.3　上機訓練　142 任務(wù)2　使用Zepto框架　143 6.2.1　初識Zepto　143 6.2.2　Zepto和jQuery的區(qū)別　144 6.2.3　Zepto框架常用選擇器　145 6.2.4　Zepto框架常用方法和屬性　148 6.2.5　上機訓練　153 本章作業(yè)　154 第7章　移動端開發(fā)技巧　157 任務(wù)1　開發(fā)技巧　158 任務(wù)2　常見問題　159 任務(wù)3　移動端優(yōu)化　160 7.3.1　加載優(yōu)化　161 7.3.2　圖片優(yōu)化　162 7.3.3　腳本優(yōu)化　163 本章作業(yè)　164 第8章　項目實戰(zhàn)——制作“愛旅行”網(wǎng)站　165 任務(wù)1　開發(fā)流程制訂及角色分工　167 任務(wù)2　項目分析　168 8.2.1　需求概述　169 8.2.2　問題分析　171 任務(wù)3　項目實現(xiàn)　173 8.3.1　公用部分　174 8.3.2　網(wǎng)站首頁——輪播圖　176 8.3.3　網(wǎng)站首頁——圖文混排　177 8.3.4　旅游首頁　179 8.3.5　列表頁　181 8.3.6　詳情頁　182 8.3.7　選擇日期和人數(shù)頁　184 8.3.8　選擇資源頁　185 8.3.9　訂單填寫頁　185 8.3.10　目的地頁　186 8.3.11　登錄頁　186 8.3.12　注冊頁　187 8.3.13　瀏覽歷史頁　187 8.3.14　我的頁面　188 8.3.15　訂單頁　188 本章作業(yè)　189