Bootstrap入門(mén)經(jīng)典

目錄
第1章 什么是Bootstrap，為什么要使用它\t1
1．1　什么是Web框架　1
1．1．1　框架不僅是一個(gè)模板　2
1．1．2　框架的優(yōu)缺點(diǎn)　5
1．2　什么是Bootstrap　6
1．3　Bootstrap與其他框架有何
不同　6
1．4　為什么應(yīng)該使用Bootstrap　8
1．5　小結(jié)　8
1．6　討論　8
第2章　下載安裝Bootstrap　11
2．1　從哪里得到Bootstrap　11
2．2　獲取Bootstrap的其他
途徑　13
2．2．1　用Less編寫(xiě)的源代碼　13
2．2．2　Sass　15
2．2．3　Bootstrap CDN　16
2．3　小結(jié)　16
2．4　討論　16
第3章　用基本模板構(gòu)建第一個(gè)
BootStrap網(wǎng)站　20
3．1　最小的Bootstrap頁(yè)面　20
3．2　基本Bootstrap模板　21
3．3　更多Bootstrap模板示例　25
3．3．1　Bootstrap Starter模板　25
3．3．2　Bootstrap主題　27
3．3．3　Bootstrap Jumbotron　27
3．4　小結(jié)　28
3．5　討論　28
第4章　理解Normalize．CSS和
Bootstrap　CSS基礎(chǔ)知識(shí)　31
4．1　什么是Normalize．css　31
4．1．1　什么是CSS重置　32
4．1．2　CSS重置的利弊　32
4．1．3　Normalize．css不僅僅是CSS
重置　32
4．2　理解Bootstrap基礎(chǔ)結(jié)構(gòu)　34
4．2．1　Bootstrap使用HTML5　34
4．2．2　移動(dòng)優(yōu)先　34
4．2．3　排版和基本鏈接樣式　34
4．3　小結(jié)　37
4．4　討論　37
第5章　網(wǎng)格及其用法　40
5．1　設(shè)計(jì)中的網(wǎng)格　40
5．1．1　為什么在Web設(shè)計(jì)中使用
網(wǎng)格　41
5．1．2　三分法　42
5．1．3　黃金分割率　44
5．2　Bootstrap網(wǎng)格系統(tǒng)　45
5．3　如何在Bootstrap中創(chuàng)建網(wǎng)格　45
5．3．1　創(chuàng)建基本網(wǎng)格　45
5．3．2　響應(yīng)式列重置　49
5．3．3　列的偏移、排序和嵌套　50
5．4　Bootstrap中的響應(yīng)式Web
布局　51
5．5　小結(jié)　52
5．6　討論　53
第6章　標(biāo)簽、徽章、面板、Well和超大屏幕　56
6．1　標(biāo)簽和徽章　56
6．1．1　標(biāo)簽　56
6．1．2　徽章　59
6．2　Well和面板　60
6．2．1　Well　60
6．2．2　面板　61
6．3　超大屏幕　63
6．4　小結(jié)　64
6．5　討論　65
第7章　Bootstrap排版　68
7．1　Bootstrap中的基本排版　68
7．2　標(biāo)題　70
7．2．1　標(biāo)題　70
7．2．2　頁(yè)眉　74
7．3　正文　75
7．3．1　內(nèi)聯(lián)文本　76
7．3．2　元素對(duì)齊　77
7．3．3　文本元素轉(zhuǎn)換　78
7．4　其他文本塊　79
7．4．1　代碼　79
7．4．2　引用語(yǔ)　80
7．4．3　列表　80
7．4．4　縮略語(yǔ)　81
7．4．5　地址　81
7．5　小結(jié)　81
7．6　討論　83
第8章　設(shè)置表格樣式　86
8．1　基本表格　86
8．2　Bootstrap表格類(lèi)　88
8．3　包含表格的面板　91
8．4　響應(yīng)式表格　93
8．5　小結(jié)　94
8．6　討論　94
第9章　設(shè)置表單樣式　97
9．1　基本表單　97
9．1．1　水平表單　100
9．1．2　內(nèi)聯(lián)表單　101
9．2　Bootstrap支持的表單控件　103
9．2．1　基本輸入標(biāo)記　103
9．2．2　復(fù)選框和單選按鈕　104
9．2．3　下拉菜單　106
9．2．4　設(shè)置表單控件的大小　107
9．2．5　幫助塊　108
9．3　輸入組　108
9．3．1　基本輸入組　108
9．3．2　設(shè)置輸入組的大小　109
9．3．3　奇妙的附加控件　110
9．4　Bootstrap表單的交互性　111
9．4．1　焦點(diǎn)狀態(tài)　111
9．4．2　禁用和只讀狀態(tài)　112
9．4．3　驗(yàn)證狀態(tài)　112
9．5　小結(jié)　113
9．6　討論　114
第10章　圖像、媒體對(duì)象和
Glyphicons　117
10．1　圖像　117
10．1．1　響應(yīng)式圖像　118
10．1．2　圖像形狀　118
10．2　媒體對(duì)象　119
10．3　縮略圖　122
10．4　Glyphicon　124
10．5　小結(jié)　126
10．6　討論　129
第11章　按鈕和按鈕組樣式設(shè)置及
使用　132
11．1　基本按鈕　132
11．1．1　按鈕標(biāo)記　133
11．1．2　按鈕類(lèi)和大小　133
11．1．3　按鈕狀態(tài)　135
11．2　按鈕組　136
11．2．1　水平按鈕組　137
11．2．2　垂直按鈕組　138
11．2．3　按鈕工具欄　138
11．3　按鈕JavaScript　139
11．4　小結(jié)　139
11．5　討論　140
第12章　用Bootstrap創(chuàng)建導(dǎo)航系統(tǒng)　144
12．1　標(biāo)準(zhǔn)導(dǎo)航元素　144
12．2　下拉菜單　147
12．2．1　拆分下拉菜單　148
12．2．2　上拉式變種　150
12．3　導(dǎo)航欄　151
12．3．1　導(dǎo)航欄標(biāo)題和品牌　153
12．3．2　切換導(dǎo)航開(kāi)關(guān)　153
12．3．3　導(dǎo)航欄中的鏈接、文本、按鈕
和表單　154
12．3．4　改變導(dǎo)航欄的顏色和對(duì)齊
方式　158
12．4　面包屑導(dǎo)航和分頁(yè)　159
12．5　列表組　160
12．6　小結(jié)　163
12．7　討論　164
第13章　Bootstrap實(shí)用工具　168
13．1　助手類(lèi)　168
13．1．1　更改顏色　169
13．1．2　圖標(biāo)　170
13．1．3　布局類(lèi)　171
13．1．4　顯示和隱藏內(nèi)容　174
13．2　響應(yīng)式實(shí)用工具　174
13．3　打印類(lèi)　176
13．4　響應(yīng)式嵌入　176
13．5　Bootstrap中的可訪問(wèn)性　177
13．6　小結(jié)　177
13．7　討論　179
第14章　使用Bootstrap JavaScript
插件　183
14．1　如何使用Bootstrap JavaScript
插件　183
14．2　設(shè)置插件選項(xiàng)　184
14．2．1　參數(shù)形式的選項(xiàng)　184
14．2．2　數(shù)據(jù)屬性形式的選項(xiàng)　185
14．3　使用JavaScript API　186
14．3．1　事件　187
14．3．2　無(wú)沖突　187
14．3．3　禁用JavaScript　187
14．4　小結(jié)　188
14．5　討論　188
第15章　模態(tài)窗口　191
15．1　什么是模態(tài)窗口　191
15．2　如何構(gòu)建模態(tài)窗口　192
15．2．1　觸發(fā)模態(tài)窗口　192
15．2．2　模態(tài)窗口編碼　194
15．3　修改模態(tài)窗口　197
15．3．1　更改模態(tài)窗口的打開(kāi)
方式　197
15．3．2　更改模態(tài)窗口的大小　200
15．3．3　更改布局　201
15．3．4　動(dòng)態(tài)更改模態(tài)內(nèi)容　203
15．4　小結(jié)　204
15．5　討論　206
第16章　附加導(dǎo)航、選項(xiàng)卡和滾動(dòng)
監(jiān)聽(tīng)　209
16．1　附加導(dǎo)航　209
16．2　選項(xiàng)卡　212
16．3　滾動(dòng)監(jiān)聽(tīng)　215
16．4　結(jié)合使用這些插件　216
16．5　小結(jié)　217
16．6　討論　219
第17章　彈出框和工具提示　222
17．1　工具提示　222
17．1．1　工具提示選項(xiàng)　228
17．1．2　工具提示方法　229
17．1．3　工具提示事件　229
17．2　彈出框　229
17．2．1　彈出框選項(xiàng)　232
17．2．2　彈出框方法　233
17．2．3　彈出框事件　233
17．3　小結(jié)　233
17．4　討論　235
第18章　過(guò)渡、按鈕、警告框和
進(jìn)度條　239
18．1　過(guò)渡　239
18．2　按鈕　240
18．2．1　按鈕狀態(tài)　240
18．2．2　切換按鈕　241
18．2．3　復(fù)選框和單選按鈕　241
18．2．4　按鈕方法　243
18．3　警告框　243
18．3．1　警告框方法　245
18．3．2　警告框事件　245
18．4　進(jìn)度條　245
18．4．1　創(chuàng)建進(jìn)度條　245
18．4．2　設(shè)置進(jìn)度條樣式　246
18．5　小結(jié)　248
18．6　討論　249
第19章　折疊插件和折疊面板　254
19．1　折疊插件　254
19．1．1　創(chuàng)建一個(gè)可折疊部分　254
19．1．2　水平折疊元素　258
19．1．3　折疊選項(xiàng)　259
19．1．4　折疊方法　259
19．1．5　折疊事件　259
19．2　折疊面板　260
19．2．1　創(chuàng)建折疊面板　260
19．2．2　使用折疊面板導(dǎo)航　263
19．3　小結(jié)　265
19．4　討論　266
第20章　輪播　270
20．1　創(chuàng)建輪播　270
20．1．1　基本輪播　272
20．1．2　更精致的輪播　274
20．2　使用輪播插件　276
20．2．1　添加多個(gè)輪播　277
20．2．2　輪播選項(xiàng)　278
20．2．3　輪播方法　279
20．2．4　輪播事件　279
20．3　Web上的輪播　279
20．3．1　輪播最佳實(shí)踐　279
20．3．2　輪播的問(wèn)題和解決方案　280
20．4　小結(jié)　281
20．5　討論　282
第21章　自定義Bootsrap和Bootstrap
網(wǎng)站　286
21．1　使用自己的CSS　286
21．2　使用Bootstrap Customizer　290
21．2．1　Less文件和jQuery插件　291
21．2．2　Less變量　292
21．2．3　下載和安裝自定義
Bootstrap　294
21．3　使用第三方Bootstrap定制
工具　295
21．4　小結(jié)　295
21．5　討論　295
第22章　提高Bootstrap的可訪問(wèn)性　299
22．1　什么是可訪問(wèn)性　299
22．1．1　可訪問(wèn)性設(shè)計(jì)實(shí)踐　300
22．1．2　WAI-ARIA和可訪問(wèn)性　301
22．2　Bootstrap中的可訪問(wèn)設(shè)計(jì)　301
22．2．1　跳過(guò)導(dǎo)航　302
22．2．2　嵌套標(biāo)題　302
22．2．3　顏色對(duì)比　303
22．3　Bootstrap網(wǎng)站可訪問(wèn)性
技巧　303
22．4　小結(jié)　304
22．5　討論　304
第23章　使用Less和Sass與Bootstrap
配合　307
23．1　什么是CSS預(yù)處理器　307
23．2　使用Less　308
23．2．1　Less的功能　308
23．2．2　結(jié)合使用Less和
Bootstrap　310
23．3　使用Sass　312
23．3．1　Sass的功能　312
23．3．2　結(jié)合使用Sass和
Bootstrap　314
23．4　小結(jié)　315
23．5　討論　315
第24章　進(jìn)一步應(yīng)用Bootstrap　319
24．1　Bootstrap編輯器　319
24．1．1　Web編輯器　319
24．1．2　主題構(gòu)建和定制
工具　321
24．2　在WordPress中使用
Bootstrap　322
24．2．1　使用WordPress插件　322
24．2．2　尋找用于WordPress的
Bootstrap主題　323
24．2．3　構(gòu)建自己的WordPress
主題　323
24．3　用第三方附加程序擴(kuò)展
Bootstrap　330
24．3．1　Bootstrap主題　330
24．3．2　Bootstrap插件　330
24．3．3　Bootstrap社區(qū)　331
24．3．4　漂亮的Bootstrap網(wǎng)站　331
24．4　小結(jié)　333
24．5　討論　334