Bootstrap Web 設計與開發實戰
內容描述
本書由淺入深,全面、系統、詳盡地介紹了Bootstrap框架相關技術在Web和移動Web開發領域的應用。書中提供了大量的代碼示例,讀者可以通過這些示例深入理解Bootstrap框架相關的知識點,同時還可以舉一反三,將這些示例應用到實戰項目之中。本書從基本原理到實戰應用,幾乎涉及了Bootstrap框架Web開發領域的絕大部分內容,是一本集理論與實戰的綜合性參考書。
本書共15章,分為三篇。第一篇為Bootstrap基礎,主要介紹Bootstrap框架的基礎知識與開發入門等內容。第二篇為Bootstrap框架,主要介紹了Bootstrap腳手架、Bootstrap樣式設計、Bootstrap組件設計、Bootstrap插件設計與Bootstrap多媒體設計等相關的內容。第三篇為Bootstrap實戰,詳細講解瞭如何基於Bootstrap框架開發Web應用的過程與方法,同時還包括整合jQuery UI框架和jQuery Mobile框架開發移動應用的案例。
本書適合所有想全面深入學習Bootstrap框架開發技術的人員閱讀,尤其適合正在應用Bootstrap框架做移動應用開發的人員閱讀。對於大中專院校相關專業的學生和培訓機構的學員,本書也是一本不可多得的參考書。
海報:
目錄大綱
第1章Bootstrap從何而來1
1.1初識Bootstrap 1
1.2什麼是響應式設計2
1.3響應式設計四大原則3
1.3.1移動優先還是PC優先3
1.3.2內容流4
1.3.3位圖還是矢量圖4
1.3.4相對單位還是固定單位5
1.4 Bootstrap設計目標5
1.4.1優先針對移動設備5
1.4.2支持6
1.4.3響應式設計6
1.5本章小結6
第2章Bootstrap開發環境7
2.1 Bootstrap開發環境概述7
2.1.1下載Bootstrap開發包7
2.1.2 Bootstrap開發包目錄結構9
2.1.3在網站中使用Bootstrap框架10
2.2調用Bootstrap樣式11
2.3調用Bootstrap組件14
2.4調用Bootstrap JS特效16
2.5實戰:一個Bootstrap實現的響應式頁面17
2.6本章小結19
第3章Bootstrap腳手架20
3.1 Bootstrap全局樣式20
3.1.1什麼是全局樣式20
3.1.2基於HTML5文檔類型20
3.1.3屏幕、排版與鏈接21
3.1. 4用Normalize重置樣式22
3.2柵格系統22
3.2.1默認柵格系統22
3.2.2流式柵格系統26
3.3頁面佈局29
3.3.1固定佈局29
3.3.2流式佈局30
3 .4響應式設計30
3.4.1啟用響應式特性30
3.4.2響應式Bootstrap特點31
3.4.3 Bootstrap支持的設備31
3.4.4響應式佈局輔助類32
3.4.5如何應用響應式佈局32
3.5本章小結32
第4章Bootstrap樣式設計33
4.1 Bootstrap排版33
4.1.1標題33
4.1.2頁面主體36
4.1.3強調37
4.1.4縮略語39
4.1.5地址40
4.1.6引用40
4.1.7列表42
4.1.8描述45
4.1.9代碼47
4.2 Bootstrap表格49
4.2.1默認樣式表格49
4.2.2斑馬紋樣式表格51
4.2.3圓角邊框樣式表格52
4.2.4鼠標懸停樣式表格53
4.2.5帶行屬性樣式表格55
4.3 Bootstrap按鈕56
4.3.1默認樣式按鈕56
4.3.2按鈕大小樣式58
4.3.3特殊樣式按鈕59
4.4 Bootstrap圖片61
4.5本章小結61
第5章Bootstrap組件設計62
5.1 Bootstrap下拉菜單62
5.1.1標籤62
5.1.2對齊方式63
5.1.3禁用64
5.1.4子下拉菜單65
5.2 Bootstrap按鈕組69
5.2.1基本按鈕組69
5.2.2工具欄按鈕組69
5.2.3垂直按鈕組71
5.3 Bootstrap按鈕式下拉菜單71
5.4 Boo tstrap導航75
5.4.1默認標籤導航75
5.4.2 pills標籤導航76
5.4.3堆疊式標籤導航76
5.4.4下拉菜單式標籤導航77
5.4.5導航列表78
5.4.6標籤頁式導航80
5.5 Bootstrap導航條81
5.5.1默認樣式導航條81
5.5.2導航條表單82
5.5.3響應式導航條84
5.6 Bootstrap分頁86
5.6.1標準分頁方式86
5.6.2翻頁分頁方式87
5.7 Bootstrap標籤與徽章88
5.8 Bootstrap進度條89
5.8.1基本樣式進度條89
5.8.2斜條紋樣式進度條90
5.8.3堆疊樣式進度條91
5.9 Glyphicons字體圖標92
5.10本章小結93
第6章Bootstrap插件設計94
6.1 Bootstrap插件概述94
6.1.1單個或全部引入94
6.1.2 data屬性95
6.1.3事件95
6.2 Bootstrap模態對話框95
6.2.1模態對話框說明96
6.2.2靜態模態對話框96
6.2.3動態模態對話框97
6.3 Bootstrap下拉菜單(高級版) 100
6.4 Bootstrap滾動監聽103
6.5 Bootstrap可切換式標籤頁106
6.6 Bootstrap提示框109
6.6.1工具提示框109
6.6.2彈出框112
6.6.3警告 116
6.7 Bootstrap按鈕117
6.7.1狀態按鈕118
6.7.2複選按鈕119
6.7.3單選按鈕120
6.8 Bootstrap折疊122
6.9 Bootstrap幻燈125
6.10本章小結126
第7章Bootstrap響應式多媒體127
7.1 Bootstrap圖標的響應式127
7.2 Bootstrap圖像的響應式129
7.2.1可適配的圖像129
7.2.2圖像網格131
7.3 Bootstrap視頻的響應式137
7.4本章小結137
第8章Bootstrap扁平化風格頁面138
8.1扁平化設計概述138
8.1.1介紹138
8.1.2設計理念139
8.1.3頁面架構139
8.2頁眉設計141
8.2.1導航條141
8.2.2導航條圖標141
8.2.3導航條功能菜單143
8.2.4頁眉標題147
8.3左側導航設計148
8.4頁面主體設計151
8.4.1圖片列表151
8.4.2提交表單153
8.4.3文本列表156
8.5頁腳設計158
8.6本章小結159
第9章Bootstrap圖片幻燈頁面160
9.1圖片幻燈風格頁面設計概述160
9.2頁眉設計161
9.3頁面主體設計163
9.3.1圖片幻燈163
9.3.2圖標列表166
9.3.3圖片特輯167
9.4本章小結168
第10章Bo otstrap風格按鈕169
10.1風格按鈕設計概述169
10.2形狀與尺寸風格按鈕170
10.3邊框風格按鈕172
10.4下拉菜單風格按鈕174
10.5按鈕組風格176
10.6本章小結177
第11章Bootstrap響應式表格設計178
11.1表格設計概述178
11.2 Bootstrap基本表格180
11.3 Bootstrap數組表格182
11.4 Bootstrap Ajax表格183
11.5本章小結185
第12章Bootstrap響應式圖表設計186
12.1圖表設計概述186
12.2柱狀圖圖表188
12.3折線圖圖表190
12.4餅狀圖圖表195
12.5本章小結198
第13章jQuery UI Bootstrap工具199
13.1 jQuery UI Bootstrap工具概述199
13.1.1 jQuery UI工具199
13.1.2 jQuery UI Bootstrap工具200
13.1.3 jQuery UI Bootstrap應用200
13.2按鈕(Button) 201
13.2. 1基本樣式按鈕202
13.2.2 Set樣式按鈕203
13.2.3工具條樣式按鈕205
13.3折疊面板(Accordion) 206
13.4對話框(Dialog) 209
13.4.1非模態對話框209
13.4.2模態對話框211
13.5標籤頁(Tabs) 214
13.5.1基本樣式標 頁214
13.5.2可編輯樣式標籤頁217
13.6 Overlay與Shadow 223
13.7 Highlight與Error 224
13.8日期選擇器(Datepicker) 226
13.9滑塊(Slider) 227
13.9.1水平滑塊(Horizontal Slider) 227
13.9.2垂直滑塊(Vertical Slider) 228
13.10自動完成(Autoplete) 230
13.11下拉菜單(Menu) 232
13.12提示信息(Tooltip) 234
13.13微調按鈕(Spinner) 236
13.14本章小結239
第14章jQuery Mobile框架與Bootstrap主題風格240
14.1 jQuery Mobile Bootstrap概述240
14.1.1 jQuery Mobile框架240
14.1.2 Bootstrap主題風格241
14.1.3應用開發基礎241
14.2主頁設計243
14.3按鈕設計245
14.4列表設計248
14.5導航設計251
14.6表單設計255
14.6. 1輸入框255
14.6.2滑塊258
14.6.3切換開關260
14.6.4複選框262
14.6.5單選框264
14.6.6下拉菜單267
14.6.7提交按鈕269
14.7本章小結273
第15章實戰:應用Bootstrap實現一個貼吧管理頁面274
15.1項目設計概述274
15.2頁面佈局設計275
15 .2.1引入Bootstrap框架275
15.2.2實現頁面佈局代碼276
15.3頁面導航欄設計277
15.3.1構建導航的整體架構277
15.3.2設計標題和導航鏈接278
15.3.3設計搜索框和通知系統279
15.3. 4設計管理員登錄系統280
15.3.5設計響應式導航282
15.4左側邊欄設計284
15.5頁面主體設計285
15.5.1頁面主體功能的頭部286
15.5.2頁面主體功能的帖子列表287
15.6本章小結290
附錄CSS選擇器速覽291
作者介紹
作者:楊旺功
楊旺功,男,博士在讀,北京印刷學院新媒體學院數字媒體藝術專業教師,主要研究方向是信息與交互設計、虛擬現實、數字娛樂和新媒體藝術等,具有豐富的數字媒體交互產品設計和移動應用UI設計的教學經驗。