Bootstrap 4 Web 設計與開發實戰

目  錄

 

第1章  Bootstrap從何而來 1

1.1  初識Bootstrap 1

1.2  什麽是響應式設計 2

1.3  響應式設計四大原則 3

1.3.1  移動優先還是PC優先 3

1.3.2  內容流 4

1.3.3  位圖還是矢量圖 4

1.3.4  相對單位還是固定單位 4

1.4  Bootstrap設計目標 5

1.4.1  優先針對移動設備 5

1.4.2  瀏覽器支持 5

1.4.3  響應式設計 6

1.5  本章小結 6

第2章  Bootstrap開發環境 7

2.1  Bootstrap開發環境概述 7

2.1.1  下載Bootstrap開發包 7

2.1.2  Bootstrap開發包目錄結構 9

2.1.3  在網站中使用Bootstrap框架 10

2.2  調用Bootstrap樣式 11

2.3  調用Bootstrap組件 14

2.4  調用Bootstrap JS特效 15

2.5  實戰：一個Bootstrap實現的響應式頁面 16

2.6  本章小結 18

第3章  Bootstrap腳手架 19

3.1  Bootstrap全局樣式 19

3.1.1  什麽是全局樣式 19

3.1.2  基於HTML5文檔類型 19

3.1.3  屏幕、排版與鏈接 20

3.2  柵格系統 21

3.2.1  默認柵格系統 21

3.2.2  流式柵格系統 24

3.3  頁面佈局 26

3.3.1  固定佈局和流式佈局 27

3.3.2  Bootstrap 4彈性佈局（FlexBox） 27

3.4  響應式設計 28

3.4.1  啟用響應式特性 28

3.4.2  響應式Bootstrap特點 28

3.4.3  Bootstrap支持的設備 29

3.4.4  響應式佈局輔助類 29

3.4.5  響應式FlexBox的重要類 30

3.5  從Less到Sass 34

3.6  本章小結 34

第4章  Bootstrap樣式設計 35

4.1  Bootstrap排版 35

4.1.1  標題 35

4.1.2  頁面主體 38

4.1.3  強調 38

4.1.4  縮略語 41

4.1.5  地址 42

4.1.6  引用 42

4.1.7  列表 43

4.1.8  描述 47

4.1.9  代碼 47

4.2  Bootstrap表格 49

4.2.1  默認樣式表格 49

4.2.2  斑馬紋樣式表格 51

4.2.3  圓角邊框樣式表格 52

4.2.4  鼠標懸停樣式表格 53

4.2.5  帶行屬性樣式表格 55

4.3  Bootstrap按鈕 56

4.3.1  默認樣式按鈕 56

4.3.2  按鈕大小樣式 58

4.3.3  特殊樣式按鈕 59

4.4  Bootstrap圖片 61

4.5  本章小結 61

第5章  Bootstrap組件設計 62

5.1  Bootstrap下拉菜單 62

5.1.1  標簽 62

5.1.2  對齊方式與彈出方向 63

5.1.3  禁用 65

5.2  Bootstrap按鈕組 65

5.2.1  基本按鈕組 66

5.2.2  工具欄按鈕組 66

5.2.3  垂直按鈕組 67

5.3  Bootstrap按鈕式下拉菜單 68

5.4  Bootstrap導航 71

5.4.1  默認標簽導航 71

5.4.2  pills標簽導航 72

5.4.3  堆疊式標簽導航 73

5.4.4  下拉菜單式標簽導航 74

5.4.5  標簽頁式導航 75

5.4.6  菜單項的居中 77

5.5  Bootstrap導航條 78

5.5.1  默認樣式導航條 78

5.5.2  導航條表單 79

5.5.3  小屏幕的折疊導航條 80

5.6  Bootstrap分頁 82

5.6.1  標準分頁方式 82

5.6.2  翻頁分頁方式 84

5.6.3  分頁方式中的字體 84

5.7  Bootstrap標簽與徽章 86

5.8  Bootstrap進度條 87

5.8.1  基本樣式進度條 87

5.8.2  斜條紋樣式進度條 88

5.8.3  堆疊樣式進度條 89

5.9  被刪除的Glyphicons字體圖標 89

5.10  本章小結 91

第6章  Bootstrap插件設計 92

6.1  Bootstrap插件概述 92

6.1.1  單個或全部引入 92

6.1.2  data屬性 93

6.1.3  事件 93

6.2  Bootstrap模態對話框 93

6.2.1  模態對話框說明 94

6.2.2  靜態模態對話框 94

6.2.3  動態模態對話框 95

6.3  Bootstrap下拉菜單（高級版） 98

6.4  Bootstrap滾動監聽 101

6.5  Bootstrap可切換式標簽頁 104

6.6  Bootstrap提示框 107

6.6.1  工具提示框 107

6.6.2  彈出框 109

6.6.3  警告框 113

