Bootstrap Web 設計與開發實戰 Bootstrap Web设计与开发实战

作者：楊旺功

楊旺功，男，博士在讀，北京印刷學院新媒體學院數字媒體藝術專業教師，主要研究方向是信息與交互設計、虛擬現實、數字娛樂和新媒體藝術等，具有豐富的數字媒體交互產品設計和移動應用UI設計的教學經驗。

第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水平滑塊（Horizo​​ntal 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