深入理解Bootstrap

第1章　入門準(zhǔn)備 / 1
1.1　框架簡(jiǎn)介 / 1
1.2　新手入門 / 2
1.3　文件結(jié)構(gòu) / 4
1.4　HTML標(biāo)準(zhǔn)模板 / 5
1.5　CSS基本語(yǔ)法 / 6
1.5.1　優(yōu)先級(jí) / 6
1.5.2　選擇器 / 6
1.5.3　偽類 / 7
1.5.4　display屬性 / 8
1.5.5　媒體查詢 / 8
1.6　JavaScript基本語(yǔ)法 / 9
1.6.1　||和&&運(yùn)算符 / 9
1.6.2　立即調(diào)用的函數(shù)表達(dá)式 / 9
1.6.3　原型 / 10
1.7　jQuery基本用法 / 10
1.7.1　事件綁定 / 11
1.7.2　事件命名空間 / 11
1.7.3　$.data() / 12
1.8　HTML5輔助設(shè)計(jì) / 12
第2章　整體架構(gòu) / 14
2.1　整體架構(gòu) / 14
2.2　柵格系統(tǒng) / 16
2.2.1　實(shí)現(xiàn)原理 / 16
2.2.2　基本用法 / 18
2.2.3　響應(yīng)式柵格 / 22
2.2.4　對(duì)重復(fù)代碼的處理 / 26
2.3　CSS組件架構(gòu)的設(shè)計(jì)思想 / 26
2.3.1　基礎(chǔ)樣式 / 27
2.3.2　顏色樣式 / 27
2.3.3　尺寸樣式 / 29
2.3.4　狀態(tài)樣式 / 29
2.3.5　特殊元素樣式 / 30
2.3.6　并列元素樣式 / 32
2.3.7　嵌套子元素樣式 / 32
2.3.8　動(dòng)畫樣式 / 33
2.3.9　小結(jié) / 34
2.4　JavaScript插件架構(gòu) / 34
2.4.1　HTML布局規(guī)則 / 34
2.4.2　JavaScript實(shí)現(xiàn)步驟 / 36
2.4.3　通用技術(shù) / 39
2.4.4　不足 / 41
2.5　禁用響應(yīng)式布局 / 41
第3章　CSS布局 / 43
3.1　概述 / 43
3.2　基礎(chǔ)排版 / 45
3.2.1　標(biāo)題 / 45
3.2.2　頁(yè)面主題 / 46
3.2.3　強(qiáng)調(diào)文本 / 47
3.2.4　縮略語(yǔ) / 48
3.2.5　地址元素 / 48
3.2.6　引用 / 49
3.2.7　列表 / 50
3.3　代碼 / 54
3.3.1　內(nèi)聯(lián)代碼 / 54
3.3.2　用戶輸入代碼 / 54
3.3.3　多行代碼塊 / 55
3.4　表格 / 55
3.4.1　基礎(chǔ)樣式 / 55
3.4.2　帶背景條紋的表格 / 56
3.4.3　帶邊框的表格 / 57
3.4.4　鼠標(biāo)懸停高亮的表格 / 58
3.4.5　緊湊型表格 / 58
3.4.6　行級(jí)元素樣式 / 59
3.4.7　響應(yīng)式表格 / 60
3.5　表單 / 62
3.5.1　基礎(chǔ)表單 / 63
3.5.2　內(nèi)聯(lián)表單 / 64
3.5.3　橫向表單 / 66
3.5.4　表單控件 / 67
3.5.5　控件狀態(tài) / 69
3.5.6　控件大小 / 74
3.5.7　其他 / 76
3.6　按鈕 / 76
3.6.1　按鈕樣式 / 76
3.6.2　按鈕大小 / 78
3.6.3　多標(biāo)簽支持 / 80
3.6.4　活動(dòng)狀態(tài) / 80
3.6.5　禁用狀態(tài) / 81
3.7　圖像 / 82
3.8　輔助樣式 / 83
3.8.1　文本樣式及背景樣式 / 83
3.8.2　輔助圖標(biāo) / 84
3.8.3　內(nèi)容浮動(dòng) / 85
3.8.4　隱藏與顯示 / 86
3.9　響應(yīng)式樣式 / 86
第4章　CSS組件 / 88
4.1　小圖標(biāo) / 88
4.1.1　基本用法 / 88
4.1.2　實(shí)現(xiàn)方式 / 89
4.1.3　應(yīng)用場(chǎng)景 / 92
4.1.4　其他 / 93
4.2　下拉菜單 / 94
4.2.1　基本用法 / 94
4.2.2　多級(jí)嵌套 / 97
4.3　按鈕組 / 98
4.3.1　基本用法 / 99
4.3.2　按鈕工具欄 / 100
4.3.3　按鈕尺寸設(shè)置 / 101
4.3.4　嵌套分組 / 102
4.3.5　垂直分組 / 103
4.3.6　自適應(yīng)分組 / 106
4.4　按鈕下拉菜單 / 107
4.4.1　組合式下拉菜單 / 107
4.4.2　分離式下拉菜單 / 108
4.4.3　按鈕大小 / 109
4.4.4　向上彈起的下拉菜單 / 109
4.5　輸入框組 / 110
4.5.1　基本用法 / 110
4.5.2　尺寸大小設(shè)置 / 113
4.5.3　復(fù)選框與單選框作為addon / 115
4.5.4　按鈕作為addon / 115
4.5.5　下拉菜單按鈕作為addon / 117
4.5.6　分段按鈕作為addon / 117
4.6　導(dǎo)航 / 118
4.6.1　選項(xiàng)卡導(dǎo)航 / 119
4.6.2　膠囊式選項(xiàng)卡導(dǎo)航 / 120
4.6.3　堆疊式導(dǎo)航 / 121
4.6.4　自適應(yīng)導(dǎo)航 / 123
4.6.5　禁用鏈接 / 124
4.6.6　二級(jí)導(dǎo)航實(shí)現(xiàn) / 124
4.7　導(dǎo)航條 / 126
4.7.1　基礎(chǔ)導(dǎo)航條 / 126
4.7.2　導(dǎo)航條中的表單 / 130
4.7.3　導(dǎo)航條中的按鈕、文本、鏈接 / 132
4.7.4　導(dǎo)航條中的項(xiàng)進(jìn)行左右浮動(dòng) / 134
4.7.5　頂部固定或底部固定 / 134
4.7.6　響應(yīng)式導(dǎo)航條 / 136
4.7.7　反色導(dǎo)航條 / 140
4.8　面包屑導(dǎo)航 / 141
4.9　分頁(yè)導(dǎo)航 / 143
4.9.1　頁(yè)碼分頁(yè) / 143
4.9.2　翻頁(yè) / 145
4.10　標(biāo)簽 / 147
4.11　徽章 / 149
4.12　大屏幕展播 / 151
4.13　頁(yè)面標(biāo)題 / 152
4.14　縮略圖 / 153
4.15　警告框 / 155
4.15.1　默認(rèn)警告框 / 155
4.15.2　可關(guān)閉的警告框 / 156
4.15.3　多彩樣式警告框 / 157
4.15.4　警告框中的鏈接 / 158
4.16　進(jìn)度條 / 159
4.16.1　基本樣式 / 159
4.16.2　多彩樣式 / 160
4.16.3　條紋樣式 / 161
4.16.4　動(dòng)畫樣式 / 162
4.16.5　堆疊樣式 / 162
4.17　媒體對(duì)象 / 163
4.17.1　默認(rèn)樣式 / 163
4.17.2　媒體列表 / 164
4.18　列表組 / 165
4.18.1　基礎(chǔ)列表組 / 165
4.18.2　應(yīng)用徽章標(biāo)記或?qū)Ш郊^ / 166
4.18.3　可鏈接的列表組 / 167
4.18.4　多彩列表項(xiàng) / 168
4.18.5　自定義列表組 / 169
4.19　面板 / 171
4.19.1　基礎(chǔ)面板 / 171
4.19.2　帶有頭和尾的面板 / 172
4.19.3　多彩面板 / 173
4.19.4　面板與表格進(jìn)行嵌套 / 174
4.19.5　面板和列表組進(jìn)行嵌套 / 177
4.20　洼地 / 179
4.21　主題 / 180
4.21.1　btn按鈕樣式主題 / 181
4.21.2　縮略圖樣式主題 / 182
4.21.3　下拉菜單樣式主題 / 182
4.21.4　導(dǎo)航條樣式主題 / 182
4.21.5　警告框樣式主題 / 183
4.21.6　進(jìn)度條樣式主題 / 184
4.21.7　列表組樣式主題 / 184
4.21.8　面板樣式主題 / 184
4.21.9　well樣式主題 / 185
第5章　JavaScript插件 / 186
5.1　動(dòng)畫過渡效果 / 186
5.1.1　使用方法 / 186
5.1.2　源碼分析 / 187
5.2　模態(tài)彈窗 / 188
5.2.1　彈窗布局與樣式 / 189
5.2.2　聲明式用法 / 194
5.2.3　JavaScript用法 / 195
5.2.4　源碼分析 / 197
5.3　下拉菜單 / 203
5.3.1　聲明式用法 / 204
5.3.2　JavaScript用法 / 207
5.3.3　源碼分析 / 208
5.4　滾動(dòng)偵測(cè) / 212
5.4.1　聲明式用法 / 213
5.4.2　JavaScript用法 / 214
5.4.3　源碼分析 / 215
5.5　選項(xiàng)卡 / 219
5.5.1　聲明式用法 / 220
5.5.2　JavaScript用法 / 221
5.5.3　源碼分析 / 222
5.6　提示框 / 225
5.6.1　聲明式用法 / 226
5.6.2　JavaScript用法 / 228
5.6.3　源碼分析 / 229
5.7　彈出框 / 240
5.7.1　聲明式用法 / 241
5.7.2　JavaScript用法 / 242
5.7.3　源碼分析 / 244
5.8　警告框插件 / 246
5.8.1　聲明式用法 / 247
5.8.2　JavaScript用法 / 248
5.8.3　源碼分析 / 249
5.9　按鈕 / 251
5.9.1　聲明式用法 / 251
5.9.2　JavaScript用法 / 253
5.9.3　源碼分析 / 253
5.10　折疊 / 256
5.10.1　聲明式用法 / 257
5.10.2　JavaScript用法 / 258
5.10.3　源碼分析 / 259
5.11　旋轉(zhuǎn)輪播 / 264
5.11.1　聲明式用法 / 264
5.11.2　CSS源碼分析 / 266
5.11.3　JavaScript用法 / 270
5.11.4　源碼分析 / 272
5.12　自動(dòng)定位浮標(biāo) / 280
5.12.1　聲明式用法 / 282
5.12.2　JavaScript用法 / 284
5.12.3　源碼分析 / 284
第6章　實(shí)戰(zhàn)：擴(kuò)展現(xiàn)有組件 / 289
6.1　擴(kuò)展分頁(yè)組件 / 289
6.1.1　形狀擴(kuò)展 / 289
6.1.2　顏色擴(kuò)展 / 290
6.2　擴(kuò)展Modal彈窗 / 292
6.2.1　擴(kuò)展點(diǎn)探討 / 292
6.2.2　Info彈窗擴(kuò)展 / 293
6.2.3　Form彈窗擴(kuò)展 / 301
第7章　實(shí)戰(zhàn)：Win8磁貼組件開發(fā) / 311
7.1　基本樣式 / 311
7.1.1　方塊定義 / 311
7.1.2　邊框定義 / 312
7.2　顏色樣式 / 313
7.3　尺寸樣式 / 314
7.4　狀態(tài)設(shè)置 / 316
7.5　特殊元素樣式 / 317
7.5.1　tile-content樣式定義 / 318
7.5.2　tile-content子元素的樣式定義 / 318
7.5.3　Brand樣式定義 / 320
7.6　并列元素與嵌套樣式 / 321
7.7　動(dòng)畫插件 / 323
7.8　更全的Win8風(fēng)格樣式 / 329
第8章　實(shí)戰(zhàn)：組合應(yīng)用開發(fā) / 330
8.1　任務(wù)描述 / 330
8.2　實(shí)戰(zhàn)過程 / 332
8.3　筆者的建議 / 342
8.4　實(shí)戰(zhàn)成果 / 343
8.5　所用技術(shù)總結(jié) / 344
第9章　第三方擴(kuò)展 / 345
9.1　Font Awesome / 345
9.1.1　介紹 / 345
9.1.2　常規(guī)用法 / 346
9.1.3　List列表上的圖標(biāo) / 347
9.1.4　導(dǎo)航上的圖標(biāo) / 347
9.1.5　固定角度旋轉(zhuǎn) / 348
9.1.6　360度旋轉(zhuǎn) / 349
9.1.7　多圖疊加 / 350
9.2　BSIE擴(kuò)展 / 352
9.3　Buttons / 353
9.4　DateTime Picker / 356
9.5　Cikonss / 358
9.6　Flat UI / 359
9.7　更多插件 / 360
附錄A　瀏覽器兼容性支持 / 361
附錄B　第三方插件開發(fā)建議 / 365
附錄C　從2.x遷移到3.x / 366
附錄D　Glyphicons圖標(biāo)全集 / 369