《Bootstrap 5從入門到精通（視頻教學版）》是清華大學出版社出版的一本圖書，作者是李小威。
基本介紹
- 中文名：Bootstrap 5從入門到精通（視頻教學版）
- 作者：李小威
- 出版時間：2023年9月1日
- 出版社：清華大學出版社
- ISBN：9787302644897
- 定價：69 元
- 開本：16 開
- 裝幀：平裝
作者簡介,內容簡介,圖書目錄,
作者簡介
李小威，軟體開發項目經理，資深前端開發工程師，在軟體開發領域有十多年的開發經驗，擅長Web前端、Java、PHP、資料庫、數據分析等技術。著有多本暢銷IT圖書，包括《Vue.js 3.x從入門到精通（視頻教學版）》《MySQL 8.x從入門到精通（視頻教學版）》《Vue.js 3.x高效前端開發（視頻教學版）》《SQL基礎教程（視頻教學版）》《PostgreSQL 11從入門到精通（視頻教學版）》。
內容簡介
《Bootstrap 5從入門到精通：視頻教學版》結合示例和綜合項目的演練，詳細講解Bootstrap開發技術，使讀者快速掌握Bootstrap開發技能，提高使用Bootstrap開發Web前端的實戰能力。本書配套示例源碼、PPT課件、微課教學視頻、教學大綱以及其他超值教學資源，方便讀者快速上手或進行二次開發。
《Bootstrap 5從入門到精通：視頻教學版》共分13章，內容包括Bootstrap 5的基本概念，使用Bootstrap 5的方法，Bootstrap的基本架構，Bootstrap的彈性布局，精通Bootstrap頁面排版，使用CSS通用樣式，常見CSS組件的使用，高級CSS組件的使用，卡片、旋轉器和手風琴組件，認識JavaScript外掛程式，精通JavaScript外掛程式，Bootstrap表單的套用。每一章都配有很多示例和一個小綜合案例，最後一章給出網上商城大綜合案例來提升讀者的實戰能力。
《Bootstrap 5從入門到精通：視頻教學版》內容全面、案例豐富，適合Bootstrap初學者以及Web前端開發人員，是Bootstrap開發人員手邊非常方便的工具書和參考手冊。本書也適合作為高等院校或高職高專相關專業Web前端課程的教材或教輔。
圖書目錄
目 錄
第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
