Bootstrap Web設計與開發實戰

《Bootstrap Web設計與開發實戰》是2017年清華大學出版社出版的圖書，作者是楊旺功。

基本介紹

• 中文名：Bootstrap Web設計與開發實戰
• 作者：楊旺功
• 出版社：清華大學出版社
• 出版時間：2017年07月01日
• 定價：69 元
• 開本：16 開
• 裝幀：平裝
• ISBN：9787302470878

內容簡介

本書由淺入深，全面、系統、詳盡地介紹了Bootstrap框架相關技術在Web和移動Web開發領域的套用。書中提供了大量的代碼示例，讀者可以通過這些示例深入理解Bootstrap框架相關的知識點，同時還可以舉一反三，將這些示例套用到實戰項目之中。

目錄

第1章Bootstrap從何而來1

1.1初識Bootstrap1

1.2什麼是回響式設計2

1.3回響式設計四大原則3

1.3.1移動優先還是PC優先3

1.3.2內容流4

1.3.3點陣圖還是矢量圖4

1.3.4相對單位還是固定單位5

1.4Bootstrap設計目標5

1.4.1優先針對移動設備5

1.4.2瀏覽器支持6

1.4.3回響式設計6

1.5本章小結6

第2章Bootstrap開發環境7

2.1Bootstrap開發環境概述7

2.1.1下載Bootstrap開發包7

2.1.2Bootstrap開發包目錄結構9

2.1.3在網站中使用Bootstrap框架10

2.2調用Bootstrap樣式11

2.3調用Bootstrap組件14

2.4調用BootstrapJS特效16

2.5實戰：一個Bootstrap實現的回響式頁面17

2.6本章小結19

第3章Bootstrap腳手架20

3.1Bootstrap全局樣式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.3Bootstrap支持的設備31

3.4.4回響式布局輔助類32

3.4.5如何套用回響式布局32

3.5本章小結32

第4章Bootstrap樣式設計33

4.1Bootstrap排版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.2Bootstrap表格49

4.2.1默認樣式表格49

4.2.2斑馬紋樣式表格51

4.2.3圓角框線樣式表格52

4.2.4滑鼠懸停樣式表格53

4.2.5帶行屬性樣式表格55

4.3Bootstrap按鈕56

4.3.1默認樣式按鈕56

4.3.2按鈕大小樣式58

4.3.3特殊樣式按鈕59

4.4Bootstrap圖片61

4.5本章小結61

第5章Bootstrap組件設計62

5.1Bootstrap下拉選單62

5.1.1標籤62

5.1.2對齊方式63

5.1.3禁用64

5.1.4子下拉選單65

5.2Bootstrap按鈕組69

5.2.1基本按鈕組69

5.2.2工具列按鈕組69

5.2.3垂直按鈕組71

5.3Bootstrap按鈕式下拉選單71

5.4Bootstrap導航75

5.4.1默認標籤導航75

5.4.2pills標籤導航76

5.4.3堆疊式標籤導航76

5.4.4下拉選單式標籤導航77

5.4.5導航列表78

5.4.6標籤頁式導航80

5.5Bootstrap導航條81

5.5.1默認樣式導航條81

5.5.2導航條表單82

5.5.3回響式導航條84

5.6Bootstrap分頁86

5.6.1標準分頁方式86

5.6.2翻頁分頁方式87

5.7Bootstrap標籤與徽章88

5.8Bootstrap進度條89

5.8.1基本樣式進度條89

5.8.2斜條紋樣式進度條90

5.8.3堆疊樣式進度條91

5.9Glyphicons字型圖示92

5.10本章小結93

第6章Bootstrap外掛程式設計94

6.1Bootstrap外掛程式概述94

6.1.1單個或全部引入94

6.1.2data屬性95

6.1.3事件95

6.2Bootstrap模態對話框95

6.2.1模態對話框說明96

6.2.2靜態模態對話框96

6.2.3動態模態對話框97

6.3Bootstrap下拉選單（高級版）100

6.4Bootstrap滾動監聽103

6.5Bootstrap可切換式標籤頁106

6.6Bootstrap提示框109

6.6.1工具提示框109

6.6.2彈出框112

6.6.3警告框116

6.7Bootstrap按鈕117

6.7.1狀態按鈕118

6.7.2複選按鈕119

6.7.3單選按鈕120

6.8Bootstrap摺疊122

6.9Bootstrap幻燈125

6.10本章小結126

第7章Bootstrap回響式多媒體127

7.1Bootstrap圖示的回響式127

7.2Bootstrap圖像的回響式129

7.2.1可適配的圖像129

7.2.2圖像格線131

7.3Bootstrap視頻的回響式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.2Bootstrap基本表格180

11.3Bootstrap數組表格182

11.4BootstrapAjax表格183

11.5本章小結185

第12章Bootstrap回響式圖表設計186

12.1圖表設計概述186

12.2柱狀圖圖表188

12.3折線圖圖表190

12.4餅狀圖圖表195

12.5本章小結198

第13章jQueryUIBootstrap工具199

13.1jQueryUIBootstrap工具概述199

13.1.1jQueryUI工具199

13.1.2jQueryUIBootstrap工具200

13.1.3jQueryUIBootstrap套用200

13.2按鈕（Button）201

13.2.1基本樣式按鈕202

13.2.2Set樣式按鈕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.6Overlay與Shadow223

13.7Highlight與Error224

13.8日期選擇器（Datepicker）226

13.9滑塊（Slider）227

13.9.1水平滑塊（HorizontalSlider）227

13.9.2垂直滑塊（VerticalSlider）228

13.10自動完成（Autocomplete）230

13.11下拉選單（Menu）232

13.12提示信息（Tooltip）234

13.13微調按鈕（Spinner）236

13.14本章小結239

第14章jQueryMobile框架與Bootstrap主題風格240

14.1jQueryMobile+Bootstrap概述240

14.1.1jQueryMobile框架240

14.1.2Bootstrap主題風格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