【章名目錄】
第 1章 Bootstrap起步 1
第 2章 Bootstrap中常用的基本樣式 8
第3章 Bootstrap 4彈性盒 37
第4章 Bootstrap網(wǎng)格布局 69
第5章 Bootstrap表單 90
第6章 Bootstrap相關組件 117
第7章 Bootstrap徽章及加載動畫 135
第8章 Bootstrap中的圖文混排 148
第9章 設置Bootstrap中的公共樣式 166
第 10章 Bootstrap的窗口和提示工具 184
第 11章 折疊面板與輪播組件 218
第 12章 第三方插件的使用 240
第 13章 綜合案例抖音秀 270
第 14章 課程設計吃了么外賣網(wǎng) 276

【詳細目錄】
第 1章 Bootstrap起步 1
1.1 Bootstrap概述 1
1.1.1 Bootstrap是什么 1
1.1.2 Bootstrap版本的進化 1
1.2 為什么使用Bootstrap 2
1.2.1 Bootstrap的優(yōu)點 2
1.2.2 Bootstrap包含的內(nèi)容 3
1.2.3 Bootstrap的應用 3
1.3 Bootstrap的下載及使用 3
1.3.1 Bootstrap的下載 3
1.3.2 Bootstrap的文件結構 4
1.3.3 Bootstrap的使用 5
1.4 本章小結 6
上機指導 7
習題 7

第 2章 Bootstrap中常用的基本樣式 8
2.1 排版樣式 8
2.1.1 標題樣式 8
2.1.2 添加強調(diào)文本 10
2.1.3 縮略語樣式 13
2.1.4 地址樣式 14
2.1.5 引用樣式 15
2.1.6 列表樣式 16
2.2 表格 20
2.2.1 基本的表格 20
2.2.2 可選的表格樣式 21
2.2.3 響應式表格 27
2.3 圖片 29
2.3.1 響應式圖片 29
2.3.2 修飾圖片 29
2.4 其他常用樣式 31
2.4.1 對文本的處理 31
2.4.2 背景樣式 32
2.4.3 設置內(nèi)容間隔 33
2.4.4 添加陰影 35
2.5 本章小結 35
上機指導 35
習題 36

第3章 Bootstrap 4彈性盒 37
3.1 響應式設計概述 37
3.1.1 常見的布局方式 38
3.1.2 布局的實現(xiàn)方式 38
3.2 彈性盒概述 38
3.2.1 什么是彈性盒 38
3.2.2 彈性盒的基本屬性 39
3.2.3 Bootstrap 4中彈性盒的使用 40
3.3 項目的對齊與對準 42
3.3.1 彈性盒的主軸方向 42
3.3.2 彈性子項目在主軸上的對齊方式 45
3.3.3 彈性子項目在側軸上的對齊方式 49
3.3.4 項目的自對齊 53
3.4 項目的大小 56
3.4.1 設置項目自相等 56
3.4.2 設置項目等寬變換 57
3.4.3 多行內(nèi)容的對齊 59
3.5 項目的排列 61
3.5.1 設置項目自浮動 61
3.5.2 Wrap包裹 63
3.5.3 order排序 65
3.6 本章小結 67
上機指導 67
習題 68

第4章 Bootstrap網(wǎng)格布局 69
4.1 網(wǎng)格系統(tǒng)概述 69
4.1.1 什么是網(wǎng)格系統(tǒng) 69
4.1.2 網(wǎng)格化選項 70
4.1.3 網(wǎng)格系統(tǒng)的簡單應用 70
4.2 響應式的class選擇器 71
4.2.1 覆蓋所有設備 71
4.2.2 固定網(wǎng)格與流式網(wǎng)格 72
4.2.3 間隙的處理 73
4.3 自動布局列 74
4.3.1 等寬布局 74
4.3.2 自定義寬度 75
4.3.3 設置項目為寬度可變的彈性空間 77
4.3.4 混合布局 78
4.4 項目的對齊處理 79
4.4.1 項目的水平對齊 80
4.4.2 項目的垂直對齊 80
4.4.3 自定義某列的垂直對齊方式 82
4.4.4 換行處理 82
4.5 列的偏移、嵌套和重排序 83
4.5.1 列的偏移 83
4.5.2 列的嵌套 86
4.5.3 列的重排序 87
4.6 本章小結 88
上機指導 89
習題 89

第5章 Bootstrap表單 90
5.1 表單的風格 90
5.1.1 表單支持的控件 90
5.1.2 控件的狀態(tài) 94
5.1.3 表單的布局風格 95
5.2 下拉菜單 98
5.2.1 設置下拉菜單 98
5.2.2 下拉菜單內(nèi)容設置 100
5.2.3 下拉菜單的狀態(tài) 102
5.3 下拉菜單樣式設置 103
5.3.1 下拉菜單的展開方向 103
5.3.2 下拉菜單的對齊方式 104
5.3.3 下拉菜單的響應式對齊 104
5.4 按鈕 105
5.4.1 按鈕的風格 105
5.4.2 按鈕的大小 108
5.4.3 按鈕的狀態(tài) 109
5.5 按鈕組 109
5.5.1 設置按鈕組 109
5.5.2 按鈕組的嵌套 110
5.5.3 垂直排列的按鈕組 111
5.6 輸入框組 111
5.6.1 定義輸入框組 112
5.6.2 輸入框組的樣式 112
5.7 本章小結 115
上機指導 115
習題 116

第6章 Bootstrap相關組件 117
6.1 導航菜單 117
6.1.1 導航菜單的基本樣式 117
6.1.2 導航菜單的對齊與填充 119
6.1.3 選項卡 121
6.2 導航欄 123
6.2.1 導航欄的內(nèi)容組成 123
6.2.2 導航欄的樣式 125
6.2.3 響應式導航欄 127
6.3 面包屑導航與分頁 129
6.3.1 面包屑導航 129
6.3.2 設置分頁及其樣式 130
6.4 本章小結 133
上機指導 133
習題 134

