Bootstrap是Twitter推出的開源的前端開發(fā)工具包,可以幫助用戶輕松創(chuàng)建響應式網(wǎng)站,目前在前端開發(fā)中具有廣泛的應用。
《Bootstrap入門經(jīng)典》是Bootstrap的入門類圖書,主要分為4個部分。第1部分為Bootstrap的入門知識,講解了Bootstrap的安裝方法以及使用Bootstrap構建網(wǎng)站的方法;第2部分講解了使用Bootstrap CSS樣式和組件創(chuàng)建網(wǎng)站的方法;第3部分側重的是使用Bootstrap JavaScript插件為網(wǎng)站增加功能的方法;第4部分涵蓋了Bootstrap的自定義方法,介紹了Bootstrap Web開發(fā)的高級功能,以及如何創(chuàng)建不同于Bootstrap默認外觀的復雜設計。
《Bootstrap入門經(jīng)典》內容系統(tǒng),講解簡明實用,代碼示例利于理解,是前端開發(fā)人員入門Bootstrap的**讀物,適合所有前端開發(fā)人員閱讀,有志于了解Bootstrap的讀者也可以從中獲益。
Jenifer Kyrnin從1997年開始進行HTML、XML和Web設計的網(wǎng)上教學。她曾經(jīng)構建和維護各種規(guī)模的網(wǎng)站,從單頁面的手冊型網(wǎng)站到由數(shù)百萬個頁面組成的數(shù)據(jù)庫驅動型網(wǎng)站,不一而足。她當前的研究重點是使用Bootstrap和WordPress進行響應式設計。
第1章 什么是Bootstrap,為什么要使用它 1
1.1 什么是Web框架 1
1.1.1 框架不僅是一個模板 2
1.1.2 框架的優(yōu)缺點 5
1.2 什么是Bootstrap 6
1.3 Bootstrap與其他框架有何
不同 6
1.4 為什么應該使用Bootstrap 8
1.5 小結 8
1.6 討論 8
第2章 下載安裝Bootstrap 11
2.1 從哪里得到Bootstrap 11
2.2 獲取Bootstrap的其他
途徑 13
2.2.1 用Less編寫的源代碼 13
2.2.2 Sass 15
2.2.3 Bootstrap CDN 16
2.3 小結 16
2.4 討論 16
第3章 用基本模板構建第一個
BootStrap網(wǎng)站 20
3.1 最小的Bootstrap頁面 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 小結 28
3.5 討論 28
第4章 理解Normalize.CSS和
Bootstrap CSS基礎知識 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基礎結構 34
4.2.1 Bootstrap使用HTML5 34
4.2.2 移動優(yōu)先 34
4.2.3 排版和基本鏈接樣式 34
4.3 小結 37
4.4 討論 37
第5章 網(wǎng)格及其用法 40
5.1 設計中的網(wǎng)格 40
5.1.1 為什么在Web設計中使用
網(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 響應式列重置 49
5.3.3 列的偏移、排序和嵌套 50
5.4 Bootstrap中的響應式Web
布局 51
5.5 小結 52
5.6 討論 53
第6章 標簽、徽章、面板、Well和超大屏幕 56
6.1 標簽和徽章 56
6.1.1 標簽 56
6.1.2 徽章 59
6.2 Well和面板 60
6.2.1 Well 60
6.2.2 面板 61
6.3 超大屏幕 63
6.4 小結 64
6.5 討論 65
第7章 Bootstrap排版 68
7.1 Bootstrap中的基本排版 68
7.2 標題 70
7.2.1 標題 70
7.2.2 頁眉 74
7.3 正文 75
7.3.1 內聯(lián)文本 76
7.3.2 元素對齊 77
7.3.3 文本元素轉換 78
7.4 其他文本塊 79
7.4.1 代碼 79
7.4.2 引用語 80
7.4.3 列表 80
7.4.4 縮略語 81
7.4.5 地址 81
7.5 小結 81
7.6 討論 83
第8章 設置表格樣式 86
8.1 基本表格 86
8.2 Bootstrap表格類 88
8.3 包含表格的面板 91
8.4 響應式表格 93
8.5 小結 94
8.6 討論 94
第9章 設置表單樣式 97
9.1 基本表單 97
9.1.1 水平表單 100
9.1.2 內聯(lián)表單 101
9.2 Bootstrap支持的表單控件 103
9.2.1 基本輸入標記 103
9.2.2 復選框和單選按鈕 104
9.2.3 下拉菜單 106
9.2.4 設置表單控件的大小 107
9.2.5 幫助塊 108
9.3 輸入組 108
9.3.1 基本輸入組 108
9.3.2 設置輸入組的大小 109
9.3.3 奇妙的附加控件 110
9.4 Bootstrap表單的交互性 111
9.4.1 焦點狀態(tài) 111
9.4.2 禁用和只讀狀態(tài) 112
9.4.3 驗證狀態(tài) 112
9.5 小結 113
9.6 討論 114
第10章 圖像、媒體對象和
Glyphicons 117
10.1 圖像 117
10.1.1 響應式圖像 118
10.1.2 圖像形狀 118
10.2 媒體對象 119
10.3 縮略圖 122
10.4 Glyphicon 124
10.5 小結 126
10.6 討論 129
第11章 按鈕和按鈕組樣式設置及
使用 132
11.1 基本按鈕 132
11.1.1 按鈕標記 133
11.1.2 按鈕類和大小 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 小結 139
11.5 討論 140
第12章 用Bootstrap創(chuàng)建導航系統(tǒng) 144
12.1 標準導航元素 144
12.2 下拉菜單 147
12.2.1 拆分下拉菜單 148
12.2.2 上拉式變種 150
12.3 導航欄 151
12.3.1 導航欄標題和品牌 153
12.3.2 切換導航開關 153
12.3.3 導航欄中的鏈接、文本、按鈕
和表單 154
12.3.4 改變導航欄的顏色和對齊
方式 158
12.4 面包屑導航和分頁 159
12.5 列表組 160
12.6 小結 163
12.7 討論 164
第13章 Bootstrap實用工具 168
13.1 助手類 168
13.1.1 更改顏色 169
13.1.2 圖標 170
13.1.3 布局類 171
13.1.4 顯示和隱藏內容 174
13.2 響應式實用工具 174
13.3 打印類 176
13.4 響應式嵌入 176
13.5 Bootstrap中的可訪問性 177
13.6 小結 177
13.7 討論 179
第14章 使用Bootstrap JavaScript
插件 183
14.1 如何使用Bootstrap JavaScript
插件 183
14.2 設置插件選項 184
14.2.1 參數(shù)形式的選項 184
14.2.2 數(shù)據(jù)屬性形式的選項 185
14.3 使用JavaScript API 186
14.3.1 事件 187
14.3.2 無沖突 187
14.3.3 禁用JavaScript 187
14.4 小結 188
14.5 討論 188
第15章 模態(tài)窗口 191
15.1 什么是模態(tài)窗口 191
15.2 如何構建模態(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)窗口的打開
方式 197
15.3.2 更改模態(tài)窗口的大小 200
15.3.3 更改布局 201
15.3.4 動態(tài)更改模態(tài)內容 203
15.4 小結 204
15.5 討論 206
第16章 附加導航、選項卡和滾動
監(jiān)聽 209
16.1 附加導航 209
16.2 選項卡 212
16.3 滾動監(jiān)聽 215
16.4 結合使用這些插件 216
16.5 小結 217
16.6 討論 219
第17章 彈出框和工具提示 222
17.1 工具提示 222
17.1.1 工具提示選項 228
17.1.2 工具提示方法 229
17.1.3 工具提示事件 229
17.2 彈出框 229
17.2.1 彈出框選項 232
17.2.2 彈出框方法 233
17.2.3 彈出框事件 233
17.3 小結 233
17.4 討論 235
第18章 過渡、按鈕、警告框和
進度條 239
18.1 過渡 239
18.2 按鈕 240
18.2.1 按鈕狀態(tài) 240
18.2.2 切換按鈕 241
18.2.3 復選框和單選按鈕 241
18.2.4 按鈕方法 243
18.3 警告框 243
18.3.1 警告框方法 245
18.3.2 警告框事件 245
18.4 進度條 245
18.4.1 創(chuàng)建進度條 245
18.4.2 設置進度條樣式 246
18.5 小結 248
18.6 討論 249
第19章 折疊插件和折疊面板 254
19.1 折疊插件 254
19.1.1 創(chuàng)建一個可折疊部分 254
19.1.2 水平折疊元素 258
19.1.3 折疊選項 259
19.1.4 折疊方法 259
19.1.5 折疊事件 259
19.2 折疊面板 260
19.2.1 創(chuàng)建折疊面板 260
19.2.2 使用折疊面板導航 263
19.3 小結 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 添加多個輪播 277
20.2.2 輪播選項 278
20.2.3 輪播方法 279
20.2.4 輪播事件 279
20.3 Web上的輪播 279
20.3.1 輪播最佳實踐 279
20.3.2 輪播的問題和解決方案 280
20.4 小結 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 小結 295
21.5 討論 295
第22章 提高Bootstrap的可訪問性 299
22.1 什么是可訪問性 299
22.1.1 可訪問性設計實踐 300
22.1.2 WAI-ARIA和可訪問性 301
22.2 Bootstrap中的可訪問設計 301
22.2.1 跳過導航 302
22.2.2 嵌套標題 302
22.2.3 顏色對比 303
22.3 Bootstrap網(wǎng)站可訪問性
技巧 303
22.4 小結 304
22.5 討論 304
第23章 使用Less和Sass與Bootstrap
配合 307
23.1 什么是CSS預處理器 307
23.2 使用Less 308
23.2.1 Less的功能 308
23.2.2 結合使用Less和
Bootstrap 310
23.3 使用Sass 312
23.3.1 Sass的功能 312
23.3.2 結合使用Sass和
Bootstrap 314
23.4 小結 315
23.5 討論 315
第24章 進一步應用Bootstrap 319
24.1 Bootstrap編輯器 319
24.1.1 Web編輯器 319
24.1.2 主題構建和定制
工具 321
24.2 在WordPress中使用
Bootstrap 322
24.2.1 使用WordPress插件 322
24.2.2 尋找用于WordPress的
Bootstrap主題 323
24.2.3 構建自己的WordPress
主題 323
24.3 用第三方附加程序擴展
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 小結 333
24.5 討論 334