6.7  Bootstrap按鈕 114

6.7.1  狀態按鈕 114

6.7.2  復選按鈕 116

6.7.3  單選按鈕 117

6.8  Bootstrap中的卡片與折疊 118

6.9  Bootstrap幻燈 121

6.10  本章小結 123

第7章  Bootstrap響應式多媒體 124

7.1  Bootstrap圖標的響應式 124

7.2  Bootstrap圖像的響應式 126

7.2.1  可適配的圖像 126

7.2.2  圖像網格 128

7.3  Bootstrap視頻的響應式 133

7.4  本章小結 134

第8章  Bootstrap扁平化風格頁面 135

8.1  扁平化設計概述 135

8.1.1  介紹 135

8.1.2  設計理念 136

8.1.3  頁面架構 136

8.2  頁眉設計 137

8.2.1  導航條 138

8.2.2  導航條圖標 138

8.2.3  導航條功能菜單 139

8.2.4  頁眉標題 144

8.3  左側導航設計 145

8.4  頁面主體設計 148

8.4.1  圖片列表 148

8.4.2  提交表單 150

8.4.3  文本列表 153

8.5  頁腳設計 155

8.6  本章小結 156

第9章  Bootstrap圖片幻燈頁面 157

9.1  圖片幻燈風格頁面設計概述 157

9.2  頁眉設計 158

9.3  頁面主體設計 160

9.3.1  圖片幻燈 160

9.3.2  圖標列表 162

9.3.3  圖片特輯 164

9.4  本章小結 165

第10章  Bootstrap風格按鈕 166

10.1  風格按鈕設計概述 166

10.2  形狀與尺寸風格按鈕 167

10.3  邊框風格按鈕 169

10.4  下拉菜單風格按鈕 171

10.5  按鈕組風格按鈕 172

10.6  本章小結 174

第11章  Bootstrap響應式表格設計 175

11.1  表格設計概述 175

11.2  Bootstrap基本表格 177

11.3  Bootstrap數組表格 179

11.4  Bootstrap Ajax表格 180

11.5  本章小結 182

第12章  Bootstrap響應式圖表設計 183

12.1  圖表設計概述 183

12.2  柱狀圖圖表 185

12.3  折線圖圖表 187

12.4  餅狀圖圖表 191

12.5  本章小結 195

第13章  jQuery UI Bootstrap工具 196

13.1  jQuery UI Bootstrap工具概述 196

13.1.1  jQuery UI工具 196

13.1.2  jQuery UI Bootstrap工具 197

13.1.3  jQuery UI Bootstrap應用 197

13.2  按鈕（Button） 198

13.2.1  基本樣式按鈕 199

13.2.2  Set樣式按鈕 200

13.2.3  工具條樣式按鈕 202

13.3  折疊面板（Accordion） 203

13.4  對話框（Dialog） 206

13.4.1  非模態對話框 206

13.4.2  模態對話框 208

13.5  標簽頁 211

13.5.1  基本樣式標簽頁 211

13.5.2  可編輯樣式標簽頁 213

13.6  Overlay與Shadow 220

13.7  Highlight與Error 221

13.8  日期選擇器（Datepicker） 223

13.9  滑塊 224

13.9.1  水平滑塊 224

13.9.2  垂直滑塊 225

13.10  自動完成 227

13.11  下拉菜單 229

13.12  提示信息 231

13.13  微調按鈕 233

13.14  本章小結 236

第14章  jQuery Mobile 框架與Bootstrap主題風格 237

14.1  jQuery Mobile+Bootstrap概述 237

14.1.1  jQuery Mobile框架 237

14.1.2  Bootstrap主題風格 238

14.1.3  應用開發基礎 238

14.2  主頁設計 240

14.3  按鈕設計 242

14.4  列表設計 245

14.5  導航設計 248

14.6  表單設計 252

14.6.1  輸入框 252

14.6.2  滑塊 254

14.6.3  切換開關 256

14.6.4  復選框 258

14.6.5  單選框 261

14.6.6  下拉菜單 263

14.6.7  提交按鈕 265

14.7  本章小結 269

第15章  實戰：應用Bootstrap實現一個貼吧管理頁面 270

15.1  項目設計概述 270

15.2  頁面佈局設計 271

15.2.1  引入Bootstrap框架 271

15.2.2  實現頁面佈局代碼 272

15.3  頁面導航欄設計 273

15.3.1  構建導航的整體架構 273

15.3.2  設計標題和導航鏈接 274

15.3.3  設計搜索框和通知系統 275

15.3.4  設計管理員登錄系統 276

15.3.5  設計響應式導航 278

15.4  左側邊欄設計 280

15.5  頁面主體設計 281

15.5.1  頁面主體功能的頭部 282

15.5.2  頁面主體功能的帖子列表 284

15.6  本章小結 287

附錄  CSS選擇器速覽 288