Bootstrap 5.X 從入門到項目實戰

目    錄

 

第1章  流行的開發框架Bootstrap 1

1.1  認識Bootstrap 1

1.1.1  Bootstrap 的由來 1

1.1.2  Bootstrap的構成模塊 2

1.2  Bootstrap 的特色 2

1.3  Bootstrap的優勢 3

1.4  Bootstrap 5.X的新變化 4

1.5  疑難問題解惑 6

第2章  使用最新的框架Bootstrap 5.X 8

2.1  下載Bootstrap 5.X 8

2.2  安裝 Bootstrap 5.X 10

2.2.1  本地安裝 10

2.2.2  在線安裝 11

2.3  Bootstrap 的在線開發工具 11

2.4  案例實訓1——我的第一個Bootstrap網頁 12

2.5  案例實訓2——設計網站主頁的按鈕 13

2.6  疑難問題解惑 14

第3章  快速掌握Bootstrap佈局 15

3.1  佈局基礎 15

3.1.1  佈局容器 15

3.1.2  響應斷點 18

3.1.3  z-index堆疊樣式屬性 19

3.1.4  響應式容器 19

3.2  網格系統 20

3.2.1  網格選項 20

3.2.2  自動佈局列 21

3.2.3  響應類 24

3.2.4  重排序 27

3.2.5  列嵌套 29

3.3  案例實訓——開發電商網站特效 30

3.4  疑難問題解惑 33

第4章  Bootstrap中的彈性盒子佈局 34

4.1  定義彈性盒子 34

4.2  排列方向 35

4.2.1  水平方向排列 35

4.2.2  垂直方向排列 36

4.3  內容排列佈局 37

4.4  項目對齊佈局 38

4.5  自動對齊佈局 39

4.6  自動相等佈局 41

4.7  等寬變換佈局 41

4.8  自動浮動佈局 42

4.8.1  水平方向浮動佈局 42

4.8.2  垂直方向浮動佈局 43

4.9  彈性佈局——包裹 44

4.10  排列順序佈局 44

4.11  案例實訓——對齊內容佈局 45

4.12  疑難問題解惑 46

第5章  精通頁面排版 48

5.1  頁面排版的初始化 48

5.2  優化頁面排版 49

5.2.1  標題 49

5.2.2  段落 52

5.2.3  強調 53

5.2.4  縮略語 54

5.2.5  引用 55

5.3  顯示代碼 55

5.3.1  行內代碼 56

5.3.2  多行代碼塊 56

5.4  響應式圖片 57

5.4.1  圖像的同步縮放 57

5.4.2  圖像縮略圖 57

5.4.3  圖像對齊方式 57

5.5  優化表格的樣式 58

5.5.1  表格默認風格 59

5.5.2  為表格設計個性化風格 59

5.6  案例實訓——設計網站後台人員 管理系統頁面 63

5.7  疑難問題解惑 65

第6章  CSS通用樣式 66

6.1  文本處理 66

6.1.1  文本對齊 66

6.1.2  文本換行 67

6.1.3  轉換大小寫 69

6.1.4  粗細和斜體 69

6.1.5  其他文本樣式類 70

6.2  顏色樣式 70

6.2.1  文本顏色 71

6.2.2  鏈接文本顏色 72

6.2.3  背景顏色 72

6.3  邊框樣式 73

6.3.1  添加邊框 73

6.3.2  邊框顏色 74

6.3.3  圓角邊框 75

6.4  寬度和高度 77

6.4.1  相對於父元素 77

6.4.2  相對於視口 78

6.5  邊距 79

6.5.1  邊距的定義 79

6.5.2  響應式邊距 81

6.6  浮動樣式 81

6.6.1  實現浮動樣式 81

6.6.2  響應式浮動樣式 82

6.7  display屬性 83

6.7.1  隱藏或顯示元素 83

6.7.2  響應式地隱藏或顯示元素 83

6.8  嵌入網頁元素 84

6.9  內容溢出 85

6.10  定位網頁元素 86

6.11  案例實訓——陰影效果 87

6.12  疑難問題解惑 88

第7章  Bootstrap在表單中的應用 90

7.1  Bootstrap創建表單 90

7.1.1  定義表單控件 90

7.1.2  設置表單控件的大小 91

7.1.3  設置表單控件只讀 91

7.1.4  設置只讀純文本 92

7.1.5  範圍輸入 93

7.2  單選按鈕和復選框的樣式 93

7.2.1  默認堆疊方式 93

