《Bootstrap 5.X從入門到項目實戰》是2023年6月1日清華大學出版社出版的圖書，作者：李愛玲。
基本介紹
- 中文名：Bootstrap 5.X從入門到項目實戰
- 作者：李愛玲
- 出版時間：2023年6月1日
- 出版社：清華大學出版社
- ISBN：9787302638735
- 定價：75 元
- 印次：1-1
- 印刷日期：2023.06.30
內容簡介,圖書目錄,
內容簡介
《Bootstrap 5.X從入門到項目實戰》是針對零基礎讀者編寫的網站前端開發入門教材。本書採用目前**的Bootstrap 5.X版本，側重案例實訓，書中配有豐富的微課視頻，讀者可以通過微課視頻更為直觀地學習有關網站前端開發的熱點案例。
《Bootstrap 5.X從入門到項目實戰》分為18章，包括流行的開發框架Bootstrap，使用**的框架Bootstrap 5.X，快速掌握Bootstrap布局，Bootstrap中的彈性盒子布局，精通頁面排版，CSS通用樣式，Bootstrap在表單中的套用，常用的CSS組件，高級的CSS組件，卡片、旋轉器和手風琴組件，認識JavaScript外掛程式，精通JavaScript外掛程式等內容。最後通過6個熱點綜合項目，幫助讀者進一步掌握項目開發技能。
《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
