Bootstrap Web設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)目錄

時(shí)間：2023-02-23 07:06:01 | 來源：營銷百科

時(shí)間：2023-02-23 07:06:01 來源：營銷百科

Bootstrap Web設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)目錄：第1章Bootstrap從何而來1

1.1初識(shí)Bootstrap1

1.2什么是響應(yīng)式設(shè)計(jì)2

1.3響應(yīng)式設(shè)計(jì)四大原則3

1.3.1移動(dòng)優(yōu)先還是PC優(yōu)先3

1.3.2內(nèi)容流4

1.3.3位圖還是矢量圖4

1.3.4相對(duì)單位還是固定單位5

1.4Bootstrap設(shè)計(jì)目標(biāo)5

1.4.1優(yōu)先針對(duì)移動(dòng)設(shè)備5

1.4.2瀏覽器支持6

1.4.3響應(yīng)式設(shè)計(jì)6

1.5本章小結(jié)6

第2章Bootstrap開發(fā)環(huán)境7

2.1Bootstrap開發(fā)環(huán)境概述7

2.1.1下載Bootstrap開發(fā)包7

2.1.2Bootstrap開發(fā)包目錄結(jié)構(gòu)9

2.1.3在網(wǎng)站中使用Bootstrap框架10

2.2調(diào)用Bootstrap樣式11

2.3調(diào)用Bootstrap組件14

2.4調(diào)用BootstrapJS特效16

2.5實(shí)戰(zhàn)：一個(gè)Bootstrap實(shí)現(xiàn)的響應(yīng)式頁面17

2.6本章小結(jié)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柵格系統(tǒng)22

3.2.1默認(rèn)柵格系統(tǒng)22

3.2.2流式柵格系統(tǒng)26

3.3頁面布局29

3.3.1固定布局29

3.3.2流式布局30

3.4響應(yīng)式設(shè)計(jì)30

3.4.1啟用響應(yīng)式特性30

3.4.2響應(yīng)式Bootstrap特點(diǎn)31

3.4.3Bootstrap支持的設(shè)備31

3.4.4響應(yīng)式布局輔助類32

3.4.5如何應(yīng)用響應(yīng)式布局32

3.5本章小結(jié)32

第4章Bootstrap樣式設(shè)計(jì)33

4.1Bootstrap排版33

4.1.1標(biāo)題33

4.1.2頁面主體36

4.1.3強(qiáng)調(diào)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默認(rèn)樣式表格49

4.2.2斑馬紋樣式表格51

4.2.3圓角邊框樣式表格52

4.2.4鼠標(biāo)懸停樣式表格53

4.2.5帶行屬性樣式表格55

4.3Bootstrap按鈕56

4.3.1默認(rèn)樣式按鈕56

4.3.2按鈕大小樣式58

4.3.3特殊樣式按鈕59

4.4Bootstrap圖片61

4.5本章小結(jié)61

第5章Bootstrap組件設(shè)計(jì)62

5.1Bootstrap下拉菜單62

5.1.1標(biāo)簽62

5.1.2對(duì)齊方式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導(dǎo)航75

5.4.1默認(rèn)標(biāo)簽導(dǎo)航75

5.4.2pills標(biāo)簽導(dǎo)航76

5.4.3堆疊式標(biāo)簽導(dǎo)航76

5.4.4下拉菜單式標(biāo)簽導(dǎo)航77

5.4.5導(dǎo)航列表78

5.4.6標(biāo)簽頁式導(dǎo)航80^[2]

5.5Bootstrap導(dǎo)航條81

5.5.1默認(rèn)樣式導(dǎo)航條81

5.5.2導(dǎo)航條表單82

5.5.3響應(yīng)式導(dǎo)航條84

5.6Bootstrap分頁86

5.6.1標(biāo)準(zhǔn)分頁方式86

5.6.2翻頁分頁方式87

5.7Bootstrap標(biāo)簽與徽章88

5.8Bootstrap進(jìn)度條89

5.8.1基本樣式進(jìn)度條89

5.8.2斜條紋樣式進(jìn)度條90

5.8.3堆疊樣式進(jìn)度條91

5.9Glyphicons字體圖標(biāo)92

5.10本章小結(jié)93

第6章Bootstrap插件設(shè)計(jì)94

6.1Bootstrap插件概述94

6.1.1單個(gè)或全部引入94

6.1.2data屬性95

6.1.3事件95

6.2Bootstrap模態(tài)對(duì)話框95

6.2.1模態(tài)對(duì)話框說明96

6.2.2靜態(tài)模態(tài)對(duì)話框96

6.2.3動(dòng)態(tài)模態(tài)對(duì)話框97

6.3Bootstrap下拉菜單（高級(jí)版）100

6.4Bootstrap滾動(dòng)監(jiān)聽103

6.5Bootstrap可切換式標(biāo)簽頁106

6.6Bootstrap提示框109

6.6.1工具提示框109

6.6.2彈出框112

6.6.3警告框116

6.7Bootstrap按鈕117

6.7.1狀態(tài)按鈕118

6.7.2復(fù)選按鈕119

6.7.3單選按鈕120

6.8Bootstrap折疊122

6.9Bootstrap幻燈125

6.10本章小結(jié)126

第7章Bootstrap響應(yīng)式多媒體127

