Bootstrap 是由 Twitter 在2011年8月推出的開源前端框架，如今已發(fā)展成為廣受歡迎的前端 UI框架�！禕ootstrap前端開發(fā)從新手到高手（微視頻版）》深入探討了 Bootstrap 的框架基礎(chǔ)、柵格系統(tǒng)、基礎(chǔ)樣式、組件等核心內(nèi)容，并進一步展示了如何利用 Bootstrap進行實際網(wǎng)站開發(fā)。本書共分8章，內(nèi)容涵蓋了Bootstrap快速入門、基礎(chǔ)樣式、組件庫、工具類、彈性布局、表格樣式、表單樣式以及定制與優(yōu)化等。在每章的最后還提供了緊貼實戰(zhàn)的綜合案例，力求為讀者帶來良好的學(xué)習(xí)體驗。
本書提供了與內(nèi)容同步的案例操作教學(xué)資源，讀者可掃描前言中的二維碼進行學(xué)習(xí)。本書具有很強的實用性和可操作性，可以作為初學(xué)者的自學(xué)用書，也可作為Web前端開發(fā)技術(shù)人員的首選參考書，還可作為高等院校Web前端開發(fā)、網(wǎng)站設(shè)計等相關(guān)專業(yè)的教材。
本書對應(yīng)的電子課件、完整代碼文檔和實例源文件可以到http://www.tupwk.com.cn/downpage網(wǎng)站下載，也可以通過掃描前言中的二維碼獲取。讀者還可以掃描前言中的視頻二維碼直接觀看教學(xué)視頻。
Bootstrap是目前最受歡迎的前端框架之一。它建立在HTML、CSS和JavaScript之上，以其簡潔和靈活的特點，大大簡化了Web前端開發(fā)的難度，使得開發(fā)人員可以更加高效地創(chuàng)建響應(yīng)式、現(xiàn)代化的網(wǎng)站和應(yīng)用程序。這種便利性和強大的功能使得Bootstrap成為全球無數(shù)開發(fā)者的首選工具，深受初學(xué)者和資深開發(fā)人員的喜愛。
然而，盡管Bootstrap功能強大，但對于初學(xué)者來說，熟練掌握這一框架可能并不容易。許多初學(xué)者在學(xué)習(xí)時可能會遇到諸如如何使用其多樣化的組件、理解其復(fù)雜的柵格系統(tǒng)，以及自定義主題等難題。
《Bootstrap前端開發(fā)從新手到高手（微視頻版）》正是基于這些難題編寫的，旨在幫助讀者全面掌握Bootstrap技術(shù)。書中的內(nèi)容由淺入深，以通俗易懂的語言和豐富的實例，詳細闡述了Bootstrap各個方面的內(nèi)容。無論是基礎(chǔ)的組件使用、復(fù)雜的頁面布局，還是高級的主題定制與開發(fā)，本書都提供了深入的講解和示例。此外，書中的結(jié)構(gòu)設(shè)計合理，從基本概念到高級應(yīng)用，每一步都為讀者鋪設(shè)了通往精通Bootstrap 之路的堅實臺階。
一、本書內(nèi)容特點
(1) 零基礎(chǔ)、入門級講解。無論讀者是否從事相關(guān)行業(yè)，或是否接觸過 Bootstrap 網(wǎng)頁設(shè)計，都能從本書中找到合適的起點。
(2) 實用、專業(yè)的范例和項目。從Bootstrap的基本操作入手，逐步引導(dǎo)讀者學(xué)習(xí)各類應(yīng)用技術(shù)，側(cè)重實戰(zhàn)技能。書中提供簡明易懂的案例分析和操作指導(dǎo)，讓學(xué)習(xí)過程更
輕松。
(3) 細致入微、貼心提示。各章節(jié)中設(shè)置了各類代碼解釋，幫助讀者更清楚地理解相關(guān)操作與概念，輕松掌握各種技巧。
(4) 贈送學(xué)習(xí)資源。提供詳細的素材，包括實例源代碼、教學(xué)課件等，幫助讀者學(xué)習(xí)和鞏固相關(guān)內(nèi)容。
二、本書內(nèi)容簡介
《Bootstrap前端開發(fā)從新手到高手（微視頻版）》深入探討了Bootstrap的框架基礎(chǔ)、柵格系統(tǒng)、基礎(chǔ)樣式、組件等核心內(nèi)容，并進一步展示了如何利用Bootstrap進行實際網(wǎng)站開發(fā)。
本書共分8章，內(nèi)容涵蓋了Bootstrap快速入門、基礎(chǔ)樣式、組件庫、工具類、彈性布局、表格樣式、表單樣式以及定制與優(yōu)化等，各章內(nèi)容簡介如下。
章節(jié) 內(nèi)容說明
第1章 主要介紹Bootstrap的基礎(chǔ)知識，包括Bootstrap的由來、發(fā)展歷程、瀏覽器支持、下載和安裝Bootstrap的方法，以及布局容器、柵格系統(tǒng)
第2章 主要介紹Bootstrap定義的大量通用樣式類，包括邊距、邊框、顏色、對齊方式、陰影、浮動、顯示與隱藏等
第3章 主要介紹從導(dǎo)航條、按鈕到模態(tài)窗口、卡片和進度條等各種常見的組件集合
第4章 主要介紹布局、排版、顏色、邊框等常見工具類
第5章 主要介紹實現(xiàn)Bootstrap彈性布局的一系列工具類
第6章 主要介紹Bootstrap 提供的各種表格樣式
第7章 主要介紹Bootstrap的表單樣式，以及利用如 .form-control、.form-group、.form-label和.form-check 等類，實現(xiàn)高質(zhì)量表單設(shè)計的方法
第8章 主要介紹使用Sass編寫CSS代碼的相關(guān)知識與具體操作
三、本書配套資源及服務(wù)
本書提供了與內(nèi)容同步的案例操作教學(xué)資源，讀者可隨時掃碼學(xué)習(xí)。此外，本書免費提供電子課件、完整代碼文檔和實例源文件，讀者可以掃描下方的二維碼獲取，也可以進入本書信息支持網(wǎng)站(http://www.tupwk.com.cn/downpage)下載。
本書分為8章，其中陳奮編寫了第3、6、7、8章，張曉蘭編寫了第1、2、4、5章。由于作者水平有限，本書難免有不足之處，歡迎廣大讀者批評指正。我們的郵箱是992116@qq.com，電話是010-62796045。
編者
2024年11月
第 1 章快速入門 1
1.1Bootstrap概述 2
1.1.1Bootstrap的由來 2
1.1.2Bootstrap的發(fā)展歷程 2
1.1.3Bootstrap瀏覽器支持 3
1.1.4選擇Bootstrap的原因 4
1.2下載Bootstrap 5
1.2.1下載源碼版Bootstrap 7
1.2.2下載編譯版Bootstrap 8
1.3引入Bootstrap 9
1.4布局容器 15
1.5柵格系統(tǒng) 17
1.5.1基礎(chǔ)知識 17
1.5.2自動布局列 21
1.5.3響應(yīng)式布局類 25
1.5.4嵌套布局 28
1.5.5列布局 29
1.6實戰(zhàn)案例企業(yè)網(wǎng)站首頁 32
1.6.1案例概述 32
1.6.2設(shè)計頁面導(dǎo)航區(qū) 33
1.6.3設(shè)計頁面展示區(qū) 34
1.6.4添加搜索欄 34
1.6.5設(shè)計主體內(nèi)容區(qū) 35
1.6.6設(shè)計兩欄圖文區(qū) 38
1.6.7添加footer區(qū) 39
1.6.8設(shè)計頁面樣式 40
1.7思考與練習(xí) 44
第 2 章基礎(chǔ)樣式 45
2.1頁面排版 46
2.2標題 47
2.2.1Bootstrap標準標題 47
2.2.2內(nèi)聯(lián)子標題 49
2.2.3標題輔助文本 49
2.3正文 49
2.3.1段落樣式 50
2.3.2內(nèi)聯(lián)文本 51
2.4文本塊 52
2.4.1縮略語 52
2.4.2引用 53
2.4.3列表 54
2.4.4代碼 57
2.5圖片 58
2.5.1響應(yīng)式圖片 58
2.5.2圖片邊框 59
2.5.3圖片形狀 60
2.6輪廓 61
2.7實戰(zhàn)案例在線簡歷模板 62
2.7.1案例概述 62
2.7.2設(shè)計布局 64
2.7.3制作信息欄 65
2.7.4制作導(dǎo)航條 67
2.7.5制作簡歷主頁 67
2.8思考與練習(xí) 73
第 3 章組件庫 75
3.1正確使用Bootstrap組件 76
3.2按鈕和按鈕組 79
3.2.1按鈕 79
3.2.2按鈕組 83
3.3標簽和徽章 85
3.3.1標簽 85
3.3.2徽章 86
3.4導(dǎo)航系統(tǒng) 87
3.4.1導(dǎo)航和導(dǎo)航條 87
3.4.2下拉菜單 94
3.4.3列表組 98
3.4.4分頁 100
3.5進度條 101
3.6卡片和旋轉(zhuǎn)器 102
3.6.1卡片 103
3.6.2旋轉(zhuǎn)器 107
3.7模態(tài)窗口 111
3.8提示組件 113
3.8.1工具提示框 113
3.8.2彈出提示框 114
3.8.3警告框 116
3.9折疊組件和手風(fēng)琴組件 117
3.9.1折疊組件 117
3.9.2手風(fēng)琴組件 119
3.10輪播組件 121
3.11滾動監(jiān)聽組件 124
3.11.1監(jiān)聽導(dǎo)航 124
3.11.2監(jiān)聽導(dǎo)航條 125
3.12實戰(zhàn)案例網(wǎng)站后臺管理頁面 128
3.12.1案例概述 128
3.12.2設(shè)計頁面布局 129
3.12.3設(shè)計導(dǎo)航欄 130
3.12.4設(shè)計左側(cè)邊欄 134
3.12.5設(shè)計主功能區(qū) 135
3.12.6設(shè)計版權(quán)區(qū)域 138
3.13思考與練習(xí) 139
第 4 章工具類 141
4.1認識工具類 142
4.1.1工具類的概念 142
4.1.2工具類的命名 143
4.1.3工具類的種類 145
4.2文本工具類 146
4.2.1文本對齊和換行 146
4.2.2文本字號和轉(zhuǎn)換 149
4.2.3字體粗細和斜體 150
4.2.4控制行高 151
4.2.5文字修飾 152
4.3顏色工具類 153
4.3.1文本顏色和背景顏色 153
4.3.2鏈接顏色 154
4.4邊框工具類 156
4.4.1添加與刪除邊框 156
4.4.2圓角邊框 157
4.5邊距工具類 159
4.5.1外邊距和內(nèi)邊距 159
4.5.2響應(yīng)式邊距 160
4.6寬度和高度工具類 161
4.7顯示和浮動工具類 163
4.7.1顯示工具類 163
4.7.2浮動工具類 166
4.8其他工具類 167
4.8.1位置工具類 167
4.8.2陰影工具類 167
4.9案例演練旅行社旅游平臺網(wǎng)頁 168
4.9.1案例概述 168
4.9.2設(shè)計網(wǎng)頁頭部 169
4.9.3設(shè)計輪播 172
4.9.4設(shè)計分類列表 173
4.9.5設(shè)計旅游景點頁面 176
4.9.6設(shè)計頁腳部分 182
4.10思考與練習(xí) 184
第 5 章彈性布局 185
5.1定義彈性布局 186
5.2彈性布局容器樣式 187
5.2.1項目對齊工具類 188
5.2.2排列方向工具類 191
5.2.3項目換行工具類 193
5.3彈性布局項目樣式 194
5.3.1項目排序工具類 194
5.3.2項目伸縮工具類 195
5.3.3自身對齊工具類 199
5.3.4自動浮動工具類 200
5.4實戰(zhàn)案例燒烤餐廳網(wǎng)頁 201
5.4.1案例概述 201
5.4.2設(shè)計網(wǎng)頁頭部導(dǎo)航欄 202
5.4.3添加輪播廣告區(qū) 204
5.4.4設(shè)計網(wǎng)頁主要內(nèi)容 205
5.4.5添加頁腳信息 208
5.5思考與練習(xí) 210
第 6 章表格樣式 211
6.1Bootstrap基本表格 212
6.2Bootstrap表格類 214
6.3面板中的表格 215
6.4響應(yīng)式表格 217
6.5實戰(zhàn)案例在線教育平臺網(wǎng)頁 220
6.5.1案例概述 220
6.5.2設(shè)計網(wǎng)頁頭部 223
6.5.3設(shè)計課程和大綱模塊 228
6.5.4設(shè)計學(xué)習(xí)路徑模塊 233
6.5.5設(shè)計教學(xué)團隊模塊 235
6.5.6設(shè)計問答模塊 238
6.5.7設(shè)計頁腳部分 241
6.6思考與練習(xí) 242
第 7 章表單樣式 243
7.1表單布局 244
7.1.1水平表單 245
7.1.2內(nèi)聯(lián)表單 247
7.1.3復(fù)雜表單 249
7.2表單控件 251
7.2.1輸入框 251
7.2.2單選按鈕和復(fù)選框 254
7.2.3下拉列表 257
7.2.4滑動條 258
7.2.5輸入框組 259
7.3表單校驗 260
7.4實戰(zhàn)演練酒店入住訂購網(wǎng)頁 263
7.4.1案例概述 263
7.4.2設(shè)計主頁 264
7.4.3設(shè)計側(cè)邊欄 277
7.4.4添加登錄模塊 280
7.5思考與練習(xí) 281
第 8 章定制與優(yōu)化 283
8.1CSS預(yù)處理程序 284
8.1.1CSS預(yù)處理程序的概念 284
8.1.2引入CSS預(yù)處理程序的原因 284
8.2安裝Ruby和Sass 286
8.2.1安裝Ruby 286
8.2.2安裝Sass 287
8.3Sass的基本應(yīng)用 288
8.3.1使用變量 288
8.3.2計算功能 290
8.3.3選擇器嵌套 290
8.3.4添加注釋 292
8.3.5代碼重用 293
8.3.6控制語句 297
8.4思考與練習(xí) 300
書單推薦
