Bootstrap前端開發(fā)（全案例微課版）

第1章 快速進(jìn)入Bootstrap世界     001
1.1 認(rèn)識(shí) Bootstrap    002
1.1.1 Bootstrap 的由來    002
1.1.2 Bootstrap 的構(gòu)成模塊    003
1.2 Bootstrap 的優(yōu)勢(shì)      004
1.3 下載 Bootstrap    005
1.4 安裝 Bootstrap    006
1.4.1 本地安裝    006
1.4.2 在線安裝    007
1.5 Bootstrap 的在線開發(fā)工具  007
1.6 小試身手—設(shè)計(jì)輪播圖效果   008
1.7 新手常見疑難問題     009
1.8 實(shí)戰(zhàn)技能訓(xùn)練營   010
第2章 響應(yīng)式網(wǎng)頁設(shè)計(jì)     011
2.1 什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)   012
2.2 像素和屏幕分辨率     013
2.3 視口     013
2.3.1 視口的分類和常用屬性   013
2.3.2 媒體查詢    014
2.4 響應(yīng)式網(wǎng)頁的布局設(shè)計(jì)   015
2.4.1 常用布局類型     015
2.4.2 布局的實(shí)現(xiàn)方式    015
2.4.3 響應(yīng)式布局的設(shè)計(jì)與實(shí)現(xiàn)    016
2.5 響應(yīng)式圖片   016
2.5.1 使用 標(biāo)簽   016
2.5.2 使用 CSS 圖片     017
2.6 響應(yīng)式視頻   018
2.7 響應(yīng)式導(dǎo)航菜單   019
2.8 響應(yīng)式表格   020
2.8.1 隱藏表格中的列    020
2.8.2 滾動(dòng)表格中的列    022
2.8.3 轉(zhuǎn)換表格中的列    023
2.9 新手常見疑難問題     025
2.10 實(shí)戰(zhàn)技能訓(xùn)練營      025
第3章 深入掌握Bootstrap 基本架構(gòu)     027
3.1 認(rèn)識(shí) Bootstrap 結(jié)構(gòu)    028
3.1.1 源碼版 Bootstrap文件結(jié)構(gòu)    028
3.1.2 編譯版 Bootstrap 文件結(jié)構(gòu)    029
3.2 布局基礎(chǔ)  029
3.2.1 布局容器    029
3.2.2 響應(yīng)斷點(diǎn)    031
3.2.3 z-index     031
3.3 網(wǎng)格系統(tǒng)  031
3.3.1 網(wǎng)格選項(xiàng)    031
3.3.2 自動(dòng)布局列      032
3.3.3 響應(yīng)類     035
3.3.4 重排序     037
3.3.5 列嵌套     040
3.4 布局工具類   041
3.4.1 display 塊屬性定義   041
3.4.2 Flexbox 選項(xiàng)      041
3.4.3 外邊距和內(nèi)邊距    041
3.4.4 切換顯示和隱藏    041
3.5 設(shè)計(jì) QQ 登錄界面     041
3.6 開發(fā)電商網(wǎng)站特效     044
3.7 新手常見疑難問題     046
3.8 實(shí)戰(zhàn)技能訓(xùn)練營   046
第4 章 精通頁面排版     048
4.1 頁面排版的初始化     049
4.2 優(yōu)化頁面排版    050
4.2.1 標(biāo)題   050
4.2.2 段落   053
4.2.3 強(qiáng)調(diào)   054
4.2.4 縮略語     055
4.2.5 引用   055
4.3 顯示代碼  056
4.3.1 行內(nèi)代碼    056
4.3.2 多行代碼塊      057
4.4 響應(yīng)式圖片   057
4.4.1 圖像的同步縮放    057
4.4.2 圖像縮略圖      058
4.4.3 圖像對(duì)齊方式     058
4.5 優(yōu)化表格的樣式   059
4.5.1 表格默認(rèn)風(fēng)格     059
4.5.2 為表格設(shè)計(jì)個(gè)性化風(fēng)格   060
4.6 設(shè)計(jì)商品管理系統(tǒng)頁面   063
4.7 新手常見疑難問題     065
4.8 實(shí)戰(zhàn)技能訓(xùn)練營   065
第5 章 響應(yīng)式新布局—彈性盒子     066
5.1 定義彈性盒子    067
5.2 排列方向  068
5.2.1 水平方向排列     068
5.2.2 垂直方向排列     069
5.3 內(nèi)容排列布局    069
5.4 項(xiàng)目對(duì)齊布局    070
5.5 自動(dòng)對(duì)齊布局    071
5.6 自動(dòng)相等布局    072
5.7 等寬變換布局    073
5.8 自動(dòng)浮動(dòng)布局    074
5.8.1 水平方向浮動(dòng)布局   074
5.8.2 垂直方向浮動(dòng)布局   074
5.9 彈性布局—包裹     075
5.10 排列順序布局    076
5.11 對(duì)齊內(nèi)容布局    077
5.12 新手常見疑難問題    078
5.13 實(shí)戰(zhàn)技能訓(xùn)練營      078
第6 章 核心框架—CSS 通用樣式    079
6.1 文本處理  080
6.1.1 文本對(duì)齊    080
6.1.2 文本換行    081
6.1.3 轉(zhuǎn)換大小寫      082
6.1.4 粗細(xì)和斜體      083
6.1.5 其他文本樣式類    083
6.2 顏色樣式  084
6.2.1 文本顏色    084
6.2.2 鏈接顏色    085
6.2.3 背景顏色    086
6.3 邊框樣式  087
6.3.1 添加邊框    087
6.3.2 邊框顏色    088
6.3.3 圓角邊框    089
6.4 寬度和高度   090
6.4.1 相對(duì)于父元素     090
6.4.2 相對(duì)于視口      092
6.5 邊距     093
6.5.1 邊距的定義      093
6.5.2 響應(yīng)式邊距      094
6.6 浮動(dòng)樣式   094
6.6.1 實(shí)現(xiàn)浮動(dòng)樣式     094
6.6.2 響應(yīng)式浮動(dòng)樣式    095
6.7 display 屬性   096
6.7.1 隱藏或顯示元素    096
6.7.2 響應(yīng)式地隱藏或顯示元素    097
6.8 嵌入網(wǎng)頁元素    098
6.9 內(nèi)容溢出   099
6.10 定位網(wǎng)頁元素    099
6.11 陰影效果    101
6.12 新手常見疑難問題    101
6.13 實(shí)戰(zhàn)技能訓(xùn)練營      102
第7 章 認(rèn)識(shí)CSS 組件     103
7.1 正確使用CSS 組件    104
7.2 按鈕     105
7.2.1 定義按鈕    105
7.2.2 設(shè)計(jì)按鈕風(fēng)格     106
7.3 按鈕組    108
7.3.1 定義按鈕組      109
7.3.2 定義按鈕組工具欄   109
7.3.3 設(shè)計(jì)按鈕組布局和樣式   110
7.4 下拉菜單  112
7.4.1 定義下拉菜單     112
7.4.2 設(shè)計(jì)下拉按鈕的樣式    114
7.4.3 設(shè)計(jì)下拉菜單的樣式    115
7.5 導(dǎo)航組件   118
7.5.1 定義導(dǎo)航    118
7.5.2 設(shè)計(jì)導(dǎo)航的布局    119
7.5.3 設(shè)計(jì)導(dǎo)航的風(fēng)格    121
7.5.4 設(shè)計(jì)導(dǎo)航選項(xiàng)卡    124
7.6 超大屏幕   126
7.6.1 定義超大屏幕     126
7.6.2 設(shè)計(jì)風(fēng)格    126
7.7 新手常見疑難問題     127
7.8 實(shí)戰(zhàn)技能訓(xùn)練營   127
第8 章 精通CSS 組件     129
8.1 徽章     130
8.1.1 定義徽章    130
8.1.2 設(shè)置顏色    131
8.1.3 橢圓形徽章      132
8.1.4 鏈接徽章    132
8.2 警告框    133
8.2.1 定義警告框      133
8.2.2 添加鏈接顏色     134
8.2.3 額外附加內(nèi)容     135
8.2.4 關(guān)閉警告框      135
8.3 媒體對(duì)象  136
8.3.1 媒體版式    136
8.3.2 媒體嵌套    137
8.3.3 對(duì)齊方式    137
8.3.4 排列順序    138
8.3.5 媒體列表    139
8.4 進(jìn)度條    140
8.4.1 定義進(jìn)度條      140
8.4.2 設(shè)計(jì)進(jìn)度條樣式    140
8.4.3 設(shè)計(jì)進(jìn)度條風(fēng)格    142
8.5 導(dǎo)航欄    143
8.5.1 定義導(dǎo)航欄      144
8.5.2 定位導(dǎo)航欄      147
8.5.3 設(shè)計(jì)導(dǎo)航欄的顏色   148
8.6 新手常見疑難問題     149
8.7 實(shí)戰(zhàn)技能訓(xùn)練營   150
第9 章 高級(jí)的CSS 組件    151
9.1 表單     152
9.1.1 定義表單控件     152
9.1.2 設(shè)計(jì)單選按鈕/ 復(fù)選框布局和樣式    154
9.1.3 表單布局風(fēng)格     156
9.1.4 幫助文本    158
9.1.5 禁用表單    159
9.2 列表組    160
9.2.1 定義列表組      160
9.2.2 設(shè)計(jì)列表組的風(fēng)格樣式   160
9.2.3 定制內(nèi)容    162
9.3 面包屑    163
9.3.1 定義面包屑      163
9.3.2 設(shè)計(jì)分隔符      164
9.4 分頁效果   165
9.4.1 定義分頁    165
9.4.2 使用圖標(biāo)    166
9.4.3 設(shè)計(jì)分頁風(fēng)格     166
9.5 新手常見疑難問題     169
9.6 實(shí)戰(zhàn)技能訓(xùn)練營   170
第10 章 玩轉(zhuǎn)卡片和旋轉(zhuǎn)器     171
10.1 卡片內(nèi)容   172
10.1.1 卡片的標(biāo)題、主體、文本和超鏈接   172
10.1.2 卡片中的圖片     172
10.1.3 卡片的列表組     173
10.1.4 卡片的頁眉和頁腳   173
10.2 控制卡片的寬度      174
10.2.1 使用網(wǎng)格系統(tǒng)控制卡片的寬度     174
10.2.2 使用寬度類控制卡片的寬度   175
10.2.3 使用CSS 樣式控制卡片的寬度     175
10.3 卡片中文本的對(duì)齊方式  176
10.4 卡片中添加導(dǎo)航      176
10.5 設(shè)計(jì)卡片的風(fēng)格      178
10.5.1 設(shè)置卡片的背景顏色    178
10.5.2 設(shè)置背景圖像     178
10.5.3 設(shè)置卡片的邊框顏色    179
10.5.4 設(shè)計(jì)卡片的樣式    180
10.6 卡片排版   180
10.7 旋轉(zhuǎn)器   183
10.7.1 定義旋轉(zhuǎn)器      183
10.7.2 設(shè)計(jì)旋轉(zhuǎn)器風(fēng)格    183
10.7.3 設(shè)置旋轉(zhuǎn)器的對(duì)齊方式     185
10.7.4 按鈕旋轉(zhuǎn)器      186
10.8 新手常見疑難問題    187
10.9 實(shí)戰(zhàn)技能訓(xùn)練營      188
第11 章 認(rèn)識(shí)JavaScript 插件    189
11.1 插件概述    190
11.1.1 插件分類    190
11.1.2 安裝插件    190
11.1.3 調(diào)用插件    191
11.1.4 事件      192
11.2 模態(tài)框   192
11.2.1 定義模態(tài)框      192
11.2.2 模態(tài)框布局和樣式   194
11.2.3 調(diào)用模態(tài)框      197
11.2.4 添加用戶行為     198
11.3 下拉菜單    199
11.3.1 調(diào)用下拉菜單     200
11.3.2 設(shè)置下拉菜單     201
11.3.3 添加用戶行為     202
11.4 彈窗     203
11.4.1 定義彈窗    203
11.4.2 彈窗方向    204
11.4.3 調(diào)用彈窗    205
11.4.4 添加用戶行為     207
11.5 工具提示    208
11.5.1 定義工具提示     209
11.5.2 工具提示方向     210
11.5.3 調(diào)用工具提示     210
11.5.4 添加用戶行為     212
11.6 標(biāo)簽頁   213
11.6.1 定義標(biāo)簽頁      214
11.6.2 調(diào)用標(biāo)簽頁      214
11.6.3 添加用戶行為     215
11.7 新手常見疑難問題    217
11.8 實(shí)戰(zhàn)技能訓(xùn)練營      217
第12 章 精通JavaScript 插件    218
12.1 按鈕     219
12.2 警告框   221
12.2.1 關(guān)閉警告框      222
12.2.2 添加用戶行為     223
12.3 折疊     224
12.3.1 定義折疊    224
12.3.2 控制多目標(biāo)      225
12.3.3 設(shè)計(jì)手風(fēng)琴      226
12.3.4 調(diào)用折疊    227
12.3.5 添加用戶行為     227
12.4 輪播     228
12.4.1 定義輪播    228
12.4.2 設(shè)計(jì)輪播風(fēng)格     230
12.4.3 調(diào)用輪播    231
12.4.4 添加用戶行為     233
12.5 滾動(dòng)監(jiān)聽   234
12.5.1 定義滾動(dòng)監(jiān)聽     234
12.5.2 調(diào)用滾動(dòng)監(jiān)聽     238
12.5.3 添加用戶行為     239
12.6 新手常見疑難問題    240
12.7 實(shí)戰(zhàn)技能訓(xùn)練營      240
第13 章 項(xiàng)目實(shí)訓(xùn)1—開發(fā)企業(yè)門戶網(wǎng)站    241
13.1 系統(tǒng)分析   242
13.2 系統(tǒng)設(shè)計(jì)   242
13.2.1 系統(tǒng)目標(biāo)    242
13.2.2 系統(tǒng)功能結(jié)構(gòu)     242
13.2.3 文件夾組織結(jié)構(gòu)    242
13.3 網(wǎng)頁預(yù)覽   243
13.3.1 網(wǎng)站首頁效果     243
13.3.2 產(chǎn)品分類效果     243
13.3.3 產(chǎn)品介紹效果     244
13.3.4 新聞分類效果     244
13.3.5 詳細(xì)新聞頁面     244
13.4 項(xiàng)目代碼實(shí)現(xiàn)    244
13.4.1 網(wǎng)站首頁頁面代碼   244
13.4.2 圖片動(dòng)態(tài)效果代碼   248
13.4.3 公司簡介頁面代碼   248
13.4.4 產(chǎn)品介紹頁面代碼   249
13.4.5 新聞中心頁面代碼   251
13.4.6 聯(lián)系我們頁面代碼   252
13.5 項(xiàng)目總結(jié)   253
第14 章 項(xiàng)目實(shí)訓(xùn)2—開發(fā)游戲中心網(wǎng)站    254
14.1 網(wǎng)站概述   255
14.1.1 網(wǎng)站文件的結(jié)構(gòu)    255
14.1.2 排版架構(gòu)    255
14.1.3 設(shè)計(jì)準(zhǔn)備    255
14.2 項(xiàng)目代碼實(shí)現(xiàn)    256
14.2.1 設(shè)計(jì)游戲中心網(wǎng)站的首頁    256
14.2.2 設(shè)計(jì)游戲列表頁面   262
14.2.3 設(shè)計(jì)游戲評(píng)論頁面   263
14.2.4 設(shè)計(jì)游戲新聞頁面   264
14.2.5 設(shè)計(jì)游戲博客頁面   264
14.2.6 設(shè)計(jì)聯(lián)系我們頁面   266
第15 章 項(xiàng)目實(shí)訓(xùn)3—開發(fā)連鎖咖啡網(wǎng)站    267
15.1 網(wǎng)站概述   268
15.1.1 網(wǎng)站結(jié)構(gòu)    268
15.1.2 設(shè)計(jì)效果    268
15.1.3 設(shè)計(jì)準(zhǔn)備    269
15.2 設(shè)計(jì)首頁布局    269
15.3 設(shè)計(jì)可切換導(dǎo)航      270
15.4 主體內(nèi)容   273
15.4.1 設(shè)計(jì)輪播廣告區(qū)    273
15.4.2 設(shè)計(jì)產(chǎn)品推薦區(qū)    274
15.4.3 設(shè)計(jì)登錄注冊(cè)和Logo   275
15.4.4 設(shè)計(jì)特色展示區(qū)    275
15.4.5 設(shè)計(jì)產(chǎn)品生產(chǎn)流程區(qū)    276
15.5 設(shè)計(jì)底部隱藏導(dǎo)航    277
第16 章 項(xiàng)目實(shí)訓(xùn)4—開發(fā)網(wǎng)上商城式網(wǎng)站     279
16.1 系統(tǒng)分析   280
16.2 系統(tǒng)設(shè)計(jì)   280
16.2.1 系統(tǒng)目標(biāo)    280
16.2.2 系統(tǒng)功能結(jié)構(gòu)     280
16.2.3 文件夾組織結(jié)構(gòu)    280
16.3 網(wǎng)頁預(yù)覽   281
16.3.1 網(wǎng)站首頁效果     281
16.3.2 關(guān)于我們效果     281
16.3.3 商品展示效果     281
16.3.4 商品詳情效果     282
16.3.5 購物車效果      282
16.3.6 品牌故事效果     282
16.3.7 用戶登錄效果     282
16.3.8 用戶注冊(cè)效果     282
16.4 項(xiàng)目代碼實(shí)現(xiàn)    282
16.4.1 首頁頁面代碼     282
16.4.2 動(dòng)態(tài)效果代碼     293
16.4.3 購物車代碼      294
16.4.4 登錄頁面代碼     296
16.4.5 商品展示頁面代碼   296
16.4.6 聯(lián)系我們頁面代碼   301
16.5 項(xiàng)目總結(jié)   302
第17 章 項(xiàng)目實(shí)訓(xùn)5—開發(fā)房產(chǎn)企業(yè)網(wǎng)站    303
17.1 網(wǎng)站概述   304
17.1.1 網(wǎng)站結(jié)構(gòu)    304
17.1.2 設(shè)計(jì)效果    304
17.1.3 設(shè)計(jì)準(zhǔn)備    305
17.2 設(shè)計(jì)主頁   305
17.2.1 主頁布局    305
17.2.2 設(shè)計(jì)導(dǎo)航條      306
17.2.3 設(shè)計(jì)輪播廣告     308
17.2.4 設(shè)計(jì)功能區(qū)      309
17.2.5 設(shè)計(jì)特色展示     310
17.2.6 設(shè)計(jì)腳注    313
17.3 設(shè)計(jì)側(cè)邊導(dǎo)航欄      314
17.4 設(shè)計(jì)登錄頁     316