7.1Bootstrap圖標(biāo)的響應(yīng)式127

7.2Bootstrap圖像的響應(yīng)式129

7.2.1可適配的圖像129

7.2.2圖像網(wǎng)格131

7.3Bootstrap視頻的響應(yīng)式137

7.4本章小結(jié)137

第8章Bootstrap扁平化風(fēng)格頁面138

8.1扁平化設(shè)計(jì)概述138

8.1.1介紹138

8.1.2設(shè)計(jì)理念139

8.1.3頁面架構(gòu)139

8.2頁眉設(shè)計(jì)141

8.2.1導(dǎo)航條141

8.2.2導(dǎo)航條圖標(biāo)141

8.2.3導(dǎo)航條功能菜單143

8.2.4頁眉標(biāo)題147

8.3左側(cè)導(dǎo)航設(shè)計(jì)148

8.4頁面主體設(shè)計(jì)151

8.4.1圖片列表151

8.4.2提交表單153

8.4.3文本列表156

8.5頁腳設(shè)計(jì)158

8.6本章小結(jié)159

第9章Bootstrap圖片幻燈頁面160

9.1圖片幻燈風(fēng)格頁面設(shè)計(jì)概述160

9.2頁眉設(shè)計(jì)161

9.3頁面主體設(shè)計(jì)163

9.3.1圖片幻燈163^[2]

9.3.2圖標(biāo)列表166

9.3.3圖片特輯167

9.4本章小結(jié)168

第10章Bootstrap風(fēng)格按鈕169

10.1風(fēng)格按鈕設(shè)計(jì)概述169

10.2形狀與尺寸風(fēng)格按鈕170

10.3邊框風(fēng)格按鈕172

10.4下拉菜單風(fēng)格按鈕174

10.5按鈕組風(fēng)格176

10.6本章小結(jié)177

第11章Bootstrap響應(yīng)式表格設(shè)計(jì)178

11.1表格設(shè)計(jì)概述178

11.2Bootstrap基本表格180

11.3Bootstrap數(shù)組表格182

11.4BootstrapAjax表格183

11.5本章小結(jié)185

第12章Bootstrap響應(yīng)式圖表設(shè)計(jì)186

12.1圖表設(shè)計(jì)概述186

12.2柱狀圖圖表188

12.3折線圖圖表190

12.4餅狀圖圖表195

12.5本章小結(jié)198

第13章jQueryUIBootstrap工具199

13.1jQueryUIBootstrap工具概述199

13.1.1jQueryUI工具199

13.1.2jQueryUIBootstrap工具200

13.1.3jQueryUIBootstrap應(yīng)用200

13.2按鈕（Button）201

13.2.1基本樣式按鈕202

13.2.2Set樣式按鈕203

13.2.3工具條樣式按鈕205

13.3折疊面板（Accordion）206

13.4對(duì)話框（Dialog）209

13.4.1非模態(tài)對(duì)話框209

13.4.2模態(tài)對(duì)話框211

13.5標(biāo)簽頁（Tabs）214

13.5.1基本樣式標(biāo)簽頁214

13.5.2可編輯樣式標(biāo)簽頁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自動(dòng)完成（Autocomplete）230

13.11下拉菜單（Menu）232

13.12提示信息（Tooltip）234

13.13微調(diào)按鈕（Spinner）236

13.14本章小結(jié)239

第14章jQueryMobile框架與Bootstrap主題風(fēng)格240

14.1jQueryMobile Bootstrap概述240

14.1.1jQueryMobile框架240

14.1.2Bootstrap主題風(fēng)格241

14.1.3應(yīng)用開發(fā)基礎(chǔ)241

14.2主頁設(shè)計(jì)243

14.3按鈕設(shè)計(jì)245

14.4列表設(shè)計(jì)248

14.5導(dǎo)航設(shè)計(jì)251

14.6表單設(shè)計(jì)255

14.6.1輸入框255

14.6.2滑塊258

14.6.3切換開關(guān)260

14.6.4復(fù)選框262

14.6.5單選框264

14.6.6下拉菜單267

14.6.7提交按鈕269

14.7本章小結(jié)273

第15章實(shí)戰(zhàn)：應(yīng)用Bootstrap實(shí)現(xiàn)一個(gè)貼吧管理頁面274

15.1項(xiàng)目設(shè)計(jì)概述274

15.2頁面布局設(shè)計(jì)275

15.2.1引入Bootstrap框架275

15.2.2實(shí)現(xiàn)頁面布局代碼276

15.3頁面導(dǎo)航欄設(shè)計(jì)277

15.3.1構(gòu)建導(dǎo)航的整體架構(gòu)277

15.3.2設(shè)計(jì)標(biāo)題和導(dǎo)航鏈接278

15.3.3設(shè)計(jì)搜索框和通知系統(tǒng)279

15.3.4設(shè)計(jì)管理員登錄系統(tǒng)280

15.3.5設(shè)計(jì)響應(yīng)式導(dǎo)航282

15.4左側(cè)邊欄設(shè)計(jì)284

15.5頁面主體設(shè)計(jì)285

15.5.1頁面主體功能的頭部286

15.5.2頁面主體功能的帖子列表287

15.6本章小結(jié)290

附錄CSS選擇器速覽291^[2]