內(nèi)容簡介

《Bootstrap從入門到項目實戰(zhàn)》從零基礎(chǔ)開始講解，用實例引導(dǎo)讀者深入學(xué)習(xí)，深入淺出地講解了Bootstrap 4網(wǎng)頁設(shè)計的各項技術(shù)及實戰(zhàn)技能。
本書共18章，主要內(nèi)容包括：開發(fā)框架Bootstrap 4簡介、使用新的架Bootstrap 4、快速掌握Bootstrap 4布局、Bootstrap 4的新布局—彈性盒子、核心工具庫—CSS通用樣式類、Bootstrap 4的新版式、認識CSS組件、深入掌握CSS組件、高級的CSS組件、Bootstrap 4的新增組件—旋轉(zhuǎn)器和卡片、快速認識JavaScript插件、深入精通JavaScript插件等。之后講解了6個行業(yè)熱點項目實訓(xùn)，包括招聘網(wǎng)中的簡歷模板、仿星巴克網(wǎng)站、相冊類博客項目、設(shè)計流行企業(yè)網(wǎng)站、Web設(shè)計與定制網(wǎng)站、開發(fā)神影視頻網(wǎng)站。
《Bootstrap從入門到項目實戰(zhàn)》適合任何想學(xué)習(xí)Bootstrap網(wǎng)頁設(shè)計的讀者，無論您是否從事相關(guān)行業(yè)，是否接觸過Bootstrap網(wǎng)頁設(shè)計，通過學(xué)習(xí)本書內(nèi)容均可快速掌握Bootstrap網(wǎng)頁設(shè)計和開發(fā)動態(tài)網(wǎng)站的方法和技巧。

前言
為什么要寫這樣一本書
Bootstrap 是目前最受歡迎的前端框架之一。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，能夠在很大程度上降低Web 前端開發(fā)的難度，因此深受廣大Web 前端開發(fā)人員的喜愛。Bootstrap 框架功能雖然強大，但是對于初學(xué)者來說入門比較困難，市場上的圖書則以翻譯為主，缺少一本真正適合初學(xué)者入門的書。本書以能讓讀者掌握Bootstrap 框架技術(shù)作為編寫本書的思路，知識點從易到難，講解詳細且透徹，結(jié)構(gòu)合理，對于讀者快速掌握Bootstrap 前端框架有很大的幫助。
本書特色
零基礎(chǔ)、入門級的講解
無論您是否從事相關(guān)行業(yè)，無論您是否接觸過Bootstrap 網(wǎng)頁設(shè)計，都能從本書中找到最佳起點。
實用、專業(yè)的范例和項目
本書從Bootstrap 基本操作開始，逐步帶領(lǐng)讀者學(xué)習(xí)Bootstrap 的各種應(yīng)用技術(shù)，側(cè)重實戰(zhàn)技能，使用簡單易懂的實際案例進行分析和操作指導(dǎo)，讓讀者學(xué)起來簡明輕松，操作起來有章可循。
細致入微、貼心提示
本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小欄目，使讀者在學(xué)習(xí)過程中能更清楚地了解相關(guān)操作、理解相關(guān)概念，并輕松掌握各種操作技巧。
超值資源大放送
全程同步教學(xué)錄像
涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術(shù)關(guān)鍵點。比看書更能輕松
地掌握書中所有的網(wǎng)頁制作和設(shè)計知識，而且擴展的講解部分使您得到比書中更多的收獲。
超多容量王牌資源
贈送大量王牌資源，包括實例源代碼、教學(xué)幻燈片、本書精品教學(xué)視頻、88 個實用類網(wǎng)頁模板、12 部網(wǎng)頁開發(fā)必備參考手冊、HTML 5 標(biāo)簽速查手冊、精選的JavaScript 實例、CSS 3 屬性速查表、JavaScript 函數(shù)速查手冊、CSS+DIV 布局賞析案例、精彩網(wǎng)站配色方案賞析、網(wǎng)頁樣式與布局案例賞析、Web 前端工程師常見面試題等。
讀者對象
沒有任何Bootstrap網(wǎng)頁開發(fā)基礎(chǔ)的初學(xué)者。
有一定的Bootstrap網(wǎng)頁開發(fā)基礎(chǔ)，想精通前端框架開發(fā)的人員。
有一定的網(wǎng)頁前端設(shè)計基礎(chǔ)，沒有項目經(jīng)驗的人員。
大專院校及培訓(xùn)學(xué)校的老師和學(xué)生。
創(chuàng)作團隊
本書由李愛玲編著，參加編寫的人員還有劉春茂、李艷恩和李佳康。在編寫過程中，我們雖竭盡所能將最好的講解呈現(xiàn)給了讀者，但難免有疏漏和不妥之處，敬請讀者不吝指正。
若您在學(xué)習(xí)中遇到困難或疑問，或有任何建議，可寫信發(fā)送至郵箱。
編 者
 

目錄

第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