前言
第1章 入門準備 1
1.1 框架簡介 1
1.2 新手入門 2
1.3 文件結構 4
1.4 HTML標準模闆 5
1.5 CSS基本語法 6
1.5.1 優先級 6
1.5.2 選擇器 6
1.5.3 僞類 7
1.5.4 display屬性 8
1.5.5 媒體查詢 8
1.6 JavaScript基本語法 9
1.6.1 ||和&&運算符 9
1.6.2 立即調用的函數錶達式 9
1.6.3 原型 10
1.7 jQuery基本用法 10
1.7.1 事件綁定 11
1.7.2 事件命名空間 11
1.7.3 $.data() 12
1.8 HTML5輔助設計 12
第2章 整體架構 14
2.1 整體架構 14
2.2 柵格係統 16
2.2.1 實現原理 16
2.2.2 基本用法 18
2.2.3 響應式柵格 22
2.2.4 對重復代碼的處理 26
2.3 CSS組件架構的設計思想 26
2.3.1 基礎樣式 27
2.3.2 顔色樣式 27
2.3.3 尺寸樣式 29
2.3.4 狀態樣式 29
2.3.5 特殊元素樣式 30
2.3.6 並列元素樣式 32
2.3.7 嵌套子元素樣式 32
2.3.8 動畫樣式 33
2.3.9 小結 34
2.4 JavaScript插件架構 34
2.4.1 HTML布局規則 34
2.4.2 JavaScript實現步驟 36
2.4.3 通用技術 39
2.4.4 不足 41
2.5 禁用響應式布局 41
第3章 CSS布局 43
3.1 概述 43
3.2 基礎排版 45
3.2.1 標題 45
3.2.2 頁麵主題 46
3.2.3 強調文本 47
3.2.4 縮略語 48
3.2.5 地址元素 48
3.2.6 引用 49
3.2.7 列錶 50
3.3 代碼 54
3.3.1 內聯代碼 54
3.3.2 用戶輸入代碼 54
3.3.3 多行代碼塊 55
3.4 錶格 55
3.4.1 基礎樣式 55
3.4.2 帶背景條紋的錶格 56
3.4.3 帶邊框的錶格 57
3.4.4 鼠標懸停高亮的錶格 58
3.4.5 緊湊型錶格 58
3.4.6 行級元素樣式 59
3.4.7 響應式錶格 60
3.5 錶單 62
3.5.1 基礎錶單 63
3.5.2 內聯錶單 64
3.5.3 橫嚮錶單 66
3.5.4 錶單控件 67
3.5.5 控件狀態 69
3.5.6 控件大小 74
3.5.7 其他 76
3.6 按鈕 76
3.6.1 按鈕樣式 76
3.6.2 按鈕大小 78
3.6.3 多標簽支持 80
3.6.4 活動狀態 80
3.6.5 禁用狀態 81
3.7 圖像 82
3.8 輔助樣式 83
3.8.1 文本樣式及背景樣式 83
3.8.2 輔助圖標 84
3.8.3 內容浮動 85
3.8.4 隱藏與顯示 86
3.9 響應式樣式 86
第4章 CSS組件 88
4.1 小圖標 88
4.1.1 基本用法 88
4.1.2 實現方式 89
4.1.3 應用場景 92
4.1.4 其他 93
4.2 下拉菜單 94
4.2.1 基本用法 94
4.2.2 多級嵌套 97
4.3 按鈕組 98
4.3.1 基本用法 99
4.3.2 按鈕工具欄 100
4.3.3 按鈕尺寸設置 101
4.3.4 嵌套分組 102
4.3.5 垂直分組 103
4.3.6 自適應分組 106
4.4 按鈕下拉菜單 107
4.4.1 組閤式下拉菜單 107
4.4.2 分離式下拉菜單 108
4.4.3 按鈕大小 109
4.4.4 嚮上彈起的下拉菜單 109
4.5 輸入框組 110
4.5.1 基本用法 110
4.5.2 尺寸大小設置 113
4.5.3 復選框與單選框作為addon 115
4.5.4 按鈕作為addon 115
4.5.5 下拉菜單按鈕作為addon 117
4.5.6 分段按鈕作為addon 117
4.6 導航 118
4.6.1 選項卡導航 119
4.6.2 膠囊式選項卡導航 120
4.6.3 堆疊式導航 121
4.6.4 自適應導航 123
4.6.5 禁用鏈接 124
4.6.6 二級導航實現 124
4.7 導航條 126
4.7.1 基礎導航條 126
4.7.2 導航條中的錶單 130
4.7.3 導航條中的按鈕、文本、鏈接 132
4.7.4 導航條中的項進行左右浮動 134
4.7.5 頂部固定或底部固定 134
4.7.6 響應式導航條 136
4.7.7 反色導航條 140
4.8 麵包屑導航 141
4.9 分頁導航 143
4.9.1 頁碼分頁 143
4.9.2 翻頁 145
4.10 標簽 147
4.11 徽章 149
4.12 大屏幕展播 151
4.13 頁麵標題 152
4.14 縮略圖 153
4.15 警告框 155
4.15.1 默認警告框 155
4.15.2 可關閉的警告框 156
4.15.3 多彩樣式警告框 157
4.15.4 警告框中的鏈接 158
4.16 進度條 159
4.16.1 基本樣式 159
4.16.2 多彩樣式 160
4.16.3 條紋樣式 161
4.16.4 動畫樣式 162
4.16.5 堆疊樣式 162
4.17 媒體對象 163
4.17.1 默認樣式 163
4.17.2 媒體列錶 164
4.18 列錶組 165
4.18.1 基礎列錶組 165
4.18.2 應用徽章標記或導航箭頭 166
4.18.3 可鏈接的列錶組 167
4.18.4 多彩列錶項 168
4.18.5 自定義列錶組 169
4.19 麵闆 171
4.19.1 基礎麵闆 171
4.19.2 帶有頭和尾的麵闆 172
4.19.3 多彩麵闆 173
4.19.4 麵闆與錶格進行嵌套 174
4.19.5 麵闆和列錶組進行嵌套 177
4.20 窪地 179
4.21 主題 180
4.21.1 btn按鈕樣式主題 181
4.21.2 縮略圖樣式主題 182
4.21.3 下拉菜單樣式主題 182
4.21.4 導航條樣式主題 182
4.21.5 警告框樣式主題 183
4.21.6 進度條樣式主題 184
4.21.7 列錶組樣式主題 184
4.21.8 麵闆樣式主題 184
4.21.9 well樣式主題 185
第5章 JavaScript插件 186
5.1 動畫過渡效果 186
5.1.1 使用方法 186
5.1.2 源碼分析 187
5.2 模態彈窗 188
5.2.1 彈窗布局與樣式 189
5.2.2 聲明式用法 194
5.2.3 JavaScript用法 195
5.2.4 源碼分析 197
5.3 下拉菜單 203
5.3.1 聲明式用法 204
5.3.2 JavaScript用法 207
5.3.3 源碼分析 208
5.4 滾動偵測 212
5.4.1 聲明式用法 213
5.4.2 JavaScript用法 214
5.4.3 源碼分析 215
5.5 選項卡 219
5.5.1 聲明式用法 220
5.5.2 JavaScript用法 221
5.5.3 源碼分析 222
5.6 提示框 225
5.6.1 聲明式用法 226
5.6.2 JavaScript用法 228
5.6.3 源碼分析 229
5.7 彈齣框 240
5.7.1 聲明式用法 241
5.7.2 JavaScript用法 242
5.7.3 源碼分析 244
5.8 警告框插件 246
5.8.1 聲明式用法 247
5.8.2 JavaScript用法 248
5.8.3 源碼分析 249
5.9 按鈕 251
5.9.1 聲明式用法 251
5.9.2 JavaScript用法 253
5.9.3 源碼分析 253
5.10 摺疊 256
5.10.1 聲明式用法 257
5.10.2 JavaScript用法 258
5.10.3 源碼分析 259
5.11 鏇轉輪播 264
5.11.1 聲明式用法 264
5.11.2 CSS源碼分析 266
5.11.3 JavaScript用法 270
5.11.4 源碼分析 272
5.12 自動定位浮標 280
5.12.1 聲明式用法 282
5.12.2 JavaScript用法 284
5.12.3 源碼分析 284
第6章 實戰：擴展現有組件 289
6.1 擴展分頁組件 289
6.1.1 形狀擴展 289
6.1.2 顔色擴展 290
6.2 擴展Modal彈窗 292
6.2.1 擴展點探討 292
6.2.2 Info彈窗擴展 293
6.2.3 Form彈窗擴展 301
第7章 實戰：Win8磁貼組件開發 311
7.1 基本樣式 311
7.1.1 方塊定義 311
7.1.2 邊框定義 312
7.2 顔色樣式 313
7.3 尺寸樣式 314
7.4 狀態設置 316
7.5 特殊元素樣式 317
7.5.1 tile-content樣式定義 318
7.5.2 tile-content子元素的樣式定義 318
7.5.3 Brand樣式定義 320
7.6 並列元素與嵌套樣式 321
7.7 動畫插件 323
7.8 更全的Win8風格樣式 329
第8章 實戰：組閤應用開發 330
8.1 任務描述 330
8.2 實戰過程 332
8.3 筆者的建議 342
8.4 實戰成果 343
8.5 所用技術總結 344
第9章 第三方擴展 345
9.1 Font Awesome 345
9.1.1 介紹 345
9.1.2 常規用法 346
9.1.3 List列錶上的圖標 347
9.1.4 導航上的圖標 347
9.1.5 固定角度鏇轉 348
9.1.6 360度鏇轉 349
9.1.7 多圖疊加 350
9.2 BSIE擴展 352
9.3 Buttons 353
9.4 DateTime Picker 356
9.5 Cikonss 358
9.6 Flat UI 359
9.7 更多插件 360
附錄A 瀏覽器兼容性支持 361
附錄B 第三方插件開發建議 365
附錄C 從2.x遷移到3.x 366
附錄D Glyphicons圖標全集 369
· · · · · · (收起)