Bootstrap 5.X從入門到項目實戰(zhàn)

第1章  流行的開發(fā)框架Bootstrap 1
1.1  認識Bootstrap 1
1.1.1  Bootstrap 的由來 1
1.1.2  Bootstrap的構成模塊 2
1.2  Bootstrap 的特色 2
1.3  Bootstrap的優(yōu)勢 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 的在線開發(fā)工具 11
2.4  案例實訓1——我的第一個Bootstrap網(wǎng)頁 12
2.5  案例實訓2——設計網(wǎng)站主頁的按鈕 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  網(wǎng)格系統(tǒng) 20
3.2.1  網(wǎng)格選項 20
3.2.2  自動布局列 21
3.2.3  響應類 24
3.2.4  重排序 27
3.2.5  列嵌套 29
3.3  案例實訓——開發(fā)電商網(wǎng)站特效 30
3.4  疑難問題解惑 33
第4章  Bootstrap中的彈性盒子布局 34
4.1  定義彈性盒子 34
4.2  排列方向 35
4.2.1  水平方向排列 35
4.2.2  垂直方向排列 36
4.3  內(nèi)容排列布局 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  案例實訓——對齊內(nèi)容布局 45
4.12  疑難問題解惑 46
第5章  精通頁面排版 48
5.1  頁面排版的初始化 48
5.2  優(yōu)化頁面排版 49
5.2.1  標題 49
5.2.2  段落 52
5.2.3  強調(diào) 53
5.2.4  縮略語 54
5.2.5  引用 55
5.3  顯示代碼 55
5.3.1  行內(nèi)代碼 56
5.3.2  多行代碼塊 56
5.4  響應式圖片 57
5.4.1  圖像的同步縮放 57
5.4.2  圖像縮略圖 57
5.4.3  圖像對齊方式 57
5.5  優(yōu)化表格的樣式 58
5.5.1  表格默認風格 59
5.5.2  為表格設計個性化風格 59
5.6  案例實訓——設計網(wǎng)站后臺人員 管理系統(tǒng)頁面 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  實現(xiàn)浮動樣式 81
6.6.2  響應式浮動樣式 82
6.7  display屬性 83
6.7.1  隱藏或顯示元素 83
6.7.2  響應式地隱藏或顯示元素 83
6.8  嵌入網(wǎng)頁元素 84
6.9  內(nèi)容溢出 85
6.10  定位網(wǎng)頁元素 86
6.11  案例實訓——陰影效果 87
6.12  疑難問題解惑 88
第7章  Bootstrap在表單中的應用 90
7.1  Bootstrap創(chuàng)建表單 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  使用網(wǎng)格系統(tǒng)布局表單 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  為元素設置下拉菜單 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  額外附加內(nèi)容 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  定制內(nèi)容 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  案例實訓——設計企業(yè)招聘表頁面 158
9.6  疑難問題解答 159
第10章  卡片、旋轉器和手風琴組件 160
10.1  卡片內(nèi)容 160
10.1.1  卡片的標題、主體、文本和超鏈接 160
10.1.2  卡片的圖片 161
10.1.3  卡片的列表組 161
10.1.4  卡片的頁眉和頁腳 162
10.2  控制卡片的寬度 163
10.2.1  使用網(wǎng)格系統(tǒng)控制卡片的寬度 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  創(chuàng)建手風琴 176
10.8.2  手風琴組件的結構 177
10.8.3  手風琴組件的樣式 178
10.8.4  在手風琴組件中使用列表 179
10.9  案例實訓——使用網(wǎng)格系統(tǒng)布局卡片 181
10.10  疑難問題解答 183
第11章  認識JavaScript插件 185
11.1  插件概述 185
11.1.1  插件分類 185
11.1.2  安裝插件 186
11.1.3  調(diào)用插件 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  調(diào)用下拉菜單 197
11.6.2  設置下拉菜單 198
11.6.3  添加用戶行為 198
11.7  模態(tài)框 200
11.7.1  定義模態(tài)框 200
11.7.2  模態(tài)框的布局和樣式 202
11.8  案例實訓——設計搶紅包提示框 206
11.9  疑難問題解答 207
第12章  精通JavaScript插件 209
12.1  側邊欄導航 209
12.1.1  創(chuàng)建側邊欄導航 209
12.1.2  側邊欄導航的組件 210
12.1.3  設置背景及背景是否可滾動 211
12.1.4  通過JavaScript控制側邊欄導航 213
12.2  彈窗 213
12.2.1  創(chuàng)建彈窗 213
12.2.2  設置彈窗方向 214
12.2.3  關閉彈窗 215
12.3  滾動監(jiān)聽 216
12.3.1  導航欄中的滾動監(jiān)聽 216
12.3.2  嵌套導航欄中的滾動監(jiān)聽 218
12.3.3  列表組中的滾動監(jiān)聽 219
12.4  標簽頁 221
12.5  提示框 222
12.5.1  創(chuàng)建提示框 222
12.5.2  設置提示框的顯示位置 223
12.5.3  調(diào)用提示框 224
12.6  吐司消息 225
12.6.1  創(chuàng)建吐司消息 225
12.6.2  堆疊吐司消息 226
12.6.3  自定義吐司消息 227
12.6.4  設置吐司消息的顏色 228
12.7  案例實訓——設計熱銷商品推薦區(qū) 228
12.8  疑難問題解答 231
第13章  項目實訓1——招聘網(wǎng)中的簡歷模板 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  工作經(jīng)歷 238
13.5.2  專業(yè)技能 239
13.5.3  教育經(jīng)歷 240
13.5.4  綜合概述 241
13.6  設計聯(lián)系頁 242
13.7  設計相冊頁 243
第14章  項目實訓2——開發(fā)連鎖咖啡網(wǎng)站 245
14.1  網(wǎng)站概述 245
14.1.1  網(wǎng)站結構 245
14.1.2  設計效果 245
14.1.3  設計準備 246
14.2  設計首頁布局 247
14.3  設計可切換導航 247
14.4  主體內(nèi)容 252
14.4.1  設計輪播廣告區(qū) 252
14.4.2  設計產(chǎn)品推薦區(qū) 253
14.4.3  設計登錄、注冊按鈕和Logo 254
14.4.4  設計特色展示區(qū) 255
14.4.5  設計產(chǎn)品生產(chǎn)流程區(qū) 256
14.5  設計底部隱藏導航 259
第15章  項目實訓3——開發(fā)攝影相冊類項目 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  設計相冊展示區(qū) 264
15.3.2  添加Swipebox燈箱插件 266
15.4  分類頁 270
15.4.1  設計相冊分類展示 270
15.4.2  添加Swipebox燈箱插件 273
15.5  博客 274
15.6  聯(lián)系頁 275
第16章  項目實訓4——設計流行企業(yè)網(wǎng)站 278
16.1  網(wǎng)站概述 278
16.1.1  網(wǎng)站結構 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  設計功能區(qū) 283
16.2.5  設計特色展示 285
16.2.6  設計腳注 288
16.3  設計側邊導航欄 289
16.4  設計登錄頁 290
第17章  項目實訓5——Web設計與定制網(wǎng)站 292
17.1  網(wǎng)站概述 292
17.1.1  網(wǎng)站結構 292
17.1.2  網(wǎng)站布局 292
17.1.3  設計準備 293
17.2  設計主頁面導航 293
17.3  設計主頁面內(nèi)容 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——開發(fā)神影視頻網(wǎng)站 307
18.1  網(wǎng)站概述 307
18.1.1  網(wǎng)站結構 307
18.1.2  網(wǎng)站布局 307
18.1.3  網(wǎng)站效果 307
18.1.4  設計準備 308
18.2  設計主頁面 309
18.2.1  設計頭部內(nèi)容 309
18.2.2  設計輪播 310
18.2.3  設計分類列表 311
18.2.4  設計視頻內(nèi)容 313
18.2.5  設計腳注 317