Bootstrap 前端開發

趙增敏

高級講師，畢業於鄭州大學計算機軟件工程專業，
曾就職於河南省科學院工作，現工作於河南信息工程學校。
著作方向為：可視化編程，數據庫應用，多媒體技術應用，
網頁製作，ASP / JSP / PHP / ASP.NET動態Web網站開發，網絡操作系統。

目錄
第1章Bootstrap使用基礎1
1．1引導概述1
1．1．1 Bootstrap的發展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規則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開發工具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創建網格系統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使用圖片元素77
3．4．5創建圖文框78
3．5表格排版79
3．5．1創建基本表格79
3．5．2設置表頭80
3．5．3設置條紋行效果82
3．5．4設置表格邊框84
3．5．5設置懸停行效果85
3．5．6創建尺寸表格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創建彈性盒佈局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創建延伸鏈接137
4．7．3定義關閉圖標138
習題4 139

第5章使用Bootstrap組件（上）141
5．1使用按鈕141
5．1．1創建基本按鈕141
5．1．2設置按鈕背景顏色142
5．1．3設置按鈕輪廓顏色143
5．1．4設置按鈕大小144
5．1．5設置按鈕狀態145
5．2使用按鈕組146
5．2．1創建基本按鈕組146
5．2．2設置按鈕組大小147
5．2．3創建按鈕工具欄148
5．2．4使用嵌套按鈕組150
5．2．5垂直排列按鈕組151
5．3使用下拉菜單152
5．3．1創建單個按鈕拖放菜單152
5．3．2創建分割按鈕拖放菜單155
5．3．3設置拖動按鈕大小158
5．3．4設置菜單展開方向159
5．3．5設置拖動菜單更改160
5．3．6設置菜單拆分方式161
5．3．7設置菜單項狀態162
5．3．8添加更多菜單內容163
5．4使用導航組件164
5．4．1創建基本導航組件165
5．4．2設置導航拆分方式166
5．4．3創建垂直佈局導航167
5．4．4創建選項卡式導航168
5．4．5創建膠囊式導航169
5．4．6設置填充和對齊170
5．4．7創建選項卡內容區域172
習題5 174

第6章使用Bootstrap組件（中）176
6．1使用警告框176
6．1．1創建警告框176
6．1．2添加更多內容177
6．1．3添加關閉功能178
6．2使用徽章179
6．2．1創建徽章組件179
6．2．2設置徽章顏色181
6．2．3創建橢圓形徽章181
6．2．4創建鏈接徽章182
6．3使用媒體對象183
6．3．1創建媒體對象183
6．3．2創建嵌套媒體對象184
6．3．3設置媒體對齊方式185
6．3．4設置內容劃分順序186
6．3．5創建媒體對象列表187
6．4使用超大屏幕188
6．4．1創建超大屏幕188
6．4．2設置超大屏幕風格189
6．5使用表單190
6．5．1定義表單控件190
6．5．2使用手動和單選按鈕194
6．5．3設置表單組197
6．5．4創建網格表單198
6．5．5創建內聯表單203
6．5．6使用幫助文本204
6．5．7多餘表單205
6．6使用輸入組206
6．6．1創建基本輸入組206
6．6．2設置輸入組尺寸208
6．6．3組合校正或單選按鈕209
6．6．4多重輸入組合210
6．6．5多類型控件組合211
習題6212

第7章使用Bootstrap組件（下）214
7．1使用進度條214
7．1．1創建進度條214
7．1．2設置進度條樣式215
7．1．3設置進度條風格217
7．2使用導航欄220
7．2．1創建導航欄220
7．2．2設置導航欄配色方案222
7．2．3設置導航欄定位方式223
7．3使用列表組225
7．3．1創建基本列表組225
7．3．2創建水平列表組226
7．3．3設置列表組樣式227
7．3．4定制列表組內容229
7．4使用麵包屑232
7．4．1創建麵包屑232
7．4．2設置分隔符233
7．5使用分頁234
7．5．1創建分頁組件234
7．5．2在分頁中使用圖標235
7．5．3設置分頁大小236
7．5．4設置分頁對齊方式237
7．6使用加載指針238
7．6．1創建加載指針238
7．6．2設置加載指針樣式239
7．6．3加載指針按鈕241
7．7使用卡片242
7．7．1創建基本卡片組件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切換按鈕狀態258
8．2．2單選按鈕與復選按鈕259
8．3使用工具提示插件260
8．3．1創建工具提示插件260
8．3．2調用工具提示插件261
8．3．3處理工具提示事件263
8．4使用拖放框插件264
8．4．1創建彈出框插件264
8．4．2調用彈出框插件266
8．4．3處理拖動框事件268
8．5使用警告框插件269
8．5．1關閉警告框269
8．5．2處理警告框事件272
8．6使用模態框插件273
8．6．1創建模態框插件273
8．6．2設置模態框
對齊方式和尺寸275
8．6．3調用模態框插件277
8．6．4處理模態框事件279
8．7使用折疊插件281
8．7．1創建折疊插件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創建選項卡插件295
9．2．2調用選項卡插件296
9．2．3處理選項卡事件299
9．3使用提示框插件301
9．3．1創建提示框插件301
9．3．2設置提示框的位置305
9．3．3調用提示框插件306
9．3．4處理提示框事件308
9．4使用輪播插件309
9．4．1創建基本輪播插件310
9．4．2添加控制按鈕和指示器311
9．4．3調用輪播插件313
9．4．4處理輪播事件315
9．5使用滾動監聽317
9．5．1創建滾動監聽317
9．5．2調用滾動監聽320
9．5．3處理滾動監聽事件321
習題9 322