Bootstrap是Twitter推出的開(kāi)源的前端開(kāi)發(fā)工具包,可以幫助用戶(hù)輕松創(chuàng)建響應(yīng)式網(wǎng)站,目前在前端開(kāi)發(fā)中具有廣泛的應(yīng)用。
《Bootstrap入門(mén)經(jīng)典》是Bootstrap的入門(mén)類(lèi)圖書(shū),主要分為4個(gè)部分。第1部分為Bootstrap的入門(mén)知識(shí),講解了Bootstrap的安裝方法以及使用Bootstrap構(gòu)建網(wǎng)站的方法;第2部分講解了使用Bootstrap CSS樣式和組件創(chuàng)建網(wǎng)站的方法;第3部分側(cè)重的是使用Bootstrap JavaScript插件為網(wǎng)站增加功能的方法;第4部分涵蓋了Bootstrap的自定義方法,介紹了Bootstrap Web開(kāi)發(fā)的高級(jí)功能,以及如何創(chuàng)建不同于Bootstrap默認(rèn)外觀的復(fù)雜設(shè)計(jì)。
《Bootstrap入門(mén)經(jīng)典》內(nèi)容系統(tǒng),講解簡(jiǎn)明實(shí)用,代碼示例利于理解,是前端開(kāi)發(fā)人員入門(mén)Bootstrap的**讀物,適合所有前端開(kāi)發(fā)人員閱讀,有志于了解Bootstrap的讀者也可以從中獲益。
Jenifer Kyrnin從1997年開(kāi)始進(jìn)行HTML、XML和Web設(shè)計(jì)的網(wǎng)上教學(xué)。她曾經(jīng)構(gòu)建和維護(hù)各種規(guī)模的網(wǎng)站,從單頁(yè)面的手冊(cè)型網(wǎng)站到由數(shù)百萬(wàn)個(gè)頁(yè)面組成的數(shù)據(jù)庫(kù)驅(qū)動(dòng)型網(wǎng)站,不一而足。她當(dāng)前的研究重點(diǎn)是使用Bootstrap和WordPress進(jìn)行響應(yīng)式設(shè)計(jì)。
第1章 什么是Bootstrap,為什么要使用它 1
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中的可訪(fǎng)問(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的可訪(fǎng)問(wèn)性 299
22.1 什么是可訪(fǎng)問(wèn)性 299
22.1.1 可訪(fǎng)問(wèn)性設(shè)計(jì)實(shí)踐 300
22.1.2 WAI-ARIA和可訪(fǎng)問(wèn)性 301
22.2 Bootstrap中的可訪(fǎng)問(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)站可訪(fǎ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