Bootstrap實(shí)戰(zhàn)

前言
第1章　為什么要學(xué)習(xí)Bootstrap  1
1.1　Bootstrap概述  2
1.1.1　Bootstrap的歷史  2
1.1.2　選擇Bootstrap的理由  3
1.1.3　一位程序員的話  4
1.1.4　Bootstrap構(gòu)成模塊  5
1.2　Bootstrap功能介紹  7
1.2.1　Bootstrap主要特色  7
1.2.2　Bootstrap主要功能  8
1.3　Bootstrap應(yīng)用項(xiàng)目賞析  9
1.3.1　Bootstrap優(yōu)秀網(wǎng)站  10
1.3.2　Bootstrap優(yōu)秀插件  11
1.4　Bootstrap版本變化  12
1.5　Bootstrap開發(fā)工具和參考資源  16
1.5.1　Bootstrap開發(fā)工具  16
1.5.2　Bootstrap參考資源  16
第2章　使用Bootstrap的準(zhǔn)備  18
2.1　下載和定制Bootstrap  19
2.1.1　下載Bootstrap  19
2.1.2　定制Bootstrap  20
2.2　Bootstrap的文件結(jié)構(gòu)  24
2.2.1　源碼版Bootstrap文件結(jié)構(gòu)  24
2.2.2　編譯版Bootstrap文件結(jié)構(gòu)  26
2.3　Bootstrap應(yīng)用解析  27
2.3.1　安裝Bootstrap  27
2.3.2　Bootstrap架構(gòu)解析  28
2.3.3　設(shè)計(jì)Bootstrap網(wǎng)頁(yè)模板  28
2.4　開發(fā)第一個(gè)Bootstrap示例  30
2.4.1　設(shè)計(jì)交互組件  30
2.4.2　設(shè)計(jì)頁(yè)面版式  31
第3章　Bootstrap框架解析  36
3.1　設(shè)計(jì)全局樣式表  37
3.1.1　CSS全局樣式設(shè)計(jì)思路  37
3.1.2　CSS規(guī)范和樣式重用  39
3.1.3　CSS重設(shè)  41
3.2　柵格系統(tǒng)  43
3.2.1　網(wǎng)頁(yè)柵格系統(tǒng)的設(shè)計(jì)技法  43
3.2.2　解析960柵格系統(tǒng)  46
3.2.3　Bootstrap柵格系統(tǒng)  50
3.2.4　響應(yīng)式Bootstrap柵格系統(tǒng)  54
3.3　Bootstrap布局  58
3.3.1　固定式布局  58
3.3.2　流式布局  59
3.3.3　布局嵌套  60
3.4　響應(yīng)式設(shè)計(jì)  61
3.4.1　什么是響應(yīng)式設(shè)計(jì)  61
3.4.2　設(shè)計(jì)響應(yīng)式圖片  64
3.4.3　設(shè)計(jì)響應(yīng)式布局結(jié)構(gòu)  67
3.4.4　自適應(yīng)顯示/隱藏頁(yè)面內(nèi)容  72
3.4.5　響應(yīng)式設(shè)計(jì)流程和實(shí)戰(zhàn)  76
3.4.6　響應(yīng)式Bootstrap  81
第4章　優(yōu)化CSS樣式  84
4.1　頁(yè)面排版優(yōu)化  85
4.1.1　標(biāo)題和字體風(fēng)格  85
4.1.2　文本強(qiáng)調(diào)風(fēng)格  88
4.1.3　文本對(duì)齊風(fēng)格  90
4.1.4　縮略語(yǔ)風(fēng)格  90
4.1.5　地址風(fēng)格  91
4.1.6　引用風(fēng)格  91
4.1.7　列表風(fēng)格  93
4.1.8　代碼風(fēng)格  95
4.2　表格優(yōu)化設(shè)計(jì)  98
4.2.1　優(yōu)化表格結(jié)構(gòu)  98
4.2.2　默認(rèn)風(fēng)格  98
4.2.3　表格個(gè)性風(fēng)格  100
4.2.4　表格行風(fēng)格  102
4.3　表單優(yōu)化設(shè)計(jì)  103
4.3.1　Bootstrap支持的表單控件  103
4.3.2　Bootstrap擴(kuò)展的表單組件  106
4.3.3　默認(rèn)風(fēng)格  109
4.3.4　布局風(fēng)格  110
4.3.5　外觀風(fēng)格  111
4.3.6　狀態(tài)風(fēng)格  115
4.4　按鈕設(shè)計(jì)  117
4.4.1　默認(rèn)風(fēng)格  117
4.4.2　定制風(fēng)格  119
4.4.3　狀態(tài)風(fēng)格  120
4.5　圖片和圖標(biāo)設(shè)計(jì)  121
4.5.1　圖片風(fēng)格  121
4.5.2　圖標(biāo)風(fēng)格  122
第5章　CSS動(dòng)態(tài)樣式——LESS  126
5.1　為什么要使用LESS  127
5.1.1　LESS概述  127
5.1.2　LESS的優(yōu)勢(shì)  127
5.1.3　LESS參考和工具  128
5.2　如何使用LESS  130
5.2.1　在客戶端使用LESS  130
5.2.2　在服務(wù)器端使用LESS  134
5.3　LESS包含哪些內(nèi)容  140
5.3.1　LESS基本特性  140
5.3.2　LESS主要功能  143
5.3.3　LESS和SASS  143
5.4　LESS動(dòng)態(tài)語(yǔ)法  145
5.4.1　變量  145
5.4.2　混合  146
5.4.3　參數(shù)混合  146
5.4.4　模式匹配  148
5.4.5　條件表達(dá)式  151
5.4.6　嵌套規(guī)則  154
5.4.7　運(yùn)算  156
5.4.8　顏色函數(shù)  156
5.4.9　數(shù)學(xué)函數(shù)  158
5.4.10　作用域  158
5.4.11　命名空間  159
5.4.12　注釋  160
5.4.13　導(dǎo)入  161
5.4.14　字符串插值  161
5.4.15　轉(zhuǎn)義字符  161
5.4.16　JavaScript表達(dá)式  162
5.5　Bootstrap與LESS結(jié)合  163
5.5.1　基于LESS的Bootstrap  163
5.5.2　Bootstrap變量  164
5.5.3　Bootstrap混合  169
第6章　使用Bootstrap組件  173
6.1　下拉菜單  174
6.1.1　快速體驗(yàn)下拉菜單  174
6.1.2　設(shè)計(jì)下拉菜單  177
6.1.3　設(shè)計(jì)多級(jí)下拉菜單  178
6.1.4　設(shè)置下拉菜單選項(xiàng)  179
6.2　按鈕組  182
6.2.1　設(shè)計(jì)按鈕組  182
6.2.2　設(shè)計(jì)按鈕導(dǎo)航條  183
6.2.3　設(shè)計(jì)按鈕布局  183
6.3　按鈕式下拉菜單  184
6.3.1　設(shè)計(jì)按鈕式下拉菜單  184
6.3.2　設(shè)計(jì)分隔樣式  185
6.3.3　設(shè)計(jì)按鈕式下拉菜單布局  185
6.4　導(dǎo)航  186
6.4.1　設(shè)計(jì)導(dǎo)航組件  186
6.4.2　設(shè)置導(dǎo)航選項(xiàng)  187
6.4.3　綁定導(dǎo)航和下拉菜單  189
6.4.4　設(shè)計(jì)導(dǎo)航列表  190
6.4.5　激活標(biāo)簽頁(yè)  191
6.4.6　設(shè)計(jì)標(biāo)簽頁(yè)布局  193
6.5　導(dǎo)航條  194
6.5.1　設(shè)計(jì)導(dǎo)航條  194
6.5.2　綁定表單和下拉菜單  196
6.5.3　導(dǎo)航條布局  198
6.6　面包屑和分頁(yè)  201
6.6.1　設(shè)計(jì)面包屑  202
6.6.2　設(shè)計(jì)分頁(yè)組件  203
6.6.3　設(shè)置分頁(yè)選項(xiàng)  204
6.6.4　設(shè)計(jì)翻頁(yè)組件  206
6.7　標(biāo)簽與徽章  207
6.8　縮略圖  209
6.8.1　關(guān)于圖像占位符  209
6.8.2　設(shè)計(jì)縮略圖  210
6.9　警告框  213
6.9.1　設(shè)計(jì)警告框  213
6.9.2　添加關(guān)閉按鈕  215
6.10　進(jìn)度條  215
6.10.1　設(shè)計(jì)進(jìn)度條  216
6.10.2　設(shè)置個(gè)性進(jìn)度條  217
6.11　媒體  218
6.11.1　媒體版式  218
6.11.2　媒體列表  219
6.12　版式  220
6.12.1　Hero區(qū)塊  220
6.12.2　頁(yè)面標(biāo)題  221
6.13　其他組件  222
6.13.1　Well  222
6.13.2　關(guān)閉圖標(biāo)  223
6.13.3　輔助類  223
第7章　使用Bootstrap插件  224
7.1　JavaScript插件開發(fā)概述  225
7.1.1　使用Bootstrap插件  225
7.1.2　過渡效果  227
7.2　模態(tài)對(duì)話框  228
7.2.1　設(shè)計(jì)對(duì)話框  228
7.2.2　調(diào)用對(duì)話框  230
7.2.3　應(yīng)用對(duì)話框  232
7.3　下拉項(xiàng)  234
7.4　滾動(dòng)監(jiān)聽  235
7.4.1　使用滾動(dòng)監(jiān)聽插件  236
7.4.2　控制滾動(dòng)監(jiān)聽  239
7.5　標(biāo)簽頁(yè)  241
7.5.1　使用標(biāo)簽頁(yè)插件  241
7.5.2　控制標(biāo)簽頁(yè)插件  243
7.6　工具提示  244
7.6.1　使用工具提示插件  245
7.6.2　控制工具提示插件  246
7.7　彈出提示  247
7.7.1　使用彈出提示插件  248
7.7.2　控制彈出提示插件  249
7.8　警告框  251
7.9　按鈕  253
7.10　折疊  256
7.10.1　使用折疊插件  256
7.10.2　控制折疊插件  259
7.11　輪播  262
7.11.1　使用輪播插件  262
7.11.2　控制輪播插件  264
7.12　輸入提示  268
7.13　附加導(dǎo)航  270
第8章　Bootstrap擴(kuò)展  274
8.1　針對(duì)IE6、IE7的Bootstrap擴(kuò)展  275
8.1.1　使用Bsie插件  276
8.1.2　手動(dòng)修補(bǔ)Bsie  277
8.2　Bootstrap Metro  278
8.3　顏色選擇器  282
8.3.1　使用顏色選擇器  282
8.3.2　配置顏色選擇器  283
8.4　日期選擇器  286
8.4.1　使用日期選擇器  286
8.4.2　配置日期選擇器  287
8.5　jQuery UI Bootstrap  293
第9章　使用Bootstrap快速開發(fā)社區(qū)分享網(wǎng)站  300
9.1　準(zhǔn)備工作  301
9.1.1　定制Bootstrap  301
9.1.2　初始化Bootstrap  302
9.2　首頁(yè)設(shè)計(jì)  303
9.2.1　設(shè)計(jì)思路  303
9.2.2　設(shè)計(jì)結(jié)構(gòu)  305
9.2.3　設(shè)計(jì)主菜單和按鈕  306
9.2.4　設(shè)計(jì)輪播廣告位  308
9.2.5　設(shè)計(jì)新聞區(qū)和版權(quán)區(qū)版式  311
9.3　閱讀頁(yè)設(shè)計(jì)  312
9.3.1　設(shè)計(jì)響應(yīng)式主菜單  313
9.3.2　設(shè)計(jì)附加導(dǎo)航菜單  314
9.3.3　設(shè)計(jì)頁(yè)面版式  315
9.4　小組頁(yè)設(shè)計(jì)  317
9.5　打卡頁(yè)設(shè)計(jì)  320
9.5.1　設(shè)計(jì)頁(yè)面柵格系統(tǒng)  320
9.5.2　設(shè)計(jì)滾動(dòng)監(jiān)聽和附加導(dǎo)航  322
9.6　詞根頁(yè)設(shè)計(jì)  323
第10章　Bootstrap內(nèi)核解碼  326
10.1　定義jQuery插件  327
10.1.1　jQuery插件形式  327
10.1.2　jQuery插件規(guī)范  327
10.1.3　jQuery插件封裝  329
10.1.4　jQuery插件優(yōu)化  331
10.2　Bootstrap設(shè)計(jì)思想  336
10.2.1　類型化  336
10.2.2　松散與耦合處理  338
10.2.3　繼承和可擴(kuò)展性  340
10.3　Bootstrap框架解析  342
10.3.1　源碼結(jié)構(gòu)  342
10.3.2　類定義  343
10.3.3　插件定義  345
10.3.4　命名沖突解決  347
10.3.5　數(shù)據(jù)接口  347
10.4　Bootstrap內(nèi)核解疑  347
10.4.1　封裝形式  348
10.4.2　啟用嚴(yán)格模式  349
10.4.3　插件中的this  353"