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的構成 005
1.2.2 Bootstrap的特色 007
1.3　Bootstrap應用瀏覽 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 的結構 014
2.2.1 源碼版Bootstrap文件結構 014
2.2.2 編譯版Bootstrap文件結構 015
2.3　安裝 Bootstrap 016
2.3.1 本地安裝016
2.3.2 在線安裝017
2.4　案例實訓1—設計網(wǎng)頁按鈕 017
2.5　案例實訓2—設計網(wǎng)頁輪播組件 018
第3章　快速掌握Bootstrap 4布局  021
3.1　布局基礎021
3.1.1 布局容器021
3.1.2 響應斷點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 響應類028
3.2.4 重排序031
3.2.5 列嵌套034
3.3　布局工具類 035
3.4　案例實訓1—仿QQ登錄界面 036
3.5　案例實訓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 響應式邊距078
5.6　浮動 079
5.6.1 實現(xiàn)浮動079
5.6.2 響應式浮動080
5.7　display 屬性類 081
5.7.1 實現(xiàn)display 屬性 081
5.7.2 響應式的隱藏或顯示元素082
5.8　嵌入 083
5.9　內(nèi)容溢出084
5.10　定位 085
5.11　陰影 086
5.12　關閉圖標087
第6 章　Bootstrap 4 的新版式   088
6.1　初始化與CSS 重置 088
6.2　排版 090
6.2.1 標題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 表格默認風格103
6.5.2 設計個性化風格104
6.6　案例實訓— 設計后臺人員管理頁面 108
第7 章　認識CSS 組件   111
7.1　正確使用CSS 組件 111
7.2　按鈕 114
7.2.1 定義按鈕114
7.2.2 設計按鈕風格114
7.3　按鈕組 117
7.3.1 定義按鈕組117
7.3.2 定義按鈕組工具欄118
7.3.3 設計按鈕組布局和樣式119
7.4　下拉菜單121
7.4.1 定義下拉菜單121
7.4.2 設計下拉按鈕的樣式123
7.4.3 設計下拉菜單的樣式124
7.5　導航 128
7.5.1 定義導航128
7.5.2 設計導航的布局129
7.5.3 設計導航的風格131
7.5.4 設計導航選項卡135
7.6　超大屏幕137
7.6.1 定義超大屏幕137
7.6.2 設計風格138
7.7　案例實訓—設計廣告牌 139
第8 章　深入掌握CSS 組件   141
8.1　徽章 141
8.1.1 定義徽章141
8.1.2 設置顏色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 設計進度條樣式154
8.4.3 設計進度條風格156
8.5　導航欄 158
8.5.1 定義導航欄158
8.5.2 定位導航欄163
8.5.3 設計導航欄配色164
8.5.4 擴展導航欄內(nèi)容165
8.6　案例實訓—設計動態(tài)進度條 167
第9 章　高級的CSS 組件   169
9.1　表單 169
9.1.1 定義表單控件169
9.1.2 設計單選按鈕/ 復選框布局和樣式173
9.1.3 表單布局風格176
9.1.4 幫助文本180
9.1.5 禁用表單180
9.2　列表組 181
9.2.1 定義列表組181
9.2.2 設計列表組的風格樣式182
9.2.3 定制內(nèi)容185
9.3　面包屑 186
9.3.1 定義面包屑186
9.3.2 設計分隔符187
9.4　分頁 188
9.4.1 定義分頁188
9.4.2 使用圖標189
9.4.3 設計分頁風格190
第10 章　Bootstrap 4 的新增組件—旋轉(zhuǎn)器和卡片  194
10.1　旋轉(zhuǎn)器特效 194
10.1.1 定義旋轉(zhuǎn)器194
10.1.2 設計旋轉(zhuǎn)器風格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 添加導航206
10.2.6 圖像背景208
10.2.7 卡片風格208
10.2.8 卡片排版211
10.3　案例實訓1—仿云巴網(wǎng)站 215
10.4　案例實訓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 按鈕式復選框和單選框 227
11.3　警告框 230
11.3.1 關閉警告框 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　標簽頁 246
11.6.1 定義標簽頁 247
11.6.2 調(diào)用標簽頁 248
11.6.3 添加用戶行為 249
11.7　案例實訓1—仿淘寶搶紅包 251
11.8　案例實訓2—仿商品推薦區(qū) 252
第12 章　深入精通JavaScript 插件  257
12.1　折疊 257
12.1.1 定義折疊257
12.1.2 控制多目標258
12.1.3 設計手風琴效果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 設計輪播風格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)實訓1—設計折疊搜索框 291
12.7　實戰(zhàn)實訓2—仿小米內(nèi)容展示 293
第13 章　項目實訓1—招聘網(wǎng)中的簡歷模板  295
13.1　案例概述295
13.1.1 案例結構295
13.1.2 設計效果296
13.1.3 設計準備298
13.2　設計布局298
13.3　設計左側(cè)信息欄 299
13.4　設計導航條 300
13.5　設計主頁301
13.5.1 工作經(jīng)歷301
13.5.2 專業(yè)技能302
13.5.3 教育經(jīng)歷303
13.5.4 綜合概述304
13.6　設計聯(lián)系頁 306
13.7　設計相冊頁 306
第14 章　項目實訓2—仿星巴克網(wǎng)站  308
14.1　網(wǎng)站概述308
14.1.1 網(wǎng)站結構308
14.1.2 設計效果308
14.1.3 設計準備310
14.2　設計首頁布局 310
14.3　設計可切換導航 311
14.4　主體內(nèi)容317
14.4.1 設計輪播廣告區(qū)317
14.4.2 設計產(chǎn)品推薦區(qū)319
14.4.3 設計登錄注冊區(qū)和Logo 319
14.4.4 設計特色展示區(qū)320
14.4.5 設計產(chǎn)品生產(chǎn)流程區(qū)321
14.5　設計底部隱藏導航 324
第15 章　項目實訓3—相冊類博客項目  326
15.1　案例概述326
15.1.1 案例結構326
15.1.2 設計效果327
15.1.3 設計準備328
15.2　設計導航欄 329
15.3　首頁 330
15.3.1 設計相冊展示330
15.3.2 添加Swipebox 燈箱插件333
15.4　分類頁 337
15.4.1 設計相冊分類展示337
15.4.2 添加Swipebox 燈箱插件340
15.5　博客 341
15.6　聯(lián)系頁 343
15.6.1 設計布局343
15.6.2 添加工具提示345
第16 章　項目實訓4—設計流行企業(yè)網(wǎng)站 347
16.1　網(wǎng)站概述347
16.2　設計主頁349
16.3　設計側(cè)邊導航欄 360
16.4　設計登錄頁 362
第17 章　項目實訓5—Web 設計與定制網(wǎng)站  365
17.1　網(wǎng)站概述365
17.1.1 網(wǎng)站結構365
17.1.2 網(wǎng)站布局365
17.1.3 設計準備366
17.2　設計主頁面導航 366
17.3　設計主頁面內(nèi)容 369
17.3.1 設計首頁369
17.3.2 “關于我們”頁面設計370
17.3.3 “我們的團隊”頁面設計372
17.3.4 “我們的服務”頁面設計375
17.3.5 “我們的博客”頁面設計376
17.3.6 “我們的定制”頁面設計377
17.4　設計腳注379
第18 章　項目實訓6—開發(fā)神影視頻網(wǎng)站 380
18.1　網(wǎng)站概述380
18.2　設計主頁面 382
18.2.1 設計頭部內(nèi)容382
18.2.2 設計輪播384
18.2.3 設計分類列表384
18.2.4 設計“視頻內(nèi)容”頁面386
18.2.5 設計腳注391