第一部分 Bootstrap 布局
1 Bootstrap 是什麼 .............................. 2
1.1 Bootstrap 簡述 ............................. 2
1.2 如何使用Bootstrap ..................... 3
1.3 包含內容 ...................................... 4
1.4 簡單模闆 ...................................... 5
1.5 簡單實例 ...................................... 6
2 網格係統 ........................................... 9
2.1 實現原理 ...................................... 9
2.2 工作原理 ...................................... 9
2.3 基本用法 ..................................... 11
2.4 列偏移 .........................................12
2.5 列排序 .........................................13
2.6 列嵌套 .........................................15
3 排版 ................................................ 16
3.1 標題 .............................................16
3.1.1 大標題 ............................16
3.1.2 小標題 ........................... 18
3.2 段落 ............................................ 19
3.3 mark 標簽 ................................... 19
3.4 del 和s 標簽 ............................... 19
3.5 ins 和u 標簽 .............................. 20
3.6 strong 和b 標簽 ......................... 20
3.7 em 和i 標簽 ............................... 21
3.8 文本對齊方式 ............................ 21
3.9 字母大小寫 ................................ 22
3.10 abbr 標簽的title 屬性 .............. 23
3.11 引用樣式 .................................. 23
3.12 列錶 .......................................... 23
3.12.1 有序列錶和無序列錶 ... 24
3.12.2 去點列錶 ..................... 24
3.12.3 內聯列錶 ..................... 25
3.12.4 定義列錶 ..................... 25
3.12.5 水平列錶 ..................... 25
3.13 代碼 .......................................... 27
3.14 錶格 .......................................... 28
3.14.1 基礎錶格 ......................28
3.14.2 斑馬綫 ..........................29
3.14.3 錶格邊框 ......................30
3.14.4 高亮行 ..........................31
3.14.5 緊湊型錶格 ..................33
3.14.6 響應式錶格 ..................33
第二部分 Bootstrap 錶單元素
4 錶單 ................................................ 36
4.1 基礎錶單 .....................................36
4.1.1 基本實例 ........................36
4.1.2 內聯錶單 ........................37
4.1.3 水平錶單 ........................37
4.2 輸入框 .........................................39
4.3 下拉框 .........................................39
4.4 文本域 .........................................40
4.5 多選框和單選框 .........................41
4.6 錶單焦點 .....................................42
4.7 錶單禁用 .....................................42
4.8 驗證樣式 .....................................44
4.8.1 顔色提示 ........................44
4.8.2 圖標提示 ........................45
4.8.3 文字提示 ........................46
4.9 元素大小 .....................................47
4.9.1 高度 ................................47
4.9.2 寬度 ................................49
4.10 按鈕 ...........................................49
4.10.1 基本按鈕 ......................49
4.10.2 多標簽 ..........................50
4.10.3 按鈕風格 ......................51
4.10.4 按鈕大小 ......................52
4.10.5 塊狀按鈕 ......................53
4.10.6 激活和禁用 ................. 53
4.11 圖片 .......................................... 54
4.12 圖標 .......................................... 56
4.13 輸入框組 .................................. 58
5 下拉菜單 ......................................... 62
5.1 基本用法 .................................... 62
5.2 基本原理 .................................... 63
5.3 分割綫 ........................................ 64
5.4 菜單標題 .................................... 64
5.5 對齊方式 .................................... 65
5.6 菜單狀態 .................................... 68
6 按鈕組 ............................................ 70
6.1 基本按鈕組 ................................ 70
6.2 工具欄 ........................................ 71
6.3 按鈕組的大小 ............................ 74
6.4 嵌套分組 .................................... 76
6.5 垂直分組 .................................... 77
6.6 等分按鈕 .................................... 78
6.7 按鈕下拉菜單 ............................ 78
第三部分 Bootstrap 導航
7 導航 ................................................ 84
7.1 導航基礎樣式 ............................ 84
7.2 選項卡導航 ................................ 86
7.3 Pills 導航 ................................... 86
7.4 垂直導航 .................................... 87
7.5 導航狀態 .................................... 88
7.6 自適應導航 ................................ 88
7.7 導航二級菜單 ............................ 89
7.8 麵包屑導航 ................................ 90
7.9 導航條 ........................................ 92
7.10 導航條的基本用法 ...................92
7.11 品牌圖標 ...................................93
7.12 導航條——錶單 .......................94
7.13 導航條——按鈕 .......................96
7.14 導航條——文本和鏈接 ...........97
7.15 導航條中的二級菜單 ...............98
7.16 固定導航條 ...............................99
7.17 響應式導航條 ......................... 101
7.18 反色導航條 ............................. 103
7.19 分頁導航 ................................. 104
7.20 標簽和徽章 ............................. 107
第四部分 Bootstrap 內置組件
8 內置組件 ....................................... 112
8.1 麵闆 ........................................... 112
8.1.1 基礎應用 ...................... 113
8.1.2 麵闆的標題和腳注 ...... 114
8.1.3 基礎樣式 ...................... 114
8.1.4 嵌套錶格 ...................... 116
8.1.5 嵌套列錶 ...................... 118
8.2 縮略圖 ....................................... 119
8.3 巨幕 ........................................... 122
8.4 頁頭 ........................................... 123
8.5 提示框 ....................................... 124
8.6 進度條 ....................................... 127
8.6.1 基礎進度條 .................. 127
8.6.2 顯示進度 ...................... 127
8.6.3 彩色進度條 .................. 129
8.6.4 條紋進度條 .................. 130
8.6.5 堆疊效果 ...................... 131
8.7 媒體對象 ................................... 132
8.7.1 基本構成 ...................... 132
8.7.2 對齊方式 ..................... 133
8.7.3 嵌套對象 ..................... 134
8.7.4 媒體列錶組 ................. 135
8.8 列錶組 ...................................... 136
8.8.1 基礎列錶組 ................. 136
8.8.2 帶徽章的列錶組 ......... 137
8.8.3 鏈接列錶組 ................. 138
8.8.4 其他元素的支持 ......... 139
8.8.5 狀態設置 ..................... 141
8.8.6 列錶組主題 ................. 143
第五部分 Bootstrap 對JavaScript 的支持
9 JavaScript 支持 ............................ 146
9.1 插件庫說明 .............................. 146
9.2 編程方式 .................................. 147
9.2.1 data-*屬性 ................... 147
9.2.2 編程方式API .............. 149
9.2.3 命名空間衝突 ............. 149
9.2.4 事件 ............................. 149
9.2.5 版本 ............................. 150
9.3 過渡效果 .................................. 150
9.4 對話框 ...................................... 152
9.4.1 對話框結構 ................. 152
9.4.2 對話框的特點 ............. 153
9.4.3 彈齣框觸發方式 ......... 156
9.4.4 過渡效果 ..................... 158
9.4.5 觸發參數data-* .......... 159
9.4.6 JavaScript 觸發——參數 .............................. 161
9.4.7 JavaScript 觸發——方法 ............................. 163
9.4.8 JavaScript 觸發——事件 ............................... 165
9.5 下拉菜單 ................................... 167
9.5.1 聲明式觸發 .................. 167
9.5.2 JavaScript 觸發 ............. 168
9.5.3 事件 .............................. 169
9.6 監聽滾動 ................................... 171
9.6.1 組件說明 ...................... 171
9.6.2 滾動監聽實現步驟 ...... 171
9.6.3 聲明式觸發 .................. 173
9.6.4 JavaScript 觸發 ............. 175
9.7 Tab 選項卡 ................................ 176
9.7.1 選項卡的組成 .............. 177
9.7.2 聲明式觸發 .................. 178
9.7.3 JavaScript 觸發 ............. 180
9.7.4 Pills 導航 ...................... 181
9.7.5 過渡效果 ...................... 181
9.7.6 事件 .............................. 182
9.8 Tip 提示 .................................... 184
9.8.1 結構 .............................. 185
9.8.2 JavaScript 觸發 ............. 185
9.8.3 data-*屬性 .................... 187
9.8.4 JavaScript 觸發參數 ..... 188
9.8.5 事件 .............................. 189
9.9 提示框 ....................................... 190
9.9.1 alert 結構 ...................... 190
9.9.2 聲明式觸發 .................. 191
9.9.3 JavaScript 觸發 ............. 192
9.9.4 事件 .............................. 193
9.10 Popover 彈齣框 ....................... 193
9.10.1 彈齣框結構 ................ 194
9.10.2 聲明式屬性 ................ 194
9.10.3 JavaScript 方式觸發 ... 195
9.10.4 事件 ........................... 197
9.11 按鈕 ........................................ 198
9.11.1 按鈕加載狀態 ............ 198
9.11.2 單選按鈕 .................... 199
9.11.3 多選按鈕 .................... 200
9.11.4 方法 ............................ 201
9.12 摺疊/手風琴Collapse ............ 203
9.12.1 結構 ........................... 204
9.12.2 聲明式觸發 ............... 205
9.12.3 方法 ........................... 207
9.12.4 事件 ........................... 208
9.13 輪播圖 .................................... 209
9.13.1 輪播圖構成 ............... 210
9.13.2 聲明式觸發 ............... 213
9.13.3 JavaScript 觸發 .......... 215
9.13.4 事件 ........................... 216
9.14 Affix 插件 .............................. 216
9.14.1 聲明屬性 ................... 217
9.14.2 JavaScript 方法 .......... 217
9.14.3 事件 ........................... 220
第六部分 HTML和CSS 3的相關知識
10 HTML 元素 ................................. 222
10.1 錶單屬性 ................................ 222
10.2 Input 類型............................... 223
10.3 HTML 5 新標簽 ..................... 226
10.3.1 role 屬性 .................... 226
10.3.2 header 標簽 ............... 226
10.3.3 footer 標簽 ................. 227
10.3.4 nav 標簽 .................... 227
10.3.5 article 標簽 ................ 228
10.3.6 section 標簽 ............... 228
11 CSS 3 樣式 ................................. 230
11.1 選擇器 ..................................... 230
11.1.1 完全匹配屬性選擇器 ... 231
11.1.2 包含匹配選擇器......... 231
11.1.3 首字符匹配選擇器 ..... 231
11.1.4 末字符匹配選擇器 ..... 231
11.2 僞類選擇器 ............................. 232
11.3 陰影 ......................................... 232
11.4 背景 ......................................... 233
11.5 圓角邊框 ................................. 235
11.6 響應式設計 ............................. 235
11.6.1 什麼是響應式設計 ..... 235
11.6.2 響應式設計優缺點 ..... 236
11.6.3 Viewport 窗口 ........... 236
11.6.4 Media Queries 語法 .. 236
12 案例 ............................................ 240
12.1 默認樣式的不足 .................... 240
12.2 日曆控件的使用 .................... 242
12.3 頁麵顯示代碼內容 ................ 243
12.4 錶格插件 ................................ 244
12.5 圖錶插件 ................................ 246
附錄A Bootstrap 4.0 以及其他 ....... 249
A.1 重大更新 ................................. 249
A.2 重要鏈接地址 ......................... 250
· · · · · · (
收起)