第7章 Bootstrap徽章及加載動畫 135
7.1 添加徽章 135
7.1.1 徽章的基本使用 135
7.1.2 徽章的樣式 136
7.1.3 徽章的鏈接效果 138
7.2 進度條 138
7.2.1 進度條的基本使用 139
7.2.2 進度條的樣式 139
7.2.3 其他風格進度條 141
7.3 加載動畫 142
7.3.1 加載動畫及其樣式 142
7.3.2 設置加載動畫的位置 143
7.3.3 設置加載動畫的大小 145
7.3.4 在按鈕中添加加載動畫 145
7.4 本章小結 146
上機指導 146
習題 147

第8章 Bootstrap中的圖文混排 148
8.1 媒體對象 148
8.1.1 媒體對象的使用 148
8.1.2 媒體對象的樣式 149
8.1.3 媒體對象的嵌套 152
8.2 列表組 152
8.2.1 列表組的基本使用 152
8.2.2 列表組的樣式 154
8.2.3 列表組的嵌套使用 155
8.3 卡片 157
8.3.1 卡片的基本使用 157
8.3.2 卡片的樣式 158
8.3.3 卡片的排列 161
8.4 本章小結 163
上機指導 163
習題 165

第9章 設置Bootstrap中的公共樣式 166
9.1 邊框樣式 166
9.1.1 添加和清除邊框 166
9.1.2 設置圓角 169
9.2 設置浮動與清除浮動 170
9.2.1 如何設置浮動 170
9.2.2 設置響應式浮動 172
9.2.3 清除浮動 172
9.3 設置元素位置 173
9.3.1 設置元素的定位方式 174
9.3.2 固定元素的位置 177
9.4 display屬性 179
9.4.1 如何設置display屬性 179
9.4.2 設置元素的顯示與隱藏 180
9.5 本章小結 182
上機指導 182
習題 183

第 10章 Bootstrap的窗口和提示工具 184
10.1 警告框 184
10.1.1 添加警告框 184
10.1.2 為警告框添加關閉按鈕 186
10.1.3 警告框組件的方法與事件 188
10.2 模態(tài)框 190
10.2.1 模態(tài)框的調(diào)用 190
10.2.2 動態(tài)模態(tài)框 192
10.2.3 模態(tài)框組件的選項、方法與事件 198
10.3 提示工具的使用 202
10.3.1 toast組件 202
10.3.2 tooltip組件 205
10.3.3 popover組件 210
10.4 本章小結 216
上機指導 216
習題 217

第 11章 折疊面板與輪播組件 218
11.1 滾動監(jiān)聽組件 218
11.1.1 滾動監(jiān)聽組件的使用 218
11.1.2 在嵌套的導航中添加滾動監(jiān)聽 221
11.1.3 在列表組中添加滾動監(jiān)聽 222
11.1.4 滾動監(jiān)聽組件的選項、方法和事件 223
11.2 折疊面板組件 225
11.2.1 折疊面板組件的使用 225
11.2.2 控制多個折疊面板 226
11.2.3 手風琴折疊面板 227
11.2.4 折疊面板組件的選項、方法和事件 228
11.3 輪播組件 230
11.3.1 輪播組件的使用 231
11.3.2 設置輪播組件的風格 234
11.3.3 輪播組件的選項、方法和事件 235
11.4 大塊屏組件 237
11.5 本章小結 238
上機指導 238
習題 239

第 12章 第三方插件的使用 240
12.1 日期選擇器 240
12.1.1 日期選擇器的初級應用 240
12.1.2 日期選擇器的高級應用 242
12.2 對話框插件 247
12.2.1 警告框 247
12.2.2 確認框 250
12.2.3 含表單控件的提示框 254
12.2.4 自定義對話框 257
12.3 顏色選擇器 260
12.3.1 顏色選擇器的初級應用 260
12.3.2 顏色選擇器的高級應用 263
12.4 本章小結 266
上機指導 266
習題 269

第 13章 綜合案例抖音秀 270
13.1 項目概述 270
13.2 設計流程 270
13.3 系統(tǒng)預覽 271
13.4 開發(fā)工具準備 271
13.5 抖音秀的實現(xiàn) 271
13.5.1 頁頭頁尾區(qū) 271
13.5.2 視頻功能區(qū) 273
13.5.3 掛件功能區(qū) 274
13.6 本章小結 275

第 14章 課程設計吃了么外賣網(wǎng) 276
14.1 課程設計目的 276
14.2 系統(tǒng)設計 276
14.2.1 項目概述 276
14.2.2 系統(tǒng)功能結構 276
14.2.3 文件夾組織結構 277
14.2.4 系統(tǒng)預覽 277
14.3 首頁、登錄頁面以及注冊頁面的實現(xiàn) 278
14.3.1 首頁的實現(xiàn) 278
14.3.2 登錄頁面的實現(xiàn) 281
14.3.3 注冊頁面的實現(xiàn) 282
14.4 商家版功能實現(xiàn) 284
14.4.1 商家首頁 284
14.4.2 訂單管理頁面 285
14.4.3 菜品管理和菜品修改頁面 287
14.4.4 留言板管理頁面 289
14.5 買家版功能實現(xiàn) 290
14.5.1 買家首頁 290
14.5.2 商品選購頁面 291
14.5.3 商品支付頁面 296
14.5.4 支付方式選擇頁面 298
14.5.5 訂單追蹤頁面 299
14.5.6 買家評價頁面 300
14.6 本章小結 304