Bootstrap 4 Web設計與開發(fā)實戰(zhàn)

第1章  Bootstrap從何而來 // 1
1.1  初識Bootstrap // 1
1.2  什么是響應式設計 // 2
1.3  響應式設計四大原則 // 3
1.3.1  移動優(yōu)先還是PC優(yōu)先 // 3
1.3.2  內(nèi)容流 // 4
1.3.3  位圖還是矢量圖 // 4
1.3.4  相對單位還是固定單位 // 4
1.4  Bootstrap設計目標 // 5
1.4.1  優(yōu)先針對移動設備 // 5
1.4.2  瀏覽器支持 // 5
1.4.3  響應式設計 // 6
1.5  本章小結(jié) // 6
 
第2章  Bootstrap開發(fā)環(huán)境 // 7
2.1  Bootstrap開發(fā)環(huán)境概述 // 7
2.1.1  下載Bootstrap開發(fā)包 // 7
2.1.2  Bootstrap開發(fā)包目錄結(jié)構(gòu) // 9
2.1.3  在網(wǎng)站中使用Bootstrap框架 // 10
2.2  調(diào)用Bootstrap樣式 // 11
2.3  調(diào)用Bootstrap組件 // 14
2.4  調(diào)用Bootstrap JS特效 // 15
2.5  實戰(zhàn)：一個Bootstrap實現(xiàn)的響應式頁面 // 16
2.6  本章小結(jié) // 18
 
第3章  Bootstrap腳手架 // 19
3.1  Bootstrap全局樣式 // 19
3.1.1  什么是全局樣式 // 19
3.1.2  基于HTML5文檔類型 // 19
3.1.3  屏幕、排版與鏈接 // 20
3.2  柵格系統(tǒng) // 21
3.2.1  默認柵格系統(tǒng) // 21
3.2.2  流式柵格系統(tǒng) // 24
3.3  頁面布局 // 26
3.3.1  固定布局和流式布局 // 27
3.3.2  Bootstrap 4彈性布局（FlexBox） // 27
3.4  響應式設計 // 28
3.4.1  啟用響應式特性 // 28
3.4.2  響應式Bootstrap特點 // 28
3.4.3  Bootstrap支持的設備 // 29
3.4.4  響應式布局輔助類 // 29
3.4.5  響應式FlexBox的重要類 // 30
3.5  從Less到Sass // 34
3.6  本章小結(jié) // 34
 
第4章  Bootstrap樣式設計 // 35
4.1  Bootstrap排版 // 35
4.1.1  標題 // 35
4.1.2  頁面主體 // 38
4.1.3  強調(diào) // 38
4.1.4  縮略語 // 41
4.1.5  地址 // 42
4.1.6  引用 // 42
4.1.7  列表 // 43
4.1.8  描述 // 47
4.1.9  代碼 // 47
4.2  Bootstrap表格 // 49
4.2.1  默認樣式表格 // 49
4.2.2  斑馬紋樣式表格 // 51
4.2.3  圓角邊框樣式表格 // 52
4.2.4  鼠標懸停樣式表格 // 53
4.2.5  帶行屬性樣式表格 // 55
4.3  Bootstrap按鈕 // 56
4.3.1  默認樣式按鈕 // 56
4.3.2  按鈕大小樣式 // 58
4.3.3  特殊樣式按鈕 // 59
4.4  Bootstrap圖片 // 61
4.5  本章小結(jié) // 61
 
第5章  Bootstrap組件設計 // 62
5.1  Bootstrap下拉菜單 // 62
5.1.1  標簽 // 62
5.1.2  對齊方式與彈出方向 // 63
5.1.3  禁用 // 65
5.2  Bootstrap按鈕組 // 65
5.2.1  基本按鈕組 // 66
5.2.2  工具欄按鈕組 // 66
5.2.3  垂直按鈕組 // 67
5.3  Bootstrap按鈕式下拉菜單 // 68
5.4  Bootstrap導航 // 71
5.4.1  默認標簽導航 // 71
5.4.2  pills標簽導航 // 72
5.4.3  堆疊式標簽導航 // 73
5.4.4  下拉菜單式標簽導航 // 74
5.4.5  標簽頁式導航 // 75
5.4.6  菜單項的居中 // 77
5.5  Bootstrap導航條 // 78
5.5.1  默認樣式導航條 // 78
5.5.2  導航條表單 // 79
5.5.3  小屏幕的折疊導航條 // 80
5.6  Bootstrap分頁 // 82
5.6.1  標準分頁方式 // 82
5.6.2  翻頁分頁方式 // 84
5.6.3  分頁方式中的字體 // 84
5.7  Bootstrap標簽與徽章 // 86
5.8  Bootstrap進度條 // 87
5.8.1  基本樣式進度條 // 87
5.8.2  斜條紋樣式進度條 // 88
5.8.3  堆疊樣式進度條 // 89
5.9  被刪除的Glyphicons字體圖標 // 89
5.10  本章小結(jié) // 91
 
第6章  Bootstrap插件設計 // 92
6.1  Bootstrap插件概述 // 92
6.1.1  單個或全部引入 // 92
6.1.2  data屬性 // 93
6.1.3  事件 // 93
6.2  Bootstrap模態(tài)對話框 // 93
6.2.1  模態(tài)對話框說明 // 94
6.2.2  靜態(tài)模態(tài)對話框 // 94
6.2.3  動態(tài)模態(tài)對話框 // 95
6.3  Bootstrap下拉菜單（高級版） // 98
6.4  Bootstrap滾動監(jiān)聽 // 101
6.5  Bootstrap可切換式標簽頁 // 104
6.6  Bootstrap提示框 // 107
6.6.1  工具提示框 // 107
6.6.2  彈出框 // 109
6.6.3  警告框 // 113
6.7  Bootstrap按鈕 // 114
6.7.1  狀態(tài)按鈕 // 114
6.7.2  復選按鈕 // 116
6.7.3  單選按鈕 // 117
6.8  Bootstrap中的卡片與折疊 // 118
6.9  Bootstrap幻燈 // 121
6.10  本章小結(jié) // 123
 
