響應式網頁開發基礎教程（jQuery+Bootstrap）

鄭婷婷，廣東理工職業學院/廣東開放大學優秀青年講師，軟件技術專業骨乾教師，ISTQB認證測試工程師，曾參與多個軟件項目的開發及測試，主要研究方向為軟件測試、軟件平臺技術等，曾主講軟件技術、軟件測試技術專業多門主幹課程，包括軟件測試基礎、應用系統測試、網頁製作與網站開發等。目前主要參與移動平臺的安全與測試相關課題的研究。

第1章響應式網頁設計基礎1 
1.1什麼是響應式網頁1 
1.1.1響應式網頁設計的產生1 
1.1.2響應式和“自適應網頁” 2 
1.1.3響應式網頁的特點2 
1.2媒體查詢及應用3 
1.2.1媒體查詢簡介3 
1.2.2媒體查詢的基本形式3 
1.2.3常用媒體特性5 
1.2.4動手練習：製作響應式網頁示例6 
1.3響應式網頁呈現7 
1.3.1屏幕可視區域viewport 7 
1.3.2相對大小與絕對大小9 
1.3.3響應式圖像適配10 
1.4本章實訓：創建一個響應式網頁14 
1.4.1使用HTML 5標籤建立頁面基本結構14 
1.4.2佈局與定位14 
1.4.3網頁內容呈現14 
習題16 

第2章JavaScript基礎18 
2.1初識JavaScript 18 
2.1.1 JavaScript的組成18 
2.1.2 JavaScript在網頁中的引用方式19 
2.1.3常用的輸入/輸出語句21 
2.2 JavaScript編程基礎23 
2.2.1變量與數據類型23 
2.2.2運算符25
2.2.3程序的流程控制語句27 
2.2.4函數的使用30 
2.2.5常用JavaScript內置對象30 
2.3 JavaScript事件處理38 
2.3.1事件與事件處理程序38 
2.3.2常用事件40 
2.4 JavaScript的BOM與DOM 40 
2.4.1 BOM對象及其子對象40 
2.4.2 DOM對像模型43 
2.4.3 HTML文檔的節點44 
2.4.4操作DOM節點對象45 
2.5本章實訓：JavaScript在線上網頁的應用實例50 
2.5.1網頁換膚50 
2.5.2在線搜索52 
2.5.3百度一下54 
習題55 

第3章jQuery基礎58 
3.1初識jQuery 58 
3.1.1 jQuery簡介58 
3.1.2 jQuery在網頁中的引用方式58 
3.1.3 jQuery初體驗59 
3.2 jQuery選擇器62 
3.2.1基本選擇器62 
3.2.2層級選擇器63 
3.2.3過濾選擇器65 
3.2.4篩選選擇器76 
3.3 jQuery控制屬性與類77 
3.3.1控制屬性attr 77
3.3.2控制CSS類78 
3.4事件處理與應用舉例81 
3.4.1 jQuery常用事件81 
3.4.2 jQuery的動畫效果與應用88 
3.5操作DOM對象95 
3.5.1 jQuery操作DOM屬性95 
3.5.2 jQuery操作DOM節點95 
3.6本章實訓：jQuery網頁應用實例97 
3.6.1 jQuery線上網頁應用之導航菜單97 
3.6.2 jQuery線上網頁應用之圖片展示100 
3.6.3 jQuery插件應用舉例104 
3.6.4 jQuery操作DOM應用舉例108 
習題109 

第4章Bootstrap基礎112 
4.1 Bootstrap入門112 
4.1.1 Bootstrap簡介112 
4.1.2如何使用Bootstrap 113 
4.1.3在Dreamweaver CC中創建Bootstrap頁面114 
4.2 Bootstrap基本樣式設計114 
4.2.1網格系統114 
4.2.2圖片樣式115 
4.2.3排版樣式與輔助類115 
4.2.4表格樣式123 
4.2.5徽章126 
4.2.6字體圖標126 
4.3本章實訓：Bootstrap基本樣式設置127
習題128 

第5章響應式佈局130 
5.1響應式網頁佈局概述130 
5.1.1固定佈局130 
5.1.2流式佈局131 
5.1.3彈性佈局131 
5.1.4混合佈局131 
5.2網格佈局132 
5.2.1網格佈局的概念132 
5.2.2 CSS中的Flex與Grid 133 
5.3使用Bootstrap實現網格佈局136 
5.3.1 Bootstrap網格佈局概述136 
5.3.2 Bootstrap響應式網格佈局139 
5.3.3列偏移與列排序141 
5.3.4列嵌套143 
5.4本章實訓：基於Bootstrap的響應式佈局實現144 
5.4.1建立頁面基本結構144 
5.4.2響應式佈局的實現145 
習題146 

第6章Bootstrap組件設計147 
6.1 Bootstrap表單設計147 
6.1.1基礎表單147 
6.1.2表單輸入（input） 150 
6.1.3表單控件設置150 
6.1.4表單驗證狀態152 
6.1.5按鈕組152 
6.1.6輸入框組155 
6.2 Bootstrap下拉菜單156
6.2.1下拉菜單示例156 
6.2.2下拉菜單實現方法158 
6.3 Bootstrap導航及分頁159 
6.3.1 Bootstrap導航基本樣式159 
6.3.2標籤頁式導航160 
6.3.3膠囊式導航161 
6.3.4麵包屑導航163 
6.3.5導航欄及其組件163 
6.3.6分頁設計166 
6.3.7滾動監聽168 
6.3.8附加導航（Affix） 168 
6.4 Bootstrap消息提示170 
6.4.1工具提示（tooltip） 170 
6.4.2警告框組件（alert） 172 
6.4.3彈出框（popover） 173 
6.5 Bootstrap內置組件174 
6.5.1輪播圖175 
6.5.2縮略圖177 
6.5.3巨幕效果177 
6.5.4進度條178 
6.5.5模態框（modal） 179 
6.5.6 well和麵板（panel） 181 
6.5.7折疊組件183 
6.5.8在Adobe Dreamweaver CC中插入Bootstrap組件185 
6.6本章實訓：使用Bootstrap實現簡單的響應式網頁186 
6.6.1搭建Bootstrap環境186
6.6.2響應式導航條實現187 
6.6.3響應式輪播圖187 
6.6.4頁面內容188 
6.6.5頁面底部189 
6.6.6頁面樣式及腳本代碼190 
習題193 

第7章Bootstrap頁面效果設計
實例196 
7.1登錄表單優化實例196 
7.1.1網頁主體內容196 
7.1.2樣式設置197 
7.2標籤式導航優化效果實例199 
7.2.1網頁主體內容200 
7.2.2樣式設置200 
7.3 “手風琴式”折疊菜單效果202 
7.3 .1網頁主體內容202 
7.3.2樣式設置204 
習題205 

第8章Bootstrap響應式網頁開發綜合實例206 
8.1搭建Bootstrap基本框架207 
8.2設計導航欄211 
8.3設計輪播圖213 
8.4設計內容佈局215 
8.4.1網格佈局系統215 
8.4.2標籤頁佈局217 
8.4.3底部的設計220 
習題220