Bootstrap前端開發(fā)

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