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

第1章  流行的開發(fā)框架Bootstrap 1
1.1  認識Bootstrap 1
1.1.1  Bootstrap 的由來 1
1.1.2  Bootstrap的構(gòu)成模塊 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  案例實訓(xùn)1——我的第一個Bootstrap網(wǎng)頁 12
2.5  案例實訓(xùn)2——設(shè)計網(wǎng)站主頁的按鈕 13
2.6  疑難問題解惑 14
第3章  快速掌握Bootstrap布局 15
3.1  布局基礎(chǔ) 15
3.1.1  布局容器 15
3.1.2  響應(yīng)斷點 18
3.1.3  z-index堆疊樣式屬性 19
3.1.4  響應(yīng)式容器 19
3.2  網(wǎng)格系統(tǒng) 20
3.2.1  網(wǎng)格選項 20
3.2.2  自動布局列 21
3.2.3  響應(yīng)類 24
3.2.4  重排序 27
3.2.5  列嵌套 29
3.3  案例實訓(xùn)——開發(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  案例實訓(xùn)——對齊內(nèi)容布局 45
4.12  疑難問題解惑 46
第5章  精通頁面排版 48
5.1  頁面排版的初始化 48
5.2  優(yōu)化頁面排版 49
5.2.1  標(biāo)題 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  響應(yīng)式圖片 57
5.4.1  圖像的同步縮放 57
5.4.2  圖像縮略圖 57
5.4.3  圖像對齊方式 57
5.5  優(yōu)化表格的樣式 58
5.5.1  表格默認風(fēng)格 59
5.5.2  為表格設(shè)計個性化風(fēng)格 59
5.6  案例實訓(xùn)——設(shè)計網(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  轉(zhuǎn)換大小寫 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  響應(yīng)式邊距 81
6.6  浮動樣式 81
6.6.1  實現(xiàn)浮動樣式 81
6.6.2  響應(yīng)式浮動樣式 82
6.7  display屬性 83
6.7.1  隱藏或顯示元素 83
6.7.2  響應(yīng)式地隱藏或顯示元素 83
6.8  嵌入網(wǎng)頁元素 84
6.9  內(nèi)容溢出 85
6.10  定位網(wǎng)頁元素 86
6.11  案例實訓(xùn)——陰影效果 87
6.12  疑難問題解惑 88
第7章  Bootstrap在表單中的應(yīng)用 90
7.1  Bootstrap創(chuàng)建表單 90
7.1.1  定義表單控件 90
7.1.2  設(shè)置表單控件的大小 91
7.1.3  設(shè)置表單控件只讀 91
7.1.4  設(shè)置只讀純文本 92
7.1.5  范圍輸入 93
7.2  單選按鈕和復(fù)選框的樣式 93
7.2.1  默認堆疊方式 93
7.2.2  水平排列方式 94
7.2.3  無文本形式 95
7.3  設(shè)計表單的布局 96
7.3.1  使用網(wǎng)格系統(tǒng)布局表單 96
7.3.2  設(shè)置列的寬度 98
7.4  幫助文本 98
7.5  禁用表單 99
7.6  按鈕 100
7.6.1  定義按鈕 100
7.6.2  設(shè)計按鈕風(fēng)格 101
7.7  按鈕組 104
7.7.1  定義按鈕組 104
7.7.2  定義按鈕組工具欄 104
7.7.3  設(shè)計按鈕的組布局和樣式 105
7.8  下拉菜單 108
7.8.1  定義下拉菜單 108
7.8.2  設(shè)計下拉按鈕的樣式 109
7.8.3  設(shè)計下拉菜單的樣式 110
7.8.4  單選和多選下拉菜單 114
7.8.5  為元素設(shè)置下拉菜單 115
7.9  Bootstrap 5.X新增的浮動標(biāo)簽 115
7.10  案例實訓(xùn)——設(shè)置表單的驗證功能 116
7.11  疑難問題解惑 117
第8章  常用的CSS組件 119
8.1  導(dǎo)航組件 119
8.1.1  定義導(dǎo)航 119
8.1.2  設(shè)計導(dǎo)航的布局 120
8.1.3  設(shè)計導(dǎo)航的風(fēng)格 122
8.1.4  設(shè)計導(dǎo)航選項卡 125
8.2  警告框 127
8.2.1  定義警告框 127
8.2.2  添加鏈接 129
8.2.3  額外附加內(nèi)容 130
8.2.4  關(guān)閉警告框 130
8.3  徽章 131
8.3.1  定義徽章 131
8.3.2  設(shè)置顏色 132
8.3.3  橢圓形徽章 133
8.4  進度條 134
8.4.1  定義進度條 134
8.4.2  設(shè)計進度條樣式 135
8.4.3  設(shè)計進度條風(fēng)格 136
8.5  案例實訓(xùn)——設(shè)計具有淡入效果的 導(dǎo)航選項卡 138
8.6  疑難問題解惑 139
第9章  高級的CSS組件 141
9.1  導(dǎo)航欄 141
9.1.1  定義導(dǎo)航欄 141
9.1.2  定位導(dǎo)航欄 145
9.1.3  設(shè)計導(dǎo)航欄的顏色 146
9.2  列表組 146
9.2.1  定義列表組 147
9.2.2  設(shè)計列表組的風(fēng)格樣式 147
9.2.3  定制內(nèi)容 150
9.3  面包屑 151
9.3.1  定義面包屑 151
9.3.2  設(shè)計分隔符 152
9.4  分頁效果 153
9.4.1  定義分頁 153
9.4.2  使用圖標(biāo) 154
9.4.3  設(shè)計分頁風(fēng)格 154
9.5  案例實訓(xùn)——設(shè)計企業(yè)招聘表頁面 158
9.6  疑難問題解答 159
第10章  卡片、旋轉(zhuǎn)器和手風(fēng)琴組件 160
10.1  卡片內(nèi)容 160
10.1.1  卡片的標(biāo)題、主體、文本和超鏈接 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  卡片中添加導(dǎo)航 165
10.5  設(shè)計卡片的風(fēng)格 167
10.5.1  設(shè)置卡片的背景顏色 167
10.5.2  設(shè)置背景圖像 168
10.5.3  卡片的邊框顏色 169
10.5.4  設(shè)計卡片的樣式 170
10.6  卡片排版 170
10.7  旋轉(zhuǎn)器 172
10.7.1  定義旋轉(zhuǎn)器 172
10.7.2  設(shè)置旋轉(zhuǎn)器風(fēng)格 172
10.7.3  設(shè)置旋轉(zhuǎn)器的對齊方式 174
10.7.4  按鈕旋轉(zhuǎn)器 175
10.8  新增的手風(fēng)琴組件 176
10.8.1  創(chuàng)建手風(fēng)琴 176
10.8.2  手風(fēng)琴組件的結(jié)構(gòu) 177
10.8.3  手風(fēng)琴組件的樣式 178
10.8.4  在手風(fēng)琴組件中使用列表 179
10.9  案例實訓(xùn)——使用網(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  關(guān)閉警告框 187
11.2.2  顯示警告框 188
11.3  按鈕 189
11.4  輪播 190
11.4.1  定義輪播 190
11.4.2  設(shè)計輪播風(fēng)格 192
11.5  折疊 194
11.5.1  定義折疊效果 194
11.5.2  控制多目標(biāo) 195
11.5.3  設(shè)計手風(fēng)琴效果 196
11.6  下拉菜單 197
11.6.1  調(diào)用下拉菜單 197
11.6.2  設(shè)置下拉菜單 198
11.6.3  添加用戶行為 198
11.7  模態(tài)框 200
11.7.1  定義模態(tài)框 200
11.7.2  模態(tài)框的布局和樣式 202
11.8  案例實訓(xùn)——設(shè)計搶紅包提示框 206
11.9  疑難問題解答 207
第12章  精通JavaScript插件 209
12.1  側(cè)邊欄導(dǎo)航 209
12.1.1  創(chuàng)建側(cè)邊欄導(dǎo)航 209
12.1.2  側(cè)邊欄導(dǎo)航的組件 210
12.1.3  設(shè)置背景及背景是否可滾動 211
12.1.4  通過JavaScript控制側(cè)邊欄導(dǎo)航 213
12.2  彈窗 213
12.2.1  創(chuàng)建彈窗 213
12.2.2  設(shè)置彈窗方向 214
12.2.3  關(guān)閉彈窗 215
12.3  滾動監(jiān)聽 216
12.3.1  導(dǎo)航欄中的滾動監(jiān)聽 216
12.3.2  嵌套導(dǎo)航欄中的滾動監(jiān)聽 218
12.3.3  列表組中的滾動監(jiān)聽 219
12.4  標(biāo)簽頁 221
12.5  提示框 222
12.5.1  創(chuàng)建提示框 222
12.5.2  設(shè)置提示框的顯示位置 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  設(shè)置吐司消息的顏色 228
12.7  案例實訓(xùn)——設(shè)計熱銷商品推薦區(qū) 228
12.8  疑難問題解答 231
第13章  項目實訓(xùn)1——招聘網(wǎng)中的簡歷模板 232
13.1  案例概述 232
13.1.1  案例結(jié)構(gòu) 232
13.1.2  設(shè)計效果 232
13.1.3  設(shè)計準(zhǔn)備 234
13.2  設(shè)計布局 235
13.3  設(shè)計左側(cè)信息欄 236
13.4  設(shè)計導(dǎo)航條 237
13.5  設(shè)計主頁 238
13.5.1  工作經(jīng)歷 238
13.5.2  專業(yè)技能 239
13.5.3  教育經(jīng)歷 240
13.5.4  綜合概述 241
13.6  設(shè)計聯(lián)系頁 242
13.7  設(shè)計相冊頁 243
第14章  項目實訓(xùn)2——開發(fā)連鎖咖啡網(wǎng)站 245
14.1  網(wǎng)站概述 245
14.1.1  網(wǎng)站結(jié)構(gòu) 245
14.1.2  設(shè)計效果 245
14.1.3  設(shè)計準(zhǔn)備 246
14.2  設(shè)計首頁布局 247
14.3  設(shè)計可切換導(dǎo)航 247
14.4  主體內(nèi)容 252
14.4.1  設(shè)計輪播廣告區(qū) 252
14.4.2  設(shè)計產(chǎn)品推薦區(qū) 253
14.4.3  設(shè)計登錄、注冊按鈕和Logo 254
14.4.4  設(shè)計特色展示區(qū) 255
14.4.5  設(shè)計產(chǎn)品生產(chǎn)流程區(qū) 256
14.5  設(shè)計底部隱藏導(dǎo)航 259
第15章  項目實訓(xùn)3——開發(fā)攝影相冊類項目 260
15.1  案例概述 260
15.1.1  案例結(jié)構(gòu) 260
15.1.2  設(shè)計效果 261
15.1.3  設(shè)計準(zhǔn)備 262
15.2  設(shè)計導(dǎo)航欄 263
15.3  設(shè)計首頁 264
15.3.1  設(shè)計相冊展示區(qū) 264
15.3.2  添加Swipebox燈箱插件 266
15.4  分類頁 270
15.4.1  設(shè)計相冊分類展示 270
15.4.2  添加Swipebox燈箱插件 273
15.5  博客 274
15.6  聯(lián)系頁 275
第16章  項目實訓(xùn)4——設(shè)計流行企業(yè)網(wǎng)站 278
16.1  網(wǎng)站概述 278
16.1.1  網(wǎng)站結(jié)構(gòu) 278
16.1.2  設(shè)計效果 278
16.1.3  設(shè)計準(zhǔn)備 279
16.2  設(shè)計主頁 280
16.2.1  主頁布局 280
16.2.2  設(shè)計導(dǎo)航條 280
16.2.3  設(shè)計輪播廣告 282
16.2.4  設(shè)計功能區(qū) 283
16.2.5  設(shè)計特色展示 285
16.2.6  設(shè)計腳注 288
16.3  設(shè)計側(cè)邊導(dǎo)航欄 289
16.4  設(shè)計登錄頁 290
第17章  項目實訓(xùn)5——Web設(shè)計與定制網(wǎng)站 292
17.1  網(wǎng)站概述 292
17.1.1  網(wǎng)站結(jié)構(gòu) 292
17.1.2  網(wǎng)站布局 292
17.1.3  設(shè)計準(zhǔn)備 293
17.2  設(shè)計主頁面導(dǎo)航 293
17.3  設(shè)計主頁面內(nèi)容 296
17.3.1  設(shè)計首頁 296
17.3.2  關(guān)于我們 297
17.3.3  我們的團隊 299
17.3.4  我們的服務(wù) 302
17.3.5  我們的博客 303
17.3.6  我們的定制 304
17.4  設(shè)計腳注 306
第18章  項目實訓(xùn)6——開發(fā)神影視頻網(wǎng)站 307
18.1  網(wǎng)站概述 307
18.1.1  網(wǎng)站結(jié)構(gòu) 307
18.1.2  網(wǎng)站布局 307
18.1.3  網(wǎng)站效果 307
18.1.4  設(shè)計準(zhǔn)備 308
18.2  設(shè)計主頁面 309
18.2.1  設(shè)計頭部內(nèi)容 309
18.2.2  設(shè)計輪播 310
18.2.3  設(shè)計分類列表 311
18.2.4  設(shè)計視頻內(nèi)容 313
18.2.5  設(shè)計腳注 317