Bootstrap Web設(shè)計與開發(fā)實戰(zhàn)

目 錄第1章 Bootstrap從何而來 11.1 初識Bootstrap 11.2 什么是響應(yīng)式設(shè)計 21.3 響應(yīng)式設(shè)計四大原則 31.3.1 移動優(yōu)先還是PC優(yōu)先 31.3.2 內(nèi)容流 41.3.3 位圖還是矢量圖 41.3.4 相對單位還是固定單位 51.4 Bootstrap設(shè)計目標(biāo) 51.4.1 優(yōu)先針對移動設(shè)備 51.4.2 瀏覽器支持 61.4.3 響應(yīng)式設(shè)計 61.5 本章小結(jié) 6第2章 Bootstrap開發(fā)環(huán)境 72.1 Bootstrap開發(fā)環(huán)境概述 72.1.1 下載Bootstrap開發(fā)包 72.1.2 Bootstrap開發(fā)包目錄結(jié)構(gòu) 92.1.3 在網(wǎng)站中使用Bootstrap框架 102.2 調(diào)用Bootstrap樣式 112.3 調(diào)用Bootstrap組件 142.4 調(diào)用Bootstrap JS特效 162.5 實戰(zhàn)：一個Bootstrap實現(xiàn)的響應(yīng)式頁面 172.6 本章小結(jié) 19第3章 Bootstrap腳手架 203.1 Bootstrap全局樣式 203.1.1 什么是全局樣式 203.1.2 基于HTML5文檔類型 203.1.3 屏幕、排版與鏈接 213.1.4 用Normalize重置樣式 223.2 柵格系統(tǒng) 223.2.1 默認(rèn)柵格系統(tǒng) 223.2.2 流式柵格系統(tǒng) 263.3 頁面布局 293.3.1 固定布局 293.3.2 流式布局 303.4 響應(yīng)式設(shè)計 303.4.1 啟用響應(yīng)式特性 303.4.2 響應(yīng)式Bootstrap特點 313.4.3 Bootstrap支持的設(shè)備 313.4.4 響應(yīng)式布局輔助類 323.4.5 如何應(yīng)用響應(yīng)式布局 323.5 本章小結(jié) 32第4章 Bootstrap樣式設(shè)計 334.1 Bootstrap排版 334.1.1 標(biāo)題 334.1.2 頁面主體 364.1.3 強調(diào) 374.1.4 縮略語 394.1.5 地址 404.1.6 引用 404.1.7 列表 424.1.8 描述 454.1.9 代碼 474.2 Bootstrap表格 494.2.1 默認(rèn)樣式表格 494.2.2 斑馬紋樣式表格 514.2.3 圓角邊框樣式表格 524.2.4 鼠標(biāo)懸停樣式表格 534.2.5 帶行屬性樣式表格 554.3 Bootstrap按鈕 564.3.1 默認(rèn)樣式按鈕 564.3.2 按鈕大小樣式 584.3.3 特殊樣式按鈕 594.4 Bootstrap圖片 614.5 本章小結(jié) 61第5章 Bootstrap組件設(shè)計 625.1 Bootstrap下拉菜單 625.1.1 標(biāo)簽 625.1.2 對齊方式 635.1.3 禁用 645.1.4 子下拉菜單 655.2 Bootstrap按鈕組 695.2.1 基本按鈕組 695.2.2 工具欄按鈕組 695.2.3 垂直按鈕組 715.3 Bootstrap按鈕式下拉菜單 715.4 Bootstrap導(dǎo)航 755.4.1 默認(rèn)標(biāo)簽導(dǎo)航 755.4.2 pills標(biāo)簽導(dǎo)航 765.4.3 堆疊式標(biāo)簽導(dǎo)航 765.4.4 下拉菜單式標(biāo)簽導(dǎo)航 775.4.5 導(dǎo)航列表 785.4.6 標(biāo)簽頁式導(dǎo)航 805.5 Bootstrap導(dǎo)航條 815.5.1 默認(rèn)樣式導(dǎo)航條 815.5.2 導(dǎo)航條表單 825.5.3 響應(yīng)式導(dǎo)航條 845.6 Bootstrap分頁 865.6.1 標(biāo)準(zhǔn)分頁方式 865.6.2 翻頁分頁方式 875.7 Bootstrap標(biāo)簽與徽章 885.8 Bootstrap進度條 895.8.1 基本樣式進度條 895.8.2 斜條紋樣式進度條 905.8.3 堆疊樣式進度條 915.9 Glyphicons字體圖標(biāo) 925.10 本章小結(jié) 93 第6章 Bootstrap插件設(shè)計 946.1 Bootstrap插件概述 946.1.1 單個或全部引入 946.1.2 data屬性 956.1.3 事件 956.2 Bootstrap模態(tài)對話框 956.2.1 模態(tài)對話框說明 966.2.2 靜態(tài)模態(tài)對話框 966.2.3 動態(tài)模態(tài)對話框 976.3 Bootstrap下拉菜單（高級版） 1006.4 Bootstrap滾動監(jiān)聽 1036.5 Bootstrap可切換式標(biāo)簽頁 1066.6 Bootstrap提示框 1096.6.1 工具提示框 1096.6.2 彈出框 1126.6.3 警告框 1166.7 Bootstrap按鈕 1176.7.1 狀態(tài)按鈕 1186.7.2 復(fù)選按鈕 1196.7.3 單選按鈕 1206.8 Bootstrap折疊 1226.9 Bootstrap幻燈 1256.10 本章小結(jié) 126第7章 Bootstrap響應(yīng)式多媒體 1277.1 Bootstrap圖標(biāo)的響應(yīng)式 1277.2 Bootstrap圖像的響應(yīng)式 1297.2.1 可適配的圖像 1297.2.2 圖像網(wǎng)格 1317.3 Bootstrap視頻的響應(yīng)式 1377.4 本章小結(jié) 137第8章 Bootstrap扁平化風(fēng)格頁面 1388.1 扁平化設(shè)計概述 1388.1.1 介紹 1388.1.2 設(shè)計理念 1398.1.3 頁面架構(gòu) 1398.2 頁眉設(shè)計 1418.2.1 導(dǎo)航條 1418.2.2 導(dǎo)航條圖標(biāo) 1418.2.3 導(dǎo)航條功能菜單 1438.2.4 頁眉標(biāo)題 1478.3 左側(cè)導(dǎo)航設(shè)計 1488.4 頁面主體設(shè)計 1518.4.1 圖片列表 1518.4.2 提交表單 1538.4.3 文本列表 1568.5 頁腳設(shè)計 1588.6 本章小結(jié) 159第9章 Bootstrap圖片幻燈頁面 1609.1 圖片幻燈風(fēng)格頁面設(shè)計概述 1609.2 頁眉設(shè)計 1619.3 頁面主體設(shè)計 1639.3.1 圖片幻燈 1639.3.2 圖標(biāo)列表 1669.3.3 圖片特輯 1679.4 本章小結(jié) 168第10章 Bootstrap風(fēng)格按鈕 16910.1 風(fēng)格按鈕設(shè)計概述 16910.2 形狀與尺寸風(fēng)格按鈕 17010.3 邊框風(fēng)格按鈕 17210.4 下拉菜單風(fēng)格按鈕 17410.5 按鈕組風(fēng)格 17610.6 本章小結(jié) 177第11章 Bootstrap響應(yīng)式表格設(shè)計 17811.1 表格設(shè)計概述 17811.2 Bootstrap基本表格 18011.3 Bootstrap數(shù)組表格 18211.4 Bootstrap Ajax表格 18311.5 本章小結(jié) 185 第12章 Bootstrap響應(yīng)式圖表設(shè)計 18612.1 圖表設(shè)計概述 18612.2 柱狀圖圖表 18812.3 折線圖圖表 19012.4 餅狀圖圖表 19512.5 本章小結(jié) 198第13章 jQuery UI Bootstrap工具 19913.1 jQuery UI Bootstrap工具概述 19913.1.1 jQuery UI工具 19913.1.2 jQuery UI Bootstrap工具 20013.1.3 jQuery UI Bootstrap應(yīng)用 20013.2 按鈕（Button） 20113.2.1 基本樣式按鈕 20213.2.2 Set樣式按鈕 20313.2.3 工具條樣式按鈕 20513.3 折疊面板（Accordion） 20613.4 對話框（Dialog） 20913.4.1 非模態(tài)對話框 20913.4.2 模態(tài)對話框 21113.5 標(biāo)簽頁（Tabs） 21413.5.1 基本樣式標(biāo)簽頁 21413.5.2 可編輯樣式標(biāo)簽頁 21713.6 Overlay與Shadow 22313.7 Highlight與Error 22413.8 日期選擇器（Datepicker） 22613.9 滑塊（Slider） 22713.9.1 水平滑塊（Horizontal Slider） 22713.9.2 垂直滑塊（Vertical Slider） 22813.10 自動完成（Autocomplete） 23013.11 下拉菜單（Menu） 23213.12 提示信息（Tooltip） 23413.13 微調(diào)按鈕（Spinner） 23613.14 本章小結(jié) 239第14章 jQuery Mobile 框架與Bootstrap主題風(fēng)格 24014.1 jQuery Mobile Bootstrap概述 24014.1.1 jQuery Mobile框架 24014.1.2 Bootstrap主題風(fēng)格 24114.1.3 應(yīng)用開發(fā)基礎(chǔ) 24114.2 主頁設(shè)計 24314.3 按鈕設(shè)計 24514.4 列表設(shè)計 24814.5 導(dǎo)航設(shè)計 25114.6 表單設(shè)計 25514.6.1 輸入框 25514.6.2 滑塊 25814.6.3 切換開關(guān) 26014.6.4 復(fù)選框 26214.6.5 單選框 26414.6.6 下拉菜單 26714.6.7 提交按鈕 26914.7 本章小結(jié) 273第15章 實戰(zhàn)：應(yīng)用Bootstrap實現(xiàn)一個貼吧管理頁面 27415.1 項目設(shè)計概述 27415.2 頁面布局設(shè)計 27515.2.1 引入Bootstrap框架 27515.2.2 實現(xiàn)頁面布局代碼 27615.3 頁面導(dǎo)航欄設(shè)計 27715.3.1 構(gòu)建導(dǎo)航的整體架構(gòu) 27715.3.2 設(shè)計標(biāo)題和導(dǎo)航鏈接 27815.3.3 設(shè)計搜索框和通知系統(tǒng) 27915.3.4 設(shè)計管理員登錄系統(tǒng) 28015.3.5 設(shè)計響應(yīng)式導(dǎo)航 28215.4 左側(cè)邊欄設(shè)計 28415.5 頁面主體設(shè)計 28515.5.1 頁面主體功能的頭部 28615.5.2 頁面主體功能的帖子列表 28715.6 本章小結(jié) 290附錄 CSS選擇器速覽 291