Bootstrap前端開(kāi)發(fā)

第1章 Bootstrap使用基礎(chǔ) 1
1．1 Bootstrap概述 1
1．1．1 Bootstrap的發(fā)展 1
1．1．2 Bootstrap的版本 2
1．1．3 瀏覽器支持 3
1．2 理解媒體查詢 4
1．2．1 媒體查詢的語(yǔ)法格式 4
1．2．2 媒體查詢的常用方式 5
1．3 使用Sass語(yǔ)言 10
1．3．1 安裝Sass 10
1．3．2 使用變量 12
1．3．3 嵌套CSS規(guī)則 13
1．3．4 導(dǎo)入Sass文件 17
1．3．5 使用混合器 20
1．3．6 使用選擇器繼承 22
1．4 使用Bootstrap 23
1．4．1 下載和安裝Bootstrap 23
1．4．2 Bootstrap開(kāi)發(fā)工具 25
1．4．3 Bootstrap起始模板 26
習(xí)題1 28
第2章 使用Bootstrap布局 29
2．1 布局基礎(chǔ)知識(shí) 29
2．1．1 包裝容器 29
2．1．2 響應(yīng)斷點(diǎn) 33
2．1．3 堆疊順序 33
2．2 創(chuàng)建網(wǎng)格系統(tǒng) 34
2．2．1 工作原理 34
2．2．2 基本網(wǎng)格 36
2．2．3 響應(yīng)網(wǎng)格 40
2．2．4 對(duì)齊方式 47
2．2．5 重新排序 51
2．2．6 列的嵌套 56
2．3 了解布局工具類 57
習(xí)題2 57
第3章 使用Bootstrap版式 59
3．1 CSS初始設(shè)置 59
3．1．1 頁(yè)面默認(rèn)設(shè)置 59
3．1．2 常用元素設(shè)置 60
3．2 文檔排版 62
3．2．1 全局設(shè)置 62
3．2．2 設(shè)置標(biāo)題 62
3．2．3 使用段落 64
3．2．4 內(nèi)聯(lián)文本元素 65
3．2．5 使用縮略語(yǔ) 66
3．2．6 引用內(nèi)容 67
3．2．7 使用摘要 68
3．2．8 使用列表 69
3．3 代碼排版 72
3．3．1 內(nèi)聯(lián)代碼與代碼塊 72
3．3．2 變量、輸入和輸出 74
3．4 圖片排版 74
3．4．1 響應(yīng)式圖片 74
3．4．2 圖像縮略圖 75
3．4．3 圖片對(duì)齊處理 76
3．4．4 使用picture元素 77
3．4．5 創(chuàng)建圖文框 78
3．5 表格排版 79
3．5．1 創(chuàng)建基本表格 79
3．5．2 設(shè)置表頭 80
3．5．3 設(shè)置條紋行效果 82
3．5．4 設(shè)置表格邊框 84
3．5．5 設(shè)置懸停行效果 85
3．5．6 創(chuàng)建緊湊表格 87
3．5．7 表格著色 88
習(xí)題3 90
第4章 使用Bootstrap通用樣式 92
4．1 文本處理 92
4．1．1 設(shè)置文本對(duì)齊方式 92
4．1．2 換行和溢出 94
4．1．3 字母大小寫(xiě)轉(zhuǎn)換 95
4．1．4 字體粗細(xì)和傾斜 96
4．1．5 處理鏈接文本 97
4．2 設(shè)置顏色 98
4．2．1 設(shè)置文本顏色 98
4．2．2 設(shè)置背景顏色 100
4．2．3 設(shè)置漸變色背景 101
4．3 設(shè)置邊框和陰影 103
4．3．1 添加或移除邊框 103
4．3．2 設(shè)置邊框顏色 105
4．3．3 設(shè)置邊框半徑 106
4．3．4 設(shè)置陰影效果 107
4．4 設(shè)置大小和邊距 108
4．4．1 設(shè)置元素大小 109
4．4．2 設(shè)置邊距 111
4．5 設(shè)置浮動(dòng)和定位 114
4．5．1 實(shí)現(xiàn)浮動(dòng)方式 114
4．5．2 設(shè)置定位方式 115
4．5．3 設(shè)置溢出方式 117
4．5．4 處理嵌入內(nèi)容 118
4．6 設(shè)置彈性盒布局 119
4．6．1 設(shè)置顯示方式 119
4．6．2 創(chuàng)建彈性盒布局 122
4．6．3 設(shè)置項(xiàng)目對(duì)齊方式 124
4．6．4 設(shè)置項(xiàng)目寬度 127
4．6．5 設(shè)置自動(dòng)邊距 128
4．6．6 設(shè)置換行方式 130
4．6．7 設(shè)置項(xiàng)目順序 132
4．6．8 對(duì)齊內(nèi)容 133
4．7 使用其他樣式 135
4．7．1 設(shè)置垂直對(duì)齊方式 135
4．7．2 創(chuàng)建延伸鏈接 137
4．7．3 定義關(guān)閉圖標(biāo) 138
習(xí)題4 139
第5章 使用Bootstrap組件（上） 141
5．1 使用按鈕 141
5．1．1 創(chuàng)建基本按鈕 141
5．1．2 設(shè)置按鈕背景顏色 142
5．1．3 設(shè)置按鈕輪廓顏色 143
5．1．4 設(shè)置按鈕大小 144
5．1．5 設(shè)置按鈕狀態(tài) 145
5．2 使用按鈕組 146
5．2．1 創(chuàng)建基本按鈕組 146
5．2．2 設(shè)置按鈕組大小 147
5．2．3 創(chuàng)建按鈕工具欄 148
5．2．4 使用嵌套按鈕組 150
5．2．5 垂直排列按鈕組 151
5．3 使用下拉菜單 152
5．3．1 創(chuàng)建單一按鈕下拉菜單 152
5．3．2 創(chuàng)建分割按鈕下拉菜單 155
5．3．3 設(shè)置下拉按鈕大小 158
5．3．4 設(shè)置菜單展開(kāi)方向 159
5．3．5 設(shè)置下拉菜單偏移 160
5．3．6 設(shè)置菜單對(duì)齊方式 161
5．3．7 設(shè)置菜單項(xiàng)狀態(tài) 162
5．3．8 添加更多菜單內(nèi)容 163
5．4 使用導(dǎo)航組件 164
5．4．1 創(chuàng)建基本導(dǎo)航組件 165
5．4．2 設(shè)置導(dǎo)航對(duì)齊方式 166
5．4．3 創(chuàng)建垂直布局導(dǎo)航 167
5．4．4 創(chuàng)建選項(xiàng)卡式導(dǎo)航 168
5．4．5 創(chuàng)建膠囊式導(dǎo)航 169
5．4．6 設(shè)置填充和對(duì)齊 170
5．4．7 創(chuàng)建選項(xiàng)卡內(nèi)容區(qū)域 172
習(xí)題5 174
第6章 使用Bootstrap組件（中） 176
6．1 使用警告框 176
6．1．1 創(chuàng)建警告框 176
6．1．2 添加更多內(nèi)容 177
6．1．3 添加關(guān)閉功能 178
6．2 使用徽章 179
6．2．1 創(chuàng)建徽章組件 179
6．2．2 設(shè)置徽章顏色 181
6．2．3 創(chuàng)建橢圓形徽章 181
6．2．4 創(chuàng)建鏈接徽章 182
6．3 使用媒體對(duì)象 183
6．3．1 創(chuàng)建媒體對(duì)象 183
6．3．2 創(chuàng)建嵌套媒體對(duì)象 184
6．3．3 設(shè)置媒體對(duì)齊方式 185
6．3．4 設(shè)置內(nèi)容排列順序 186
6．3．5 創(chuàng)建媒體對(duì)象列表 187
6．4 使用超大屏幕 188
6．4．1 創(chuàng)建超大屏幕 188
6．4．2 設(shè)置超大屏幕風(fēng)格 189
6．5 使用表單 190
6．5．1 定義表單控件 190
6．5．2 使用復(fù)選框和單選按鈕 194
6．5．3 設(shè)置表單組 197
6．5．4 創(chuàng)建網(wǎng)格表單 198
6．5．5 創(chuàng)建內(nèi)聯(lián)表單 203
6．5．6 使用幫助文本 204
6．5．7 禁用表單 205
6．6 使用輸入組 206
6．6．1 創(chuàng)建基本輸入組 206
6．6．2 設(shè)置輸入組尺寸 208
6．6．3 組合復(fù)選框或單選按鈕 209
6．6．4 多項(xiàng)輸入組合 210
6．6．5 多類型控件組合 211
習(xí)題6 212
第7章 使用Bootstrap組件（下） 214
7．1 使用進(jìn)度條 214
7．1．1 創(chuàng)建進(jìn)度條 214
7．1．2 設(shè)置進(jìn)度條樣式 215
7．1．3 設(shè)置進(jìn)度條風(fēng)格 217
7．2 使用導(dǎo)航欄 220
7．2．1 創(chuàng)建導(dǎo)航欄 220
7．2．2 設(shè)置導(dǎo)航欄配色方案 222
7．2．3 設(shè)置導(dǎo)航欄定位方式 223
7．3 使用列表組 225
7．3．1 創(chuàng)建基本列表組 225
7．3．2 創(chuàng)建水平列表組 226
7．3．3 設(shè)置列表組樣式 227
7．3．4 定制列表組內(nèi)容 229
7．4 使用面包屑 232
7．4．1 創(chuàng)建面包屑 232
7．4．2 設(shè)置分隔符 233
7．5 使用分頁(yè) 234
7．5．1 創(chuàng)建分頁(yè)組件 234
7．5．2 在分頁(yè)中使用圖標(biāo) 235
7．5．3 設(shè)置分頁(yè)大小 236
7．5．4 設(shè)置分頁(yè)對(duì)齊方式 237
7．6 使用加載指示器 238
7．6．1 創(chuàng)建加載指示器 238
7．6．2 設(shè)置加載指示器樣式 239
7．6．3 加載指示器按鈕 241
7．7 使用卡片 242
7．7．1 創(chuàng)建基本卡片組件 242
7．7．2 卡片的內(nèi)容類型 243
7．7．3 在卡片中添加導(dǎo)航 244
7．7．4 在卡片中添加圖片 245
7．7．5 設(shè)置卡片樣式 247
7．7．6 設(shè)置卡片布局 248
習(xí)題7 253
第8章 使用jQuery插件（上） 255
8．1 插件基礎(chǔ) 255
8．1．1 插件分類 255
8．1．2 安裝插件 256
8．1．3 調(diào)用插件 256
8．1．4 選項(xiàng)、方法和事件 257
8．2 使用按鈕插件 258
8．2．1 切換按鈕狀態(tài) 258
8．2．2 單選按鈕與復(fù)選按鈕 259
8．3 使用工具提示插件 260
8．3．1 創(chuàng)建工具提示插件 260
8．3．2 調(diào)用工具提示插件 261
8．3．3 處理工具提示事件 263
8．4 使用彈出框插件 264
8．4．1 創(chuàng)建彈出框插件 264
8．4．2 調(diào)用彈出框插件 266
8．4．3 處理彈出框事件 268
8．5 使用警告框插件 269
8．5．1 關(guān)閉警告框 269
8．5．2 處理警告框事件 272
8．6 使用模態(tài)框插件 273
8．6．1 創(chuàng)建模態(tài)框插件 273
8．6．2 設(shè)置模態(tài)框
對(duì)齊方式和尺寸 275
8．6．3 調(diào)用模態(tài)框插件 277
8．6．4 處理模態(tài)框事件 279
8．7 使用折疊插件 281
8．7．1 創(chuàng)建折疊插件 281
8．7．2 控制多個(gè)目標(biāo) 282
8．7．3 實(shí)現(xiàn)手風(fēng)琴效果 283
8．7．4 調(diào)用折疊插件 285
8．7．5 處理折疊事件 287
習(xí)題8 288
第9章 使用jQuery插件（下） 290
9．1 使用下拉菜單插件 290
9．1．1 調(diào)用下拉菜單插件 290
9．1．2 處理下拉菜單事件 293
9．2 使用選項(xiàng)卡插件 295
9．2．1 創(chuàng)建選項(xiàng)卡插件 295
9．2．2 調(diào)用選項(xiàng)卡插件 296
9．2．3 處理選項(xiàng)卡事件 299
9．3 使用提示框插件 301
9．3．1 創(chuàng)建提示框插件 301
9．3．2 設(shè)置提示框的位置 305
9．3．3 調(diào)用提示框插件 306
9．3．4 處理提示框事件 308
9．4 使用輪播插件 309
9．4．1 創(chuàng)建基本輪播插件 310
9．4．2 添加控制按鈕和指示器 311
9．4．3 調(diào)用輪播插件 313
9．4．4 處理輪播事件 315
9．5 使用滾動(dòng)監(jiān)聽(tīng) 317
9．5．1 創(chuàng)建滾動(dòng)監(jiān)聽(tīng) 317
9．5．2 調(diào)用滾動(dòng)監(jiān)聽(tīng) 320
9．5．3 處理滾動(dòng)監(jiān)聽(tīng)事件 321
習(xí)題9 322