Bootstrap 5 從入門到精通 (視頻教學版)

目    錄

第1章  認識Bootstrap 1

1.1  Bootstrap概述 1

1.1.1  Bootstrap的由來 1

1.1.2  Bootstrap的版本 2

1.1.3  瀏覽器支持 3

1.2  Bootstrap特性 3

1.2.1  Bootstrap的功能 4

1.2.2  Bootstrap的構成 4

1.2.3  Bootstrap的特色 5

1.2.4  Bootstrap的優勢 5

1.3  Bootstrap開發工具和資源 7

1.3.1  Bootstrap開發工具 7

1.3.2  Bootstrap資源 7

1.4  Bootstrap 5的新變化 8

第2章  使用Bootstrap 5 10

2.1  下載Bootstrap 5 10

2.2  安裝Bootstrap 5.3 12

2.2.1  本地安裝 12

2.2.2  在線安裝 13

2.3  實戰案例設計——古詩網頁顯示樣式 13

第3章  Bootstrap的基本架構 15

3.1  Bootstrap佈局基礎 15

3.1.1  響應式設計 15

3.1.2  佈局容器 16

3.1.3  響應式容器 18

3.1.4  媒體查詢 19

3.1.5  z-index屬性 21

3.2  Bootstrap的網格系統 23

3.2.1  認識網格系統 23

3.2.2  響應列 25

3.2.3  響應類 30

3.2.4  偏移列 33

3.2.5  嵌套列 34

3.3  實戰案例——設計美食博客頁面 35

第4章  Bootstrap的彈性佈局 39

4.1  定義彈性盒子 39

4.2  排列方向 40

4.2.1  水平方向排列 40

4.2.2  垂直方向排列 41

4.3  定義彈性佈局 42

4.3.1  內容排列佈局 42

4.3.2  項目對齊佈局 44

4.3.3  自動對齊佈局 45

4.3.4  自動相等佈局 47

4.3.5  等寬變換佈局 47

4.3.6  包裹彈性佈局 48

4.3.7  排列順序佈局 49

4.3.8  對齊內容佈局 50

4.4  自動浮動佈局 51

4.4.1  水平方向浮動佈局 51

4.4.2  垂直方向浮動佈局 52

4.5  實戰案例——彈性佈局產品頁面 53

第5章  精通Bootstrap頁面排版 56

5.1  頁面排版的初始化 56

5.2  文字排版 57

5.2.1  標題 57

5.2.2  段落 60

5.2.3  強調 61

5.2.4  縮略語 61

5.2.5  引用 62

5.3  顯示代碼 63

5.3.1  行內代碼 63

5.3.2  多行代碼塊 63

5.4  響應式圖片 64

5.4.1  圖片的同步縮放 64

5.4.2  圖片縮略圖 65

5.4.3  圖片對齊方式 65

5.5  優化表格的樣式 66

5.5.1  表格默認樣式 67

5.5.2  無邊框表格樣式 68

5.5.3  條紋狀表格樣式 68

5.5.4  設計表格邊框樣式 69

5.5.5  鼠標指針懸停表格樣式 70

5.5.6  設置表格背景顏色 71

5.6  實戰案例——設計商品信息管理頁面 72

第6章  使用CSS通用樣式 75

6.1  文本處理 75

6.1.1  文本對齊 75

6.1.2  文本換行 77

6.1.3  轉換大小寫 78

6.1.4  粗細和斜體 79

6.1.5  其他文本樣式類 80

6.2  顏色樣式 80

6.2.1  文本顏色 80

6.2.2  鏈接顏色 82

6.2.3  背景顏色 83

6.3  邊框樣式 84

6.3.1  添加邊框 84

6.3.2  邊框顏色 86

6.3.3  圓角邊框 87

6.4  寬度和高度 88

6.4.1  相對於父元素 88

6.4.2  相對於視口 90

6.5  邊距樣式 91

6.5.1  邊距的定義 91

6.5.2  響應式邊距 92

6.6  浮動樣式 93

6.6.1  實現浮動樣式 93

6.6.2  響應式浮動樣式 94

6.7  display屬性 94

6.7.1  隱藏或顯示元素 95

6.7.2  響應式隱藏或顯示元素 95

6.8  其他通用樣式 96

6.8.1  嵌入網頁元素 97

6.8.2  內容溢出 97

6.8.3  定位網頁元素 98

6.8.4  定義陰影效果 99

6.9  實戰案例——設計服務宣傳頁面 100

第7章  常見CSS組件的使用 103

7.1  下拉菜單 103

7.1.1  定義下拉菜單 103

7.1.2  設置下拉菜單 104

7.1.3  下拉菜單的彈出方向 107

7.1.4  下拉菜單中的文本項 108

7.2  按鈕 109

7.2.1  定義按鈕 109

7.2.2  設計按鈕風格 110

7.2.3  設置塊級按鈕 113

7.3  按鈕組 114

7.3.1  定義按鈕組 114

7.3.2  設置按鈕組大小 114

7.3.3  設計按鈕組的佈局 115

7.4  導航組件 117

7.4.1  定義導航 117

7.4.2  設計導航的佈局 118

7.4.3  設計導航的風格 120

7.4.4  動態導航選項卡 125

7.5  信息提示框 126

7.5.1  定義信息提示框 126

7.5.2  添加鏈接 127

7.5.3  關閉信息提示框 128

7.6  實戰案例——設計左側導航欄頁面 129

第8章  高級CSS組件的使用 132

8.1  導航欄 132

8.1.1  定義導航欄 132

8.1.2  定位導航欄 136

8.1.3  不同顏色導航欄 137

8.1.4  居中對齊導航欄 138

8.1.5  垂直對齊導航欄 139

8.2  進度條 140

