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

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

第 2章 Bootstrap中常用的基本樣式 8
2.1 排版樣式 8
2.1.1 標(biāo)題樣式 8
2.1.2 添加強(qiáng)調(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 響應(yīng)式表格 27
2.3 圖片 29
2.3.1 響應(yīng)式圖片 29
2.3.2 修飾圖片 29
2.4 其他常用樣式 31
2.4.1 對(duì)文本的處理 31
2.4.2 背景樣式 32
2.4.3 設(shè)置內(nèi)容間隔 33
2.4.4 添加陰影 35
2.5 本章小結(jié) 35
上機(jī)指導(dǎo) 35
習(xí)題 36

第3章 Bootstrap 4彈性盒 37
3.1 響應(yīng)式設(shè)計(jì)概述 37
3.1.1 常見的布局方式 38
3.1.2 布局的實(shí)現(xiàn)方式 38
3.2 彈性盒概述 38
3.2.1 什么是彈性盒 38
3.2.2 彈性盒的基本屬性 39
3.2.3 Bootstrap 4中彈性盒的使用 40
3.3 項(xiàng)目的對(duì)齊與對(duì)準(zhǔn) 42
3.3.1 彈性盒的主軸方向 42
3.3.2 彈性子項(xiàng)目在主軸上的對(duì)齊方式 45
3.3.3 彈性子項(xiàng)目在側(cè)軸上的對(duì)齊方式 49
3.3.4 項(xiàng)目的自對(duì)齊 53
3.4 項(xiàng)目的大小 56
3.4.1 設(shè)置項(xiàng)目自相等 56
3.4.2 設(shè)置項(xiàng)目等寬變換 57
3.4.3 多行內(nèi)容的對(duì)齊 59
3.5 項(xiàng)目的排列 61
3.5.1 設(shè)置項(xiàng)目自浮動(dòng) 61
3.5.2 Wrap包裹 63
3.5.3 order排序 65
3.6 本章小結(jié) 67
上機(jī)指導(dǎo) 67
習(xí)題 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)格化選項(xiàng) 70
4.1.3 網(wǎng)格系統(tǒng)的簡單應(yīng)用 70
4.2 響應(yīng)式的class選擇器 71
4.2.1 覆蓋所有設(shè)備 71
4.2.2 固定網(wǎng)格與流式網(wǎng)格 72
4.2.3 間隙的處理 73
4.3 自動(dòng)布局列 74
4.3.1 等寬布局 74
4.3.2 自定義寬度 75
4.3.3 設(shè)置項(xiàng)目為寬度可變的彈性空間 77
4.3.4 混合布局 78
4.4 項(xiàng)目的對(duì)齊處理 79
4.4.1 項(xiàng)目的水平對(duì)齊 80
4.4.2 項(xiàng)目的垂直對(duì)齊 80
4.4.3 自定義某列的垂直對(duì)齊方式 82
4.4.4 換行處理 82
4.5 列的偏移、嵌套和重排序 83
4.5.1 列的偏移 83
4.5.2 列的嵌套 86
4.5.3 列的重排序 87
4.6 本章小結(jié) 88
上機(jī)指導(dǎo) 89
習(xí)題 89

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

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

第7章 Bootstrap徽章及加載動(dòng)畫 135
7.1 添加徽章 135
7.1.1 徽章的基本使用 135
7.1.2 徽章的樣式 136
7.1.3 徽章的鏈接效果 138
7.2 進(jìn)度條 138
7.2.1 進(jìn)度條的基本使用 139
7.2.2 進(jìn)度條的樣式 139
7.2.3 其他風(fēng)格進(jìn)度條 141
7.3 加載動(dòng)畫 142
7.3.1 加載動(dòng)畫及其樣式 142
7.3.2 設(shè)置加載動(dòng)畫的位置 143
7.3.3 設(shè)置加載動(dòng)畫的大小 145
7.3.4 在按鈕中添加加載動(dòng)畫 145
7.4 本章小結(jié) 146
上機(jī)指導(dǎo) 146
習(xí)題 147

第8章 Bootstrap中的圖文混排 148
8.1 媒體對(duì)象 148
8.1.1 媒體對(duì)象的使用 148
8.1.2 媒體對(duì)象的樣式 149
8.1.3 媒體對(duì)象的嵌套 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 本章小結(jié) 163
上機(jī)指導(dǎo) 163
習(xí)題 165

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

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

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

第 12章 第三方插件的使用 240
12.1 日期選擇器 240
12.1.1 日期選擇器的初級(jí)應(yīng)用 240
12.1.2 日期選擇器的高級(jí)應(yīng)用 242
12.2 對(duì)話框插件 247
12.2.1 警告框 247
12.2.2 確認(rèn)框 250
12.2.3 含表單控件的提示框 254
12.2.4 自定義對(duì)話框 257
12.3 顏色選擇器 260
12.3.1 顏色選擇器的初級(jí)應(yīng)用 260
12.3.2 顏色選擇器的高級(jí)應(yīng)用 263
12.4 本章小結(jié) 266
上機(jī)指導(dǎo) 266
習(xí)題 269

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

第 14章 課程設(shè)計(jì)吃了么外賣網(wǎng) 276
14.1 課程設(shè)計(jì)目的 276
14.2 系統(tǒng)設(shè)計(jì) 276
14.2.1 項(xiàng)目概述 276
14.2.2 系統(tǒng)功能結(jié)構(gòu) 276
14.2.3 文件夾組織結(jié)構(gòu) 277
14.2.4 系統(tǒng)預(yù)覽 277
14.3 首頁、登錄頁面以及注冊(cè)頁面的實(shí)現(xiàn) 278
14.3.1 首頁的實(shí)現(xiàn) 278
14.3.2 登錄頁面的實(shí)現(xiàn) 281
14.3.3 注冊(cè)頁面的實(shí)現(xiàn) 282
14.4 商家版功能實(shí)現(xiàn) 284
14.4.1 商家首頁 284
14.4.2 訂單管理頁面 285
14.4.3 菜品管理和菜品修改頁面 287
14.4.4 留言板管理頁面 289
14.5 買家版功能實(shí)現(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 買家評(píng)價(jià)頁面 300
14.6 本章小結(jié) 304