Bootstrap 是由 Twitter 在2011年8月推出的開源前端框架，如今已發(fā)展成為廣受歡迎的前端 UI框架�！禕ootstrap前端開發(fā)從新手到高手（微視頻版）》深入探討了 Bootstrap 的框架基礎、柵格系統(tǒng)、基礎樣式、組件等核心內容，并進一步展示了如何利用 Bootstrap進行實際網站開發(fā)。本書共分8章，內容涵蓋了Bootstrap快速入門、基礎樣式、組件庫、工具類、彈性布局、表格樣式、表單樣式以及定制與優(yōu)化等。在每章的最后還提供了緊貼實戰(zhàn)的綜合案例，力求為讀者帶來良好的學習體驗。
本書提供了與內容同步的案例操作教學資源，讀者可掃描前言中的二維碼進行學習。本書具有很強的實用性和可操作性，可以作為初學者的自學用書，也可作為Web前端開發(fā)技術人員的首選參考書，還可作為高等院校Web前端開發(fā)、網站設計等相關專業(yè)的教材。
本書對應的電子課件、完整代碼文檔和實例源文件可以到http://www.tupwk.com.cn/downpage網站下載，也可以通過掃描前言中的二維碼獲取。讀者還可以掃描前言中的視頻二維碼直接觀看教學視頻。
Bootstrap是目前最受歡迎的前端框架之一。它建立在HTML、CSS和JavaScript之上，以其簡潔和靈活的特點，大大簡化了Web前端開發(fā)的難度，使得開發(fā)人員可以更加高效地創(chuàng)建響應式、現代化的網站和應用程序。這種便利性和強大的功能使得Bootstrap成為全球無數開發(fā)者的首選工具，深受初學者和資深開發(fā)人員的喜愛。
然而，盡管Bootstrap功能強大，但對于初學者來說，熟練掌握這一框架可能并不容易。許多初學者在學習時可能會遇到諸如如何使用其多樣化的組件、理解其復雜的柵格系統(tǒng)，以及自定義主題等難題。
《Bootstrap前端開發(fā)從新手到高手（微視頻版）》正是基于這些難題編寫的，旨在幫助讀者全面掌握Bootstrap技術。書中的內容由淺入深，以通俗易懂的語言和豐富的實例，詳細闡述了Bootstrap各個方面的內容。無論是基礎的組件使用、復雜的頁面布局，還是高級的主題定制與開發(fā)，本書都提供了深入的講解和示例。此外，書中的結構設計合理，從基本概念到高級應用，每一步都為讀者鋪設了通往精通Bootstrap 之路的堅實臺階。
一、本書內容特點
(1) 零基礎、入門級講解。無論讀者是否從事相關行業(yè)，或是否接觸過 Bootstrap 網頁設計，都能從本書中找到合適的起點。
(2) 實用、專業(yè)的范例和項目。從Bootstrap的基本操作入手，逐步引導讀者學習各類應用技術，側重實戰(zhàn)技能。書中提供簡明易懂的案例分析和操作指導，讓學習過程更
輕松。
(3) 細致入微、貼心提示。各章節(jié)中設置了各類代碼解釋，幫助讀者更清楚地理解相關操作與概念，輕松掌握各種技巧。
(4) 贈送學習資源。提供詳細的素材，包括實例源代碼、教學課件等，幫助讀者學習和鞏固相關內容。
二、本書內容簡介
《Bootstrap前端開發(fā)從新手到高手（微視頻版）》深入探討了Bootstrap的框架基礎、柵格系統(tǒng)、基礎樣式、組件等核心內容，并進一步展示了如何利用Bootstrap進行實際網站開發(fā)。
本書共分8章，內容涵蓋了Bootstrap快速入門、基礎樣式、組件庫、工具類、彈性布局、表格樣式、表單樣式以及定制與優(yōu)化等，各章內容簡介如下。
章節(jié) 內容說明
第1章 主要介紹Bootstrap的基礎知識，包括Bootstrap的由來、發(fā)展歷程、瀏覽器支持、下載和安裝Bootstrap的方法，以及布局容器、柵格系統(tǒng)
第2章 主要介紹Bootstrap定義的大量通用樣式類，包括邊距、邊框、顏色、對齊方式、陰影、浮動、顯示與隱藏等
第3章 主要介紹從導航條、按鈕到模態(tài)窗口、卡片和進度條等各種常見的組件集合
第4章 主要介紹布局、排版、顏色、邊框等常見工具類
第5章 主要介紹實現Bootstrap彈性布局的一系列工具類
第6章 主要介紹Bootstrap 提供的各種表格樣式
第7章 主要介紹Bootstrap的表單樣式，以及利用如 .form-control、.form-group、.form-label和.form-check 等類，實現高質量表單設計的方法
第8章 主要介紹使用Sass編寫CSS代碼的相關知識與具體操作
三、本書配套資源及服務
本書提供了與內容同步的案例操作教學資源，讀者可隨時掃碼學習。此外，本書免費提供電子課件、完整代碼文檔和實例源文件，讀者可以掃描下方的二維碼獲取，也可以進入本書信息支持網站(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基礎知識 17
1.5.2自動布局列 21
1.5.3響應式布局類 25
1.5.4嵌套布局 28
1.5.5列布局 29
1.6實戰(zhàn)案例企業(yè)網站首頁 32
1.6.1案例概述 32
1.6.2設計頁面導航區(qū) 33
1.6.3設計頁面展示區(qū) 34
1.6.4添加搜索欄 34
1.6.5設計主體內容區(qū) 35
1.6.6設計兩欄圖文區(qū) 38
1.6.7添加footer區(qū) 39
1.6.8設計頁面樣式 40
1.7思考與練習 44
第 2 章基礎樣式 45
2.1頁面排版 46
2.2標題 47
2.2.1Bootstrap標準標題 47
2.2.2內聯(lián)子標題 49
2.2.3標題輔助文本 49
2.3正文 49
2.3.1段落樣式 50
2.3.2內聯(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響應式圖片 58
2.5.2圖片邊框 59
2.5.3圖片形狀 60
2.6輪廓 61
2.7實戰(zhàn)案例在線簡歷模板 62
2.7.1案例概述 62
2.7.2設計布局 64
2.7.3制作信息欄 65
2.7.4制作導航條 67
2.7.5制作簡歷主頁 67
2.8思考與練習 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導航系統(tǒng) 87
3.4.1導航和導航條 87
3.4.2下拉菜單 94
3.4.3列表組 98
3.4.4分頁 100
3.5進度條 101
3.6卡片和旋轉器 102
3.6.1卡片 103
3.6.2旋轉器 107
3.7模態(tài)窗口 111
3.8提示組件 113
3.8.1工具提示框 113
3.8.2彈出提示框 114
3.8.3警告框 116
3.9折疊組件和手風琴組件 117
3.9.1折疊組件 117
3.9.2手風琴組件 119
3.10輪播組件 121
3.11滾動監(jiān)聽組件 124
3.11.1監(jiān)聽導航 124
3.11.2監(jiān)聽導航條 125
3.12實戰(zhàn)案例網站后臺管理頁面 128
3.12.1案例概述 128
3.12.2設計頁面布局 129
3.12.3設計導航欄 130
3.12.4設計左側邊欄 134
3.12.5設計主功能區(qū) 135
3.12.6設計版權區(qū)域 138
3.13思考與練習 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文本字號和轉換 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外邊距和內邊距 159
4.5.2響應式邊距 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案例演練旅行社旅游平臺網頁 168
4.9.1案例概述 168
4.9.2設計網頁頭部 169
4.9.3設計輪播 172
4.9.4設計分類列表 173
4.9.5設計旅游景點頁面 176
4.9.6設計頁腳部分 182
4.10思考與練習 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)案例燒烤餐廳網頁 201
5.4.1案例概述 201
5.4.2設計網頁頭部導航欄 202
5.4.3添加輪播廣告區(qū) 204
5.4.4設計網頁主要內容 205
5.4.5添加頁腳信息 208
5.5思考與練習 210
第 6 章表格樣式 211
6.1Bootstrap基本表格 212
6.2Bootstrap表格類 214
6.3面板中的表格 215
6.4響應式表格 217
6.5實戰(zhàn)案例在線教育平臺網頁 220
6.5.1案例概述 220
6.5.2設計網頁頭部 223
6.5.3設計課程和大綱模塊 228
6.5.4設計學習路徑模塊 233
6.5.5設計教學團隊模塊 235
6.5.6設計問答模塊 238
6.5.7設計頁腳部分 241
6.6思考與練習 242
第 7 章表單樣式 243
7.1表單布局 244
7.1.1水平表單 245
7.1.2內聯(lián)表單 247
7.1.3復雜表單 249
7.2表單控件 251
7.2.1輸入框 251
7.2.2單選按鈕和復選框 254
7.2.3下拉列表 257
7.2.4滑動條 258
7.2.5輸入框組 259
7.3表單校驗 260
7.4實戰(zhàn)演練酒店入住訂購網頁 263
7.4.1案例概述 263
7.4.2設計主頁 264
7.4.3設計側邊欄 277
7.4.4添加登錄模塊 280
7.5思考與練習 281
第 8 章定制與優(yōu)化 283
8.1CSS預處理程序 284
8.1.1CSS預處理程序的概念 284
8.1.2引入CSS預處理程序的原因 284
8.2安裝Ruby和Sass 286
8.2.1安裝Ruby 286
8.2.2安裝Sass 287
8.3Sass的基本應用 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思考與練習 300
書單推薦
