Bootstrap從入門到項目實戰(zhàn)

第1章　開發(fā)框架Bootstrap 4簡介  001
1.1　Bootstrap概述 001
1.1.1 Bootstrap發(fā)展歷史 001
1.1.2 Bootstrap的優(yōu)勢 002
1.1.3 Bootstrap 4介紹 003
1.1.4 Bootstrap 4瀏覽器支持 004
1.2　Bootstrap特性 005
1.2.1 Bootstrap 4的構(gòu)成 005
1.2.2 Bootstrap的特色 007
1.3　Bootstrap應(yīng)用瀏覽 007
1.3.1 Bootstrap網(wǎng)站 008
1.3.2 Bootstrap插件 009
1.4　Bootstrap開發(fā)工具和資源 010
1.4.1 Bootstrap開發(fā)工具 010
1.4.2 Bootstrap資源 011
第2章　使用的框架Bootstrap 4  012
2.1　下載Bootstrap 012
2.2　Bootstrap 的結(jié)構(gòu) 014
2.2.1 源碼版Bootstrap文件結(jié)構(gòu) 014
2.2.2 編譯版Bootstrap文件結(jié)構(gòu) 015
2.3　安裝 Bootstrap 016
2.3.1 本地安裝016
2.3.2 在線安裝017
2.4　案例實訓(xùn)1—設(shè)計網(wǎng)頁按鈕 017
2.5　案例實訓(xùn)2—設(shè)計網(wǎng)頁輪播組件 018
第3章　快速掌握Bootstrap 4布局  021
3.1　布局基礎(chǔ)021
3.1.1 布局容器021
3.1.2 響應(yīng)斷點023
3.1.3 z-index 023
3.2　網(wǎng)格系統(tǒng)024
3.2.1 網(wǎng)格選項024
3.2.2 自動布局列025
3.2.3 響應(yīng)類028
3.2.4 重排序031
3.2.5 列嵌套034
3.3　布局工具類 035
3.4　案例實訓(xùn)1—仿QQ登錄界面 036
3.5　案例實訓(xùn)2—開發(fā)電商網(wǎng)站特效 041
第4章　Bootstrap 4的新布局—彈性盒子  045
4.1　定義彈性盒子 045
4.2　排列方向047
4.2.1 水平方向排列047
4.2.2 垂直方向排列047
4.3　內(nèi)容排列048
4.4　項目對齊050
4.5　自動對齊051
4.6　自動相等053
4.7　等寬變換053
4.8　自動浮動054
4.8.1 水平方向浮動054
4.8.2 垂直方向浮動055
4.9　彈性布局—包裹 056
4.10　排列順序057
4.11　對齊內(nèi)容 057
第5 章　核心工具庫—CSS 通用樣式類  061
5.1　文本處理061
5.1.1 文本對齊061
5.1.2 文本換行063
5.1.3 文本轉(zhuǎn)換064
5.1.4 粗細和斜體065
5.1.5 其他一些文本類066
5.2　顏色 066
5.2.1 文本顏色066
5.2.2 鏈接文本顏色068
5.2.3 背景顏色069
5.3　邊框 069
5.3.1 添加邊框070
5.3.2 邊框顏色071
5.3.3 圓角邊框072
5.4　寬度和高度 074
5.4.1 相對于父元素074
5.4.2 相對于視口076
5.5　邊距 077
5.5.1 邊距的定義077
5.5.2 響應(yīng)式邊距078
5.6　浮動 079
5.6.1 實現(xiàn)浮動079
5.6.2 響應(yīng)式浮動080
5.7　display 屬性類 081
5.7.1 實現(xiàn)display 屬性 081
5.7.2 響應(yīng)式的隱藏或顯示元素082
5.8　嵌入 083
5.9　內(nèi)容溢出084
5.10　定位 085
5.11　陰影 086
5.12　關(guān)閉圖標(biāo)087
第6 章　Bootstrap 4 的新版式   088
6.1　初始化與CSS 重置 088
6.2　排版 090
6.2.1 標(biāo)題090
6.2.2 段落093
6.2.3 強調(diào)094
6.2.4 縮略語095
6.2.5 引用096
6.3　代碼 097
6.4　圖片 100
6.5　表格 102
6.5.1 表格默認風(fēng)格103
6.5.2 設(shè)計個性化風(fēng)格104
6.6　案例實訓(xùn)— 設(shè)計后臺人員管理頁面 108
第7 章　認識CSS 組件   111
7.1　正確使用CSS 組件 111
7.2　按鈕 114
7.2.1 定義按鈕114
7.2.2 設(shè)計按鈕風(fēng)格114
7.3　按鈕組 117
7.3.1 定義按鈕組117
7.3.2 定義按鈕組工具欄118
7.3.3 設(shè)計按鈕組布局和樣式119
7.4　下拉菜單121
7.4.1 定義下拉菜單121
7.4.2 設(shè)計下拉按鈕的樣式123
7.4.3 設(shè)計下拉菜單的樣式124
7.5　導(dǎo)航 128
7.5.1 定義導(dǎo)航128
7.5.2 設(shè)計導(dǎo)航的布局129
7.5.3 設(shè)計導(dǎo)航的風(fēng)格131
7.5.4 設(shè)計導(dǎo)航選項卡135
7.6　超大屏幕137
7.6.1 定義超大屏幕137
7.6.2 設(shè)計風(fēng)格138
7.7　案例實訓(xùn)—設(shè)計廣告牌 139
第8 章　深入掌握CSS 組件   141
8.1　徽章 141
8.1.1 定義徽章141
8.1.2 設(shè)置顏色143
8.1.3 橢圓形徽章143
8.1.4 鏈接徽章144
8.2　警告框 145
8.3　媒體對象148
8.3.1　媒體版式149
8.3.2 媒體嵌套149
8.3.3　對齊方式150
8.3.4　排列順序151
8.3.5　媒體列表152
8.4　進度條 153
8.4.1 定義進度條153
8.4.2 設(shè)計進度條樣式154
8.4.3 設(shè)計進度條風(fēng)格156
8.5　導(dǎo)航欄 158
8.5.1 定義導(dǎo)航欄158
8.5.2 定位導(dǎo)航欄163
8.5.3 設(shè)計導(dǎo)航欄配色164
8.5.4 擴展導(dǎo)航欄內(nèi)容165
8.6　案例實訓(xùn)—設(shè)計動態(tài)進度條 167
第9 章　高級的CSS 組件   169
9.1　表單 169
9.1.1 定義表單控件169
9.1.2 設(shè)計單選按鈕/ 復(fù)選框布局和樣式173
9.1.3 表單布局風(fēng)格176
9.1.4 幫助文本180
9.1.5 禁用表單180
9.2　列表組 181
9.2.1 定義列表組181
9.2.2 設(shè)計列表組的風(fēng)格樣式182
9.2.3 定制內(nèi)容185
9.3　面包屑 186
9.3.1 定義面包屑186
9.3.2 設(shè)計分隔符187
9.4　分頁 188
9.4.1 定義分頁188
9.4.2 使用圖標(biāo)189
9.4.3 設(shè)計分頁風(fēng)格190
第10 章　Bootstrap 4 的新增組件—旋轉(zhuǎn)器和卡片  194
10.1　旋轉(zhuǎn)器特效 194
10.1.1 定義旋轉(zhuǎn)器194
10.1.2 設(shè)計旋轉(zhuǎn)器風(fēng)格195
10.1.3 對齊旋轉(zhuǎn)器196
10.1.4 按鈕旋轉(zhuǎn)器198
10.2　卡片 199
10.2.1 定義卡片199
10.2.2 卡片的內(nèi)容類型200
10.2.3 控制卡片的寬度203
10.2.4 文本對齊方式205
10.2.5 添加導(dǎo)航206
10.2.6 圖像背景208
10.2.7 卡片風(fēng)格208
10.2.8 卡片排版211
10.3　案例實訓(xùn)1—仿云巴網(wǎng)站 215
10.4　案例實訓(xùn)2—動態(tài)進度條及百分比數(shù)字顯示 218
第11 章　快速認識JavaScript 插件  223
11.1　插件概述 223
11.1.1 插件分類 223
11.1.2 安裝插件 224
11.1.3 調(diào)用插件 225
11.1.4 事件 226
11.2　按鈕 226
11.2.1 切換狀態(tài) 227
11.2.2 按鈕式復(fù)選框和單選框 227
11.3　警告框 230
11.3.1 關(guān)閉警告框 230
11.3.2 添加用戶行為 232
11.4　下拉菜單 233
11.4.1 調(diào)用下拉菜單 233
11.4.2 添加用戶行為 235
11.5　模態(tài)框 237
11.5.1 定義模態(tài)框 237
11.5.2 模態(tài)框布局和樣式 239
11.5.3 調(diào)用模態(tài)框 243
11.5.4 添加用戶行為 245
11.6　標(biāo)簽頁 246
11.6.1 定義標(biāo)簽頁 247
11.6.2 調(diào)用標(biāo)簽頁 248
11.6.3 添加用戶行為 249
11.7　案例實訓(xùn)1—仿淘寶搶紅包 251
11.8　案例實訓(xùn)2—仿商品推薦區(qū) 252
第12 章　深入精通JavaScript 插件  257
12.1　折疊 257
12.1.1 定義折疊257
12.1.2 控制多目標(biāo)258
12.1.3 設(shè)計手風(fēng)琴效果259
12.1.4 調(diào)用折疊261
12.1.5 添加用戶行為261
12.2　工具提示263
12.2.1 定義工具提示263
12.2.2 工具提示方向264
12.2.3 調(diào)用工具提示266
12.2.4 添加用戶行為267
12.3　彈窗 269
12.3.1 定義彈窗269
12.3.2 彈窗方向271
12.3.3 調(diào)用彈窗271
12.3.4 添加用戶行為273
12.4　輪播 275
12.4.1 定義輪播275
12.4.2 設(shè)計輪播風(fēng)格278
12.4.3 調(diào)用輪播279
12.4.4 添加用戶行為282
12.5　滾動監(jiān)聽283
12.5.1 定義滾動監(jiān)聽283
12.5.2 調(diào)用滾動監(jiān)聽289
12.5.3 添加用戶行為290
12.6　實戰(zhàn)實訓(xùn)1—設(shè)計折疊搜索框 291
12.7　實戰(zhàn)實訓(xùn)2—仿小米內(nèi)容展示 293
第13 章　項目實訓(xùn)1—招聘網(wǎng)中的簡歷模板  295
13.1　案例概述295
13.1.1 案例結(jié)構(gòu)295
13.1.2 設(shè)計效果296
13.1.3 設(shè)計準(zhǔn)備298
13.2　設(shè)計布局298
13.3　設(shè)計左側(cè)信息欄 299
13.4　設(shè)計導(dǎo)航條 300
13.5　設(shè)計主頁301
13.5.1 工作經(jīng)歷301
13.5.2 專業(yè)技能302
13.5.3 教育經(jīng)歷303
13.5.4 綜合概述304
13.6　設(shè)計聯(lián)系頁 306
13.7　設(shè)計相冊頁 306
第14 章　項目實訓(xùn)2—仿星巴克網(wǎng)站  308
14.1　網(wǎng)站概述308
14.1.1 網(wǎng)站結(jié)構(gòu)308
14.1.2 設(shè)計效果308
14.1.3 設(shè)計準(zhǔn)備310
14.2　設(shè)計首頁布局 310
14.3　設(shè)計可切換導(dǎo)航 311
14.4　主體內(nèi)容317
14.4.1 設(shè)計輪播廣告區(qū)317
14.4.2 設(shè)計產(chǎn)品推薦區(qū)319
14.4.3 設(shè)計登錄注冊區(qū)和Logo 319
14.4.4 設(shè)計特色展示區(qū)320
14.4.5 設(shè)計產(chǎn)品生產(chǎn)流程區(qū)321
14.5　設(shè)計底部隱藏導(dǎo)航 324
第15 章　項目實訓(xùn)3—相冊類博客項目  326
15.1　案例概述326
15.1.1 案例結(jié)構(gòu)326
15.1.2 設(shè)計效果327
15.1.3 設(shè)計準(zhǔn)備328
15.2　設(shè)計導(dǎo)航欄 329
15.3　首頁 330
15.3.1 設(shè)計相冊展示330
15.3.2 添加Swipebox 燈箱插件333
15.4　分類頁 337
15.4.1 設(shè)計相冊分類展示337
15.4.2 添加Swipebox 燈箱插件340
15.5　博客 341
15.6　聯(lián)系頁 343
15.6.1 設(shè)計布局343
15.6.2 添加工具提示345
第16 章　項目實訓(xùn)4—設(shè)計流行企業(yè)網(wǎng)站 347
16.1　網(wǎng)站概述347
16.2　設(shè)計主頁349
16.3　設(shè)計側(cè)邊導(dǎo)航欄 360
16.4　設(shè)計登錄頁 362
第17 章　項目實訓(xùn)5—Web 設(shè)計與定制網(wǎng)站  365
17.1　網(wǎng)站概述365
17.1.1 網(wǎng)站結(jié)構(gòu)365
17.1.2 網(wǎng)站布局365
17.1.3 設(shè)計準(zhǔn)備366
17.2　設(shè)計主頁面導(dǎo)航 366
17.3　設(shè)計主頁面內(nèi)容 369
17.3.1 設(shè)計首頁369
17.3.2 “關(guān)于我們”頁面設(shè)計370
17.3.3 “我們的團隊”頁面設(shè)計372
17.3.4 “我們的服務(wù)”頁面設(shè)計375
17.3.5 “我們的博客”頁面設(shè)計376
17.3.6 “我們的定制”頁面設(shè)計377
17.4　設(shè)計腳注379
第18 章　項目實訓(xùn)6—開發(fā)神影視頻網(wǎng)站 380
18.1　網(wǎng)站概述380
18.2　設(shè)計主頁面 382
18.2.1 設(shè)計頭部內(nèi)容382
18.2.2 設(shè)計輪播384
18.2.3 設(shè)計分類列表384
18.2.4 設(shè)計“視頻內(nèi)容”頁面386
18.2.5 設(shè)計腳注391