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

黑馬程序員成立於2006年，由中國Java培訓先行者張孝祥老師發起，聯合全球最大的中文IT社區CSDN和中關村軟件園共同創辦的一家專業教育機構。自創辦以來，我們始終堅守「為千萬人少走彎路而著書，為中華軟件之崛起而講課」的辦學理念，致力於培養優秀的軟件應用工程師。迄今為止，已累計培養超過十萬名學員，其中90%的學員已在北京、上海、廣州等一線城市實現高薪就業。

為了滿足軟件市場的需求，我們陸續開設了Java、網頁設計與平面設計、PHP、.Net、iOS、C/C++、Android等9個專業方向的課程，並計劃未來拓展更多專業方向課程。隨著傳智播客的持續壯大，除了北京總部，我們還在上海、廣州、武漢、成都、深圳等地成立了直營分支機構。如今，傳智播客已成為國內頗具專業口碑的IT教育機構。

第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　

2.7.2　

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