Bootstrap響應式Web開發（第2版）

第1章　初識Bootstrap　1
1.1　Bootstrap　1
1.1.1　Bootstrap概述　1
1.1.2　Bootstrap的特點　2
1.1.3　Bootstrap的組成　3
1.2　流覽器　3
1.2.1　PC端流覽器　3
1.2.2　移動端流覽器　4
1.3　Visual Studio Code編輯器　4
1.3.1　下載並安裝Visual Studio Code編輯器　5
1.3.2　安裝中文擴展包　7
1.3.3　使用Visual Studio Code編輯器　8
1.4　移動Web開發的主流方案　9
1.4.1　單獨製作移動端頁面　10
1.4.2　製作響應式頁面　11
本章小結　13
課後練習　13

第2章　移動Web開發基礎　15
2.1　螢幕解析度和設備圖元比　15
2.1.1　螢幕解析度　16
2.1.2　設備圖元比　16
2.2　視口　17
2.3　CSS樣式初始化　20
2.4　CSS變數　23
2.4.1　定義CSS變數　23
2.4.2　讀取CSS變數的值　24
2.4.3　CSS變數值的類型　25
2.4.4　在JavaScript中設置CSS變數　27
2.5　CSS前置處理器　30
2.5.1　Less　30
2.5.2　Sass　32
2.6　Web Storage　35
2.6.1　Web Storage概述　35
2.6.2　localStorage　36
2.6.3　sessionStorage　38
2.7　視頻和音訊　41
2.7.1　標籤　41
2.7.2　標籤　42
2.7.3　video物件和audio物件　43
2.8　移動端touch事件　45
2.8.1　touch事件概述　45
2.8.2　TouchEvent對象　47
2.8.3　模擬移動端按一下事件　48
本章小結　50
課後練習　50

第3章　移動Web螢幕適配　53
3.1　媒體查詢　53
3.2　流式佈局和彈性盒佈局　57
3.2.1　流式佈局　57
3.2.2　彈性盒佈局　60
3.3　rem單位、vw單位和vh單位　64
3.3.1　rem單位　64
3.3.2　vw單位和vh單位　67
3.4　字體圖示　68
3.4.1　什麼是字體圖示　68
3.4.2　下載字體圖示　69
3.4.3　使用字體圖示　73
3.5　二倍圖　74
3.6　SVG　77
3.6.1　什麼是SVG　77
3.6.2　SVG的基本使用方法　77
本章小結　79
課後練習　79

第4章　Bootstrap開發基礎　81
4.1　Bootstrap下載和引入　81
4.1.1　下載Bootstrap　81
4.1.2　引入Bootstrap　85
4.2　Bootstrap佈局容器　85
4.2.1　初識Bootstrap佈局容器　86
4.2.2　Bootstrap佈局容器的使用方法　87
4.3　Bootstrap柵格系統　90
4.3.1　初識Bootstrap柵格系統　90
4.3.2　Bootstrap柵格系統的使用方法　91
4.4　Bootstrap工具類　94
4.4.1　顯示方式工具類　94
4.4.2　邊距工具類　96
4.4.3　彈性盒佈局工具類　98
本章小結　100
課後練習　101

第5章　Bootstrap常用樣式　103
5.1　標題樣式　103
5.2　文本樣式　106
5.2.1　強調文本　107
5.2.2　引用文本　109
5.2.3　文本顏色　111
5.2.4　文本格式　112
5.3　清單樣式　116
5.4　圖文樣式　117
5.4.1　圖像展示方式　117
5.4.2　圖像對齊方式　119
5.4.3　圖文組合方式　121
5.5　表格樣式　122
5.6　輔助樣式　125
5.6.1　背景樣式　125
5.6.2　邊框樣式　127
本章小結　129
課後練習　130

第6章　Bootstrap表單　132
6.1　表單控制項樣式　132
6.1.1　文字方塊　132
6.1.2　下拉清單　135
6.1.3　選項按鈕和核取方塊　136
6.1.4　輸入組　138
6.2　表單佈局方式　140
6.2.1　行內表單佈局　140
6.2.2　水準表單佈局　142
6.2.3　回應式表單佈局　144
6.3　表單驗證　147
本章小結　154
課後練習　155

第7章　Bootstrap常用組件　157
7.1　初識組件　158
7.1.1　組件概述　158
7.1.2　Bootstrap元件的基本使用方法　158
7.2　按鈕元件　161
7.2.1　基礎樣式按鈕　161
7.2.2　輪廓樣式按鈕　162
7.2.3　尺寸樣式按鈕　163
7.2.4　狀態樣式按鈕　164
7.2.5　組合樣式按鈕　165
7.3　導航組件　167
7.3.1　基礎導航　167
7.3.2　標籤式導航　169
7.3.3　膠囊式導航　171
7.3.4　麵包屑導航　173
7.4　巡覽列組件　174
7.4.1　基礎巡覽列　175
7.4.2　帶有折疊按鈕的巡覽列　177
7.5　下拉式功能表組件　179
7.5.1　下拉式功能表按鈕　180
7.5.2　下拉式功能表巡覽列　181
7.6　卡片元件　184
7.6.1　基礎卡片　184
7.6.2　圖文卡片　185
7.6.3　背景圖卡片　187
7.7　輪播組件　190
7.7.1　輪播圖功能分析　190
7.7.2　基礎輪播圖　191
7.8　提示組件　194
7.8.1　工具提示框　194
7.8.2　彈出提示框　197
7.8.3　警告框　201
7.9　模態框組件　204
本章小結　207
課後練習　207

第8章　項目實戰——基於Bootstrap的線上學習平臺　210
8.1　項目介紹　210
8.1.1　項目展示　211
8.1.2　項目分析　214
8.1.3　專案目錄結構　215
8.2　巡覽列模組　216
8.2.1　巡覽列模組效果展示　216
8.2.2　巡覽列模組結構分析　217
8.2.3　巡覽列模組代碼實現　217
8.3　輪播圖模組　221
8.3.1　輪播圖模組效果展示　221
8.3.2　輪播圖模組結構分析　222
8.3.3　輪播圖模組代碼實現　223
8.4　視頻教程模組　226
8.4.1　視頻教程模組效果展示　226
8.4.2　視頻教程模組結構分析　227
8.4.3　視頻教程模組代碼實現　228
8.5　學習路線模組　229
8.5.1　學習路線模組效果展示　229
8.5.2　學習路線模組結構分析　231
8.5.3　學習路線模組代碼實現　232
8.6　熱門學習工具模組　236
8.6.1　熱門學習工具模組效果展示　237
8.6.2　熱門學習工具模組結構分析　237
8.6.3　熱門學習工具模組代碼實現　238
8.7　版權模組　239
8.7.1　版權模組效果展示　239
8.7.2　版權模組結構分析　239
8.7.3　版權模組代碼實現　240
本章小結　242

黑馬程序員
 
成立於2006年，由中國Java培訓先行者張孝祥老師發起，聯合全球最大的中文IT社區CSDN、中關村軟體園共同創辦的一家專業教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟體之崛起而講課”的辦學理念，堅持培養優秀軟體應用工程師的宏偉目標，在累計培養的十萬余名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業。為了迎合軟體市場的需求，我們陸續開設了Java、網頁平面、PHP、.Net、iOS、C/C 、Android等9個專業方向的課程，並且未來將逐漸開設其他專業方向的課程。隨著傳智播客的日益壯大，除了北京總部，我們在上海、廣州、武漢、成都、深圳等地也創立了直營分支機搆，傳智播客儼然已成為了國內具有專業口碑的IT教育機構。