7.2.2  水平排列方式 94

7.2.3  無文本形式 95

7.3  設計表單的佈局 96

7.3.1  使用網格系統佈局表單 96

7.3.2  設置列的寬度 98

7.4  幫助文本 98

7.5  禁用表單 99

7.6  按鈕 100

7.6.1  定義按鈕 100

7.6.2  設計按鈕風格 101

7.7  按鈕組 104

7.7.1  定義按鈕組 104

7.7.2  定義按鈕組工具欄 104

7.7.3  設計按鈕的組佈局和樣式 105

7.8  下拉菜單 108

7.8.1  定義下拉菜單 108

7.8.2  設計下拉按鈕的樣式 109

7.8.3  設計下拉菜單的樣式 110

7.8.4  單選和多選下拉菜單 114

7.8.5  為<input>元素設置下拉菜單 115

7.9  Bootstrap 5.X新增的浮動標簽 115

7.10  案例實訓——設置表單的驗證功能 116

7.11  疑難問題解惑 117

第8章  常用的CSS組件 119

8.1  導航組件 119

8.1.1  定義導航 119

8.1.2  設計導航的佈局 120

8.1.3  設計導航的風格 122

8.1.4  設計導航選項卡 125

8.2  警告框 127

8.2.1  定義警告框 127

8.2.2  添加鏈接 129

8.2.3  額外附加內容 130

8.2.4  關閉警告框 130

8.3  徽章 131

8.3.1  定義徽章 131

8.3.2  設置顏色 132

8.3.3  橢圓形徽章 133

8.4  進度條 134

8.4.1  定義進度條 134

8.4.2  設計進度條樣式 135

8.4.3  設計進度條風格 136

8.5  案例實訓——設計具有淡入效果的 導航選項卡 138

8.6  疑難問題解惑 139

第9章  高級的CSS組件 141

9.1  導航欄 141

9.1.1  定義導航欄 141

9.1.2  定位導航欄 145

9.1.3  設計導航欄的顏色 146

9.2  列表組 146

9.2.1  定義列表組 147

9.2.2  設計列表組的風格樣式 147

9.2.3  定製內容 150

9.3  麵包屑 151

9.3.1  定義麵包屑 151

9.3.2  設計分隔符 152

9.4  分頁效果 153

9.4.1  定義分頁 153

9.4.2  使用圖標 154

9.4.3  設計分頁風格 154

9.5  案例實訓——設計企業招聘表頁面 158

9.6  疑難問題解答 159

第10章  卡片、旋轉器和手風琴組件 160

10.1  卡片內容 160

10.1.1  卡片的標題、主體、文本和超鏈接 160

10.1.2  卡片的圖片 161

10.1.3  卡片的列表組 161

10.1.4  卡片的頁眉和頁腳 162

10.2  控制卡片的寬度 163

10.2.1  使用網格系統控制卡片的寬度 163

10.2.2  使用寬度類控制卡片的寬度 163

10.2.3  使用CSS樣式控制卡片的寬度 164

10.3  卡片中文本的對齊方式 165

10.4  卡片中添加導航 165

10.5  設計卡片的風格 167

10.5.1  設置卡片的背景顏色 167

10.5.2  設置背景圖像 168

10.5.3  卡片的邊框顏色 169

10.5.4  設計卡片的樣式 170

10.6  卡片排版 170

10.7  旋轉器 172

10.7.1  定義旋轉器 172

10.7.2  設置旋轉器風格 172

10.7.3  設置旋轉器的對齊方式 174

10.7.4  按鈕旋轉器 175

10.8  新增的手風琴組件 176

10.8.1  創建手風琴 176

10.8.2  手風琴組件的結構 177

10.8.3  手風琴組件的樣式 178

10.8.4  在手風琴組件中使用列表 179

10.9  案例實訓——使用網格系統佈局卡片 181

10.10  疑難問題解答 183

第11章  認識JavaScript插件 185

11.1  插件概述 185

11.1.1  插件分類 185

11.1.2  安裝插件 186

11.1.3  調用插件 186

11.2  警告框 187

11.2.1  關閉警告框 187

11.2.2  顯示警告框 188

11.3  按鈕 189

11.4  輪播 190

11.4.1  定義輪播 190

11.4.2  設計輪播風格 192

11.5  折疊 194

11.5.1  定義折疊效果 194

11.5.2  控制多目標 195

11.5.3  設計手風琴效果 196

11.6  下拉菜單 197

11.6.1  調用下拉菜單 197