8.2.1  定義進度條 140

8.2.2  設計進度條樣式 141

8.2.3  設計進度條風格 143

8.3  列表組 145

8.3.1  定義列表組 145

8.3.2  設置列表組樣式 146

8.3.3  定製列表組內容 148

8.4  分頁效果 148

8.4.1  定義分頁 148

8.4.2  使用圖標 149

8.4.3  設計分頁風格 150

8.5  麵包屑 154

8.5.1  定義麵包屑 154

8.5.2  設計分隔符 155

8.6  徽章 156

8.6.1  定義徽章 156

8.6.2  設置徽章顏色 157

8.6.3  定義橢圓形徽章 158

8.6.4  徽章插入元素內 158

8.7  實戰案例——設計產品展示頁面 159

第9章  卡片、旋轉器和手風琴組件 161

9.1  卡片內容 161

9.1.1  定義卡片 161

9.1.2  卡片的圖片 162

9.1.3  卡片的列表組 163

9.1.4  卡片的頁眉和頁腳 163

9.2  控制卡片的寬度 164

9.2.1  使用網格系統控制 164

9.2.2  使用寬度類控制 165

9.2.3  使用CSS樣式控制 166

9.3  卡片中文本的對齊方式 166

9.4  卡片中添加導航 167

9.5  設計卡片的風格 168

9.5.1  設置卡片的背景顏色 169

9.5.2  設置背景圖像 170

9.5.3  卡片的邊框顏色 170

9.5.4  設計卡片的樣式 171

9.6  卡片排版 172

9.7  旋轉器 173

9.7.1  定義旋轉器 174

9.7.2  設置旋轉器風格 174

9.7.3  設置旋轉器的對齊方式 175

9.7.4  按鈕旋轉器 177

9.8  手風琴組件 178

9.8.1  創建手風琴 178

9.8.2  手風琴組件的樣式 180

9.8.3  手風琴組件中使用列表 182

9.8.4  設計手風琴效果 184

9.9  實戰案例——設計產品推薦頁面 185

第10章  認識JavaScript插件 187

10.1  插件概述 187

10.1.1  插件分類 187

10.1.2  安裝插件 188

10.1.3  調用插件 188

10.2  警告框插件 189

10.2.1  關閉警告框 189

10.2.2  顯示警告框 190

10.3  按鈕插件 191

10.3.1  按鈕式復選框 191

10.3.2  按鈕式單選按鈕 191

10.4  輪播插件 192

10.4.1  定義輪播 192

10.4.2  描述輪播圖片 194

10.4.3  設計輪播風格 195

10.5  折疊插件 197

10.5.1  定義折疊效果 197

10.5.2  控制多目標 198

10.6  下拉菜單插件 200

10.6.1  調用下拉菜單 200

10.6.2  設置下拉菜單 201

10.6.3  添加用戶行為 201

10.7  模態框插件 203

10.7.1  定義模態框 203

10.7.2  模態框佈局 205

10.7.3  模態框樣式 207

10.8  實戰案例——設計搶紅包模態框 210

第11章  精通JavaScript插件 212

11.1  側邊欄導航 212

11.1.1  創建側邊欄導航 212

11.1.2  側邊欄導航的方向 214

11.1.3  設置側邊欄導航背景樣式 215

11.2  彈出框插件 217

11.2.1  創建彈出框 217

11.2.2  彈出框方向 218

11.2.3  關閉彈出框 219

11.3  滾動監聽插件 220

11.3.1  創建滾動監聽 220

11.3.2  導航欄中的滾動監聽 222

11.3.3  垂直導航欄中的滾動監聽 223

11.3.4  列表組中的滾動監聽 225

11.4  標簽頁插件 226

11.5  吐司消息插件 228

11.5.1  創建吐司消息 228

11.5.2  堆疊吐司消息 229

11.5.3  自定義吐司消息 230

11.5.4  設置吐司消息的顏色 231

11.6  提示框插件 232

11.6.1  創建提示框 232

11.6.2  提示框方向 233

11.6.3  調用提示框 233

11.7  實戰案例——設計側邊欄導航 235

第12章  Bootstrap表單的應用 238

12.1  Bootstrap創建表單 238

12.1.1  定義表單控件 238

12.1.2  設置表單控件的大小 239

12.1.3  設置表單控件只讀 240

12.1.4  設置只讀純文本 240

12.1.5  範圍輸入 241

12.2  復選框和單選按鈕 241

12.2.1  默認堆疊方式 242

12.2.2  水平排列方式 243

12.2.3  開關形式的復選框 244

12.3  設計表單的佈局 245

12.3.1  使用網格系統佈局表單 245

12.3.2  設置列的寬度佈局表單 246

12.4  下拉列表 246

12.4.1  單選和多選下拉列表 246

12.4.2  為<input>元素設置下拉列表 247

12.5  幫助文本 248

12.6  禁用表單 249

12.7  浮動標簽 250

12.8  實戰案例——設計聯系信息頁面 251

第13章  綜合項目——開發網上商城網站 253

13.1  網站概述 253

13.1.1  網站結構 253

13.1.2  項目效果 254

13.1.3  設計準備 254

13.2  設計主頁 255

13.2.1  設計網頁頭部 255

13.2.2  設計導航條 256

13.2.3  設計輪播廣告 258

13.3.4  設計橫幅廣告 259

13.2.5  設計產品介紹 261

13.2.6  設計特色展示 264

13.2.7  設計主頁底部 266

13.3  設計其他頁面 269

13.3.1  “關於我們”頁面 269

13.3.2  “服務介紹”頁面 272

13.3.3  “聯系我們”頁面 274

13.3.4  “客戶評價”頁面 276

13.3.5  “團隊介紹”頁面 278