《BootstrapWeb設計與開發實戰/跨平台移動開發叢書》是2017年清華大學出版社出版的圖書,作者是楊旺功。
基本介紹
- 中文名:BootstrapWeb設計與開發實戰/跨平台移動開發叢書
- 作者:楊旺功
- 出版社:清華大學出版社
- 出版時間:2017年6月1日
- 頁數:292 頁
- 開本:16 開
- 裝幀:平裝
- ISBN:9787302470878
內容簡介,圖書目錄,作者簡介,
內容簡介
本廈應辨書由淺入深,全面、系統、詳盡地介紹了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 Bootstrap導航 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章 Bootstrap風格按鈕 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 自動完成(Autocomplete) 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設計的教學經驗。
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 Bootstrap導航 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章 Bootstrap風格按鈕 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 自動完成(Autocomplete) 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設計的教學經驗。