Bootstrap從入門到項(xiàng)目實(shí)戰(zhàn)

第1章　開發(fā)框架Bootstrap 4簡介  001
1.1　Bootstrap概述 001
1.1.1 Bootstrap發(fā)展歷史 001
1.1.2 Bootstrap的優(yōu)勢(shì) 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　案例實(shí)訓(xùn)1—設(shè)計(jì)網(wǎng)頁按鈕 017
2.5　案例實(shí)訓(xùn)2—設(shè)計(jì)網(wǎng)頁輪播組件 018
第3章　快速掌握Bootstrap 4布局  021
3.1　布局基礎(chǔ)021
3.1.1 布局容器021
3.1.2 響應(yīng)斷點(diǎn)023
3.1.3 z-index 023
3.2　網(wǎng)格系統(tǒng)024
3.2.1 網(wǎng)格選項(xiàng)024
3.2.2 自動(dòng)布局列025
3.2.3 響應(yīng)類028
3.2.4 重排序031
3.2.5 列嵌套034
3.3　布局工具類 035
3.4　案例實(shí)訓(xùn)1—仿QQ登錄界面 036
3.5　案例實(shí)訓(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　項(xiàng)目對(duì)齊050
4.5　自動(dòng)對(duì)齊051
4.6　自動(dòng)相等053
4.7　等寬變換053
4.8　自動(dòng)浮動(dòng)054
4.8.1 水平方向浮動(dòng)054
4.8.2 垂直方向浮動(dòng)055
4.9　彈性布局—包裹 056
4.10　排列順序057
4.11　對(duì)齊內(nèi)容 057
第5 章　核心工具庫—CSS 通用樣式類  061
5.1　文本處理061
5.1.1 文本對(duì)齊061
5.1.2 文本換行063
5.1.3 文本轉(zhuǎn)換064
5.1.4 粗細(xì)和斜體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 相對(duì)于父元素074
5.4.2 相對(duì)于視口076
5.5　邊距 077
5.5.1 邊距的定義077
5.5.2 響應(yīng)式邊距078
5.6　浮動(dòng) 079
5.6.1 實(shí)現(xiàn)浮動(dòng)079
5.6.2 響應(yīng)式浮動(dòng)080
5.7　display 屬性類 081
5.7.1 實(shí)現(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 強(qiáng)調(diào)094
6.2.4 縮略語095
6.2.5 引用096
6.3　代碼 097
6.4　圖片 100
6.5　表格 102
6.5.1 表格默認(rèn)風(fēng)格103
6.5.2 設(shè)計(jì)個(gè)性化風(fēng)格104
6.6　案例實(shí)訓(xùn)— 設(shè)計(jì)后臺(tái)人員管理頁面 108
第7 章　認(rèn)識(shí)CSS 組件   111
7.1　正確使用CSS 組件 111
7.2　按鈕 114
7.2.1 定義按鈕114
7.2.2 設(shè)計(jì)按鈕風(fēng)格114
7.3　按鈕組 117
7.3.1 定義按鈕組117
7.3.2 定義按鈕組工具欄118
7.3.3 設(shè)計(jì)按鈕組布局和樣式119
7.4　下拉菜單121
7.4.1 定義下拉菜單121
7.4.2 設(shè)計(jì)下拉按鈕的樣式123
7.4.3 設(shè)計(jì)下拉菜單的樣式124
7.5　導(dǎo)航 128
7.5.1 定義導(dǎo)航128
7.5.2 設(shè)計(jì)導(dǎo)航的布局129
7.5.3 設(shè)計(jì)導(dǎo)航的風(fēng)格131
7.5.4 設(shè)計(jì)導(dǎo)航選項(xiàng)卡135
7.6　超大屏幕137
7.6.1 定義超大屏幕137
7.6.2 設(shè)計(jì)風(fēng)格138
7.7　案例實(shí)訓(xùn)—設(shè)計(jì)廣告牌 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　媒體對(duì)象148
8.3.1　媒體版式149
8.3.2 媒體嵌套149
8.3.3　對(duì)齊方式150
8.3.4　排列順序151
8.3.5　媒體列表152
8.4　進(jìn)度條 153
8.4.1 定義進(jìn)度條153
8.4.2 設(shè)計(jì)進(jìn)度條樣式154
8.4.3 設(shè)計(jì)進(jìn)度條風(fēng)格156
8.5　導(dǎo)航欄 158
8.5.1 定義導(dǎo)航欄158
8.5.2 定位導(dǎo)航欄163
8.5.3 設(shè)計(jì)導(dǎo)航欄配色164
8.5.4 擴(kuò)展導(dǎo)航欄內(nèi)容165
8.6　案例實(shí)訓(xùn)—設(shè)計(jì)動(dòng)態(tài)進(jìn)度條 167
第9 章　高級(jí)的CSS 組件   169
9.1　表單 169
9.1.1 定義表單控件169
9.1.2 設(shè)計(jì)單選按鈕/ 復(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è)計(jì)列表組的風(fēng)格樣式182
9.2.3 定制內(nèi)容185
9.3　面包屑 186
9.3.1 定義面包屑186
9.3.2 設(shè)計(jì)分隔符187
9.4　分頁 188
9.4.1 定義分頁188
9.4.2 使用圖標(biāo)189
9.4.3 設(shè)計(jì)分頁風(fēng)格190
第10 章　Bootstrap 4 的新增組件—旋轉(zhuǎn)器和卡片  194
10.1　旋轉(zhuǎn)器特效 194
10.1.1 定義旋轉(zhuǎn)器194
10.1.2 設(shè)計(jì)旋轉(zhuǎn)器風(fēng)格195
10.1.3 對(duì)齊旋轉(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 文本對(duì)齊方式205
10.2.5 添加導(dǎo)航206
10.2.6 圖像背景208
10.2.7 卡片風(fēng)格208
10.2.8 卡片排版211
10.3　案例實(shí)訓(xùn)1—仿云巴網(wǎng)站 215
10.4　案例實(shí)訓(xùn)2—動(dòng)態(tài)進(jìn)度條及百分比數(shù)字顯示 218
第11 章　快速認(rèn)識(shí)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　案例實(shí)訓(xùn)1—仿淘寶搶紅包 251
11.8　案例實(shí)訓(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è)計(jì)手風(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è)計(jì)輪播風(fēng)格278
12.4.3 調(diào)用輪播279
12.4.4 添加用戶行為282
12.5　滾動(dòng)監(jiān)聽283
12.5.1 定義滾動(dòng)監(jiān)聽283
12.5.2 調(diào)用滾動(dòng)監(jiān)聽289
12.5.3 添加用戶行為290
12.6　實(shí)戰(zhàn)實(shí)訓(xùn)1—設(shè)計(jì)折疊搜索框 291
12.7　實(shí)戰(zhàn)實(shí)訓(xùn)2—仿小米內(nèi)容展示 293
第13 章　項(xiàng)目實(shí)訓(xùn)1—招聘網(wǎng)中的簡歷模板  295
13.1　案例概述295
13.1.1 案例結(jié)構(gòu)295
13.1.2 設(shè)計(jì)效果296
13.1.3 設(shè)計(jì)準(zhǔn)備298
13.2　設(shè)計(jì)布局298
13.3　設(shè)計(jì)左側(cè)信息欄 299
13.4　設(shè)計(jì)導(dǎo)航條 300
13.5　設(shè)計(jì)主頁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è)計(jì)聯(lián)系頁 306
13.7　設(shè)計(jì)相冊(cè)頁 306
第14 章　項(xiàng)目實(shí)訓(xùn)2—仿星巴克網(wǎng)站  308
14.1　網(wǎng)站概述308
14.1.1 網(wǎng)站結(jié)構(gòu)308
14.1.2 設(shè)計(jì)效果308
14.1.3 設(shè)計(jì)準(zhǔn)備310
14.2　設(shè)計(jì)首頁布局 310
14.3　設(shè)計(jì)可切換導(dǎo)航 311
14.4　主體內(nèi)容317
14.4.1 設(shè)計(jì)輪播廣告區(qū)317
14.4.2 設(shè)計(jì)產(chǎn)品推薦區(qū)319
14.4.3 設(shè)計(jì)登錄注冊(cè)區(qū)和Logo 319
14.4.4 設(shè)計(jì)特色展示區(qū)320
14.4.5 設(shè)計(jì)產(chǎn)品生產(chǎn)流程區(qū)321
14.5　設(shè)計(jì)底部隱藏導(dǎo)航 324
第15 章　項(xiàng)目實(shí)訓(xùn)3—相冊(cè)類博客項(xiàng)目  326
15.1　案例概述326
15.1.1 案例結(jié)構(gòu)326
15.1.2 設(shè)計(jì)效果327
15.1.3 設(shè)計(jì)準(zhǔn)備328
15.2　設(shè)計(jì)導(dǎo)航欄 329
15.3　首頁 330
15.3.1 設(shè)計(jì)相冊(cè)展示330
15.3.2 添加Swipebox 燈箱插件333
15.4　分類頁 337
15.4.1 設(shè)計(jì)相冊(cè)分類展示337
15.4.2 添加Swipebox 燈箱插件340
15.5　博客 341
15.6　聯(lián)系頁 343
15.6.1 設(shè)計(jì)布局343
15.6.2 添加工具提示345
第16 章　項(xiàng)目實(shí)訓(xùn)4—設(shè)計(jì)流行企業(yè)網(wǎng)站 347
16.1　網(wǎng)站概述347
16.2　設(shè)計(jì)主頁349
16.3　設(shè)計(jì)側(cè)邊導(dǎo)航欄 360
16.4　設(shè)計(jì)登錄頁 362
第17 章　項(xiàng)目實(shí)訓(xùn)5—Web 設(shè)計(jì)與定制網(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è)計(jì)準(zhǔn)備366
17.2　設(shè)計(jì)主頁面導(dǎo)航 366
17.3　設(shè)計(jì)主頁面內(nèi)容 369
17.3.1 設(shè)計(jì)首頁369
17.3.2 “關(guān)于我們”頁面設(shè)計(jì)370
17.3.3 “我們的團(tuán)隊(duì)”頁面設(shè)計(jì)372
17.3.4 “我們的服務(wù)”頁面設(shè)計(jì)375
17.3.5 “我們的博客”頁面設(shè)計(jì)376
17.3.6 “我們的定制”頁面設(shè)計(jì)377
17.4　設(shè)計(jì)腳注379
第18 章　項(xiàng)目實(shí)訓(xùn)6—開發(fā)神影視頻網(wǎng)站 380
18.1　網(wǎng)站概述380
18.2　設(shè)計(jì)主頁面 382
18.2.1 設(shè)計(jì)頭部內(nèi)容382
18.2.2 設(shè)計(jì)輪播384
18.2.3 設(shè)計(jì)分類列表384
18.2.4 設(shè)計(jì)“視頻內(nèi)容”頁面386
18.2.5 設(shè)計(jì)腳注391