響應式網(wǎng)頁開發(fā)基礎教程（jQuery+Bootstrap）

第1章 響應式網(wǎng)頁設計基礎　1
1．1　什么是響應式網(wǎng)頁　1
1．1．1　響應式網(wǎng)頁設計的產(chǎn)生　1
1．1．2　響應式和“自適應網(wǎng)頁”　2
1．1．3　響應式網(wǎng)頁的特點　2
1．2　媒體查詢及應用　3
1．2．1　媒體查詢簡介　3
1．2．2　媒體查詢的基本形式　3
1．2．3　常用媒體特性　5
1．2．4　動手練習：制作響應式網(wǎng)頁示例　6
1．3　響應式網(wǎng)頁呈現(xiàn)　7
1．3．1　屏幕可視區(qū)域viewport　7
1．3．2　相對大小與絕對大小　9
1．3．3　響應式圖像適配　10
1．4　本章實訓：創(chuàng)建一個響應式網(wǎng)頁　14
1．4．1　使用HTML 5標簽建立頁面基本結構　14
1．4．2　布局與定位　14
1．4．3　網(wǎng)頁內(nèi)容呈現(xiàn)　14
習題　16
第2章　JavaScript基礎　18
2．1　初識JavaScript　18
2．1．1　JavaScript的組成　18
2．1．2　JavaScript在網(wǎng)頁中的引用方式　19
2．1．3　常用的輸入/輸出語句　21
2．2　JavaScript編程基礎　23
2．2．1　變量與數(shù)據(jù)類型　23
2．2．2　運算符　25
2．2．3　程序的流程控制語句　27
2．2．4　函數(shù)的使用　30
2．2．5　常用JavaScript內(nèi)置對象　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文檔的節(jié)點　44
2．4．4　操作DOM節(jié)點對象　45
2．5　本章實訓：JavaScript在線上網(wǎng)頁的應用實例　50
2．5．1　網(wǎng)頁換膚　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在網(wǎng)頁中的引用方式　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節(jié)點　95
3．6　本章實訓：jQuery網(wǎng)頁應用實例　97
3．6．1　jQuery線上網(wǎng)頁應用之導航菜單　97
3．6．2　jQuery線上網(wǎng)頁應用之圖片展示　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中創(chuàng)建Bootstrap頁面　114
4．2　Bootstrap基本樣式設計　114
4．2．1　網(wǎng)格系統(tǒng)　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　響應式網(wǎng)頁布局概述　130
5．1．1　固定布局　130
5．1．2　流式布局　131
5．1．3　彈性布局　131
5．1．4　混合布局　131
5．2　網(wǎng)格布局　132
5．2．1　網(wǎng)格布局的概念　132
5．2．2　CSS中的Flex與Grid　133
5．3　使用Bootstrap實現(xiàn)網(wǎng)格布局　136
5．3．1　Bootstrap網(wǎng)格布局概述　136
5．3．2　Bootstrap響應式網(wǎng)格布局　139
5．3．3　列偏移與列排序　141
5．3．4　列嵌套　143
5．4　本章實訓：基于Bootstrap的響應式布局實現(xiàn)　144
5．4．1　建立頁面基本結構　144
5．4．2　響應式布局的實現(xiàn)　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　表單驗證狀態(tài)　152
6．1．5　按鈕組　152
6．1．6　輸入框組　155
6．2　Bootstrap下拉菜單　156
6．2．1　下拉菜單示例　156
6．2．2　下拉菜單實現(xiàn)方法　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　滾動監(jiān)聽　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內(nèi)置組件　174
6．5．1　輪播圖　175
6．5．2　縮略圖　177
6．5．3　巨幕效果　177
6．5．4　進度條　178
6．5．5　模態(tài)框（modal）　179
6．5．6　well和面板（panel）　181
6．5．7　折疊組件　183
6．5．8　在Adobe Dreamweaver CC中插入Bootstrap組件　185
6．6　本章實訓：使用Bootstrap實現(xiàn)簡單的響應式網(wǎng)頁　186
6．6．1　搭建Bootstrap環(huán)境　186
6．6．2　響應式導航條實現(xiàn)　187
6．6．3　響應式輪播圖　187
6．6．4　頁面內(nèi)容　188
6．6．5　頁面底部　189
6．6．6　頁面樣式及腳本代碼　190
習題　193
第7章　Bootstrap頁面效果設計
實例　196
7．1　登錄表單優(yōu)化實例　196
7．1．1　網(wǎng)頁主體內(nèi)容　196
7．1．2　樣式設置　197
7．2　標簽式導航優(yōu)化效果實例　199
7．2．1　網(wǎng)頁主體內(nèi)容　200
7．2．2　樣式設置　200
7．3　“手風琴式”折疊菜單效果　202
7．3．1　網(wǎng)頁主體內(nèi)容　202
7．3．2　樣式設置　204
習題　205
第8章　Bootstrap響應式網(wǎng)頁開發(fā)綜合實例　206
8．1　搭建Bootstrap基本框架　207
8．2　設計導航欄　211
8．3　設計輪播圖　213
8．4　設計內(nèi)容布局　215
8．4．1　網(wǎng)格布局系統(tǒng)　215
8．4．2　標簽頁布局　217
8．4．3　底部的設計　220
習題　220