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