11.6.2  設置下拉菜單 198

11.6.3  添加用戶行為 198

11.7  模態框 200

11.7.1  定義模態框 200

11.7.2  模態框的佈局和樣式 202

11.8  案例實訓——設計搶紅包提示框 206

11.9  疑難問題解答 207

第12章  精通JavaScript插件 209

12.1  側邊欄導航 209

12.1.1  創建側邊欄導航 209

12.1.2  側邊欄導航的組件 210

12.1.3  設置背景及背景是否可滾動 211

12.1.4  通過JavaScript控制側邊欄導航 213

12.2  彈窗 213

12.2.1  創建彈窗 213

12.2.2  設置彈窗方向 214

12.2.3  關閉彈窗 215

12.3  滾動監聽 216

12.3.1  導航欄中的滾動監聽 216

12.3.2  嵌套導航欄中的滾動監聽 218

12.3.3  列表組中的滾動監聽 219

12.4  標簽頁 221

12.5  提示框 222

12.5.1  創建提示框 222

12.5.2  設置提示框的顯示位置 223

12.5.3  調用提示框 224

12.6  吐司消息 225

12.6.1  創建吐司消息 225

12.6.2  堆疊吐司消息 226

12.6.3  自定義吐司消息 227

12.6.4  設置吐司消息的顏色 228

12.7  案例實訓——設計熱銷商品推薦區 228

12.8  疑難問題解答 231

第13章  項目實訓1——招聘網中的簡歷模板 232

13.1  案例概述 232

13.1.1  案例結構 232

13.1.2  設計效果 232

13.1.3  設計準備 234

13.2  設計佈局 235

13.3  設計左側信息欄 236

13.4  設計導航條 237

13.5  設計主頁 238

13.5.1  工作經歷 238

13.5.2  專業技能 239

13.5.3  教育經歷 240

13.5.4  綜合概述 241

13.6  設計聯系頁 242

13.7  設計相冊頁 243

第14章  項目實訓2——開發連鎖咖啡網站 245

14.1  網站概述 245

14.1.1  網站結構 245

14.1.2  設計效果 245

14.1.3  設計準備 246

14.2  設計首頁佈局 247

14.3  設計可切換導航 247

14.4  主體內容 252

14.4.1  設計輪播廣告區 252

14.4.2  設計產品推薦區 253

14.4.3  設計登錄、註冊按鈕和Logo 254

14.4.4  設計特色展示區 255

14.4.5  設計產品生產流程區 256

14.5  設計底部隱藏導航 259

第15章  項目實訓3——開發攝影相冊類項目 260

15.1  案例概述 260

15.1.1  案例結構 260

15.1.2  設計效果 261

15.1.3  設計準備 262

15.2  設計導航欄 263

15.3  設計首頁 264

15.3.1  設計相冊展示區 264

15.3.2  添加Swipebox燈箱插件 266

15.4  分類頁 270

15.4.1  設計相冊分類展示 270

15.4.2  添加Swipebox燈箱插件 273

15.5  博客 274

15.6  聯系頁 275

第16章  項目實訓4——設計流行企業網站 278

16.1  網站概述 278

16.1.1  網站結構 278

16.1.2  設計效果 278

16.1.3  設計準備 279

16.2  設計主頁 280

16.2.1  主頁佈局 280

16.2.2  設計導航條 280

16.2.3  設計輪播廣告 282

16.2.4  設計功能區 283

16.2.5  設計特色展示 285

16.2.6  設計腳註 288

16.3  設計側邊導航欄 289

16.4  設計登錄頁 290

第17章  項目實訓5——Web設計與定製網站 292

17.1  網站概述 292

17.1.1  網站結構 292

17.1.2  網站佈局 292

17.1.3  設計準備 293

17.2  設計主頁面導航 293

17.3  設計主頁面內容 296

17.3.1  設計首頁 296

17.3.2  關於我們 297

17.3.3  我們的團隊 299

17.3.4  我們的服務 302

17.3.5  我們的博客 303

17.3.6  我們的定製 304

17.4  設計腳註 306

第18章  項目實訓6——開發神影視頻網站 307

18.1  網站概述 307

18.1.1  網站結構 307

18.1.2  網站佈局 307

18.1.3  網站效果 307

18.1.4  設計準備 308

18.2  設計主頁面 309

18.2.1  設計頭部內容 309

18.2.2  設計輪播 310

18.2.3  設計分類列表 311

18.2.4  設計視頻內容 313

18.2.5  設計腳註 317