第7章  Bootstrap響應式多媒體 // 124
7.1  Bootstrap圖標的響應式 // 124
7.2  Bootstrap圖像的響應式 // 126
7.2.1  可適配的圖像 // 126
7.2.2  圖像網(wǎng)格 // 128
7.3  Bootstrap視頻的響應式 // 133
7.4  本章小結(jié) // 134
 
第8章  Bootstrap扁平化風格頁面 // 135
8.1  扁平化設計概述 // 135
8.1.1  介紹 // 135
8.1.2  設計理念 // 136
8.1.3  頁面架構(gòu) // 136
8.2  頁眉設計 // 137
8.2.1  導航條 // 138
8.2.2  導航條圖標 // 138
8.2.3  導航條功能菜單 // 139
8.2.4  頁眉標題 // 144
8.3  左側(cè)導航設計 // 145
8.4  頁面主體設計 // 148
8.4.1  圖片列表 // 148
8.4.2  提交表單 // 150
8.4.3  文本列表 // 153
8.5  頁腳設計 // 155
8.6  本章小結(jié) // 156
 
第9章  Bootstrap圖片幻燈頁面 // 157
9.1  圖片幻燈風格頁面設計概述 // 157
9.2  頁眉設計 // 158
9.3  頁面主體設計 // 160
9.3.1  圖片幻燈 // 160
9.3.2  圖標列表 // 162
9.3.3  圖片特輯 // 164
9.4  本章小結(jié) // 165
 
第10章  Bootstrap風格按鈕 // 166
10.1  風格按鈕設計概述 // 166
10.2  形狀與尺寸風格按鈕 // 167
10.3  邊框風格按鈕 // 169
10.4  下拉菜單風格按鈕 // 171
10.5  按鈕組風格按鈕 // 172
10.6  本章小結(jié) // 174
 
第11章  Bootstrap響應式表格設計 // 175
11.1  表格設計概述 // 175
11.2  Bootstrap基本表格 // 177
11.3  Bootstrap數(shù)組表格 // 179
11.4  Bootstrap Ajax表格 // 180
11.5  本章小結(jié) // 182
 
第12章  Bootstrap響應式圖表設計 // 183
12.1  圖表設計概述 // 183
12.2  柱狀圖圖表 // 185
12.3  折線圖圖表 // 187
12.4  餅狀圖圖表 // 191
12.5  本章小結(jié) // 195
 
第13章  jQuery UI Bootstrap工具 // 196
13.1  jQuery UI Bootstrap工具概述 // 196
13.1.1  jQuery UI工具 // 196
13.1.2  jQuery UI Bootstrap工具 // 197
13.1.3  jQuery UI Bootstrap應用 // 197
13.2  按鈕（Button） // 198
13.2.1  基本樣式按鈕 // 199
13.2.2  Set樣式按鈕 // 200
13.2.3  工具條樣式按鈕 // 202
13.3  折疊面板（Accordion） // 203
13.4  對話框（Dialog） // 206
13.4.1  非模態(tài)對話框 // 206
13.4.2  模態(tài)對話框 // 208
13.5  標簽頁 // 211
13.5.1  基本樣式標簽頁 // 211
13.5.2  可編輯樣式標簽頁 // 213
13.6  Overlay與Shadow // 220
13.7  Highlight與Error // 221
13.8  日期選擇器（Datepicker） // 223
13.9  滑塊 // 224
13.9.1  水平滑塊 // 224
13.9.2  垂直滑塊 // 225
13.10  自動完成 // 227
13.11  下拉菜單 // 229
13.12  提示信息 // 231
13.13  微調(diào)按鈕 // 233
13.14  本章小結(jié) // 236
 
第14章  jQuery Mobile 框架與Bootstrap主題風格 // 237
14.1  jQuery Mobile Bootstrap概述 // 237
14.1.1  jQuery Mobile框架 // 237
14.1.2  Bootstrap主題風格 // 238
14.1.3  應用開發(fā)基礎 // 238
14.2  主頁設計 // 240
14.3  按鈕設計 // 242
14.4  列表設計 // 245
14.5  導航設計 // 248
14.6  表單設計 // 252
14.6.1  輸入框 // 252
14.6.2  滑塊 // 254
14.6.3  切換開關 // 256
14.6.4  復選框 // 258
14.6.5  單選框 // 261
14.6.6  下拉菜單 // 263
14.6.7  提交按鈕 // 265
14.7  本章小結(jié) // 269
 
第15章  實戰(zhàn)：應用Bootstrap實現(xiàn)一個貼吧管理頁面 // 270
15.1  項目設計概述 // 270
15.2  頁面布局設計 // 271
15.2.1  引入Bootstrap框架 // 271
15.2.2  實現(xiàn)頁面布局代碼 // 272
15.3  頁面導航欄設計 // 273
15.3.1  構(gòu)建導航的整體架構(gòu) // 273
15.3.2  設計標題和導航鏈接 // 274
15.3.3  設計搜索框和通知系統(tǒng) // 275
15.3.4  設計管理員登錄系統(tǒng) // 276
15.3.5  設計響應式導航 // 278
15.4  左側(cè)邊欄設計 // 280
15.5  頁面主體設計 // 281
15.5.1  頁面主體功能的頭部 // 282
15.5.2  頁面主體功能的帖子列表 // 284
15.6  本章小結(jié) // 287
附錄  CSS選擇器速覽 // 288