Bootstrap前端開發(fā)從新手到高手（微視頻版）

第 1 章 快速入門 1
1.1 Bootstrap概述 2
1.1.1 Bootstrap的由來 2
1.1.2 Bootstrap的發(fā)展歷程 2
1.1.3 Bootstrap瀏覽器支持 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ǔ)知識(shí) 17
1.5.2 自動(dòng)布局列 21
1.5.3 響應(yīng)式布局類 25
1.5.4 嵌套布局 28
1.5.5 列布局 29
1.6 實(shí)戰(zhàn)案例——企業(yè)網(wǎng)站首頁 32
1.6.1 案例概述 32
1.6.2 設(shè)計(jì)頁面導(dǎo)航區(qū) 33
1.6.3 設(shè)計(jì)頁面展示區(qū) 34
1.6.4 添加搜索欄 34
1.6.5 設(shè)計(jì)主體內(nèi)容區(qū) 35
1.6.6 設(shè)計(jì)兩欄圖文區(qū) 38
1.6.7 添加footer區(qū) 39
1.6.8 設(shè)計(jì)頁面樣式 40
1.7 思考與練習(xí) 44
第 2 章 基礎(chǔ)樣式 45
2.1 頁面排版 46
2.2 標(biāo)題 47
2.2.1 Bootstrap標(biāo)準(zhǔn)標(biāo)題 47
2.2.2 內(nèi)聯(lián)子標(biāo)題 49
2.2.3 標(biāo)題輔助文本 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 實(shí)戰(zhàn)案例——在線簡(jiǎn)歷模板 62
2.7.1 案例概述 62
2.7.2 設(shè)計(jì)布局 64
2.7.3 制作信息欄 65
2.7.4 制作導(dǎo)航條 67
2.7.5 制作簡(jiǎn)歷主頁 67
2.8 思考與練習(xí) 73
第 3 章 組件庫 75
3.1 正確使用Bootstrap組件 76
3.2 按鈕和按鈕組 79
3.2.1 按鈕 79
3.2.2 按鈕組 83
3.3 標(biāo)簽和徽章 85
3.3.1 標(biāo)簽 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 進(jìn)度條 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 滾動(dòng)監(jiān)聽組件 124
3.11.1 監(jiān)聽導(dǎo)航 124
3.11.2 監(jiān)聽導(dǎo)航條 125
3.12 實(shí)戰(zhàn)案例——網(wǎng)站后臺(tái)管理頁面 128
3.12.1 案例概述 128
3.12.2 設(shè)計(jì)頁面布局 129
3.12.3 設(shè)計(jì)導(dǎo)航欄 130
3.12.4 設(shè)計(jì)左側(cè)邊欄 134
3.12.5 設(shè)計(jì)主功能區(qū) 135
3.12.6 設(shè)計(jì)版權(quán)區(qū)域 138
3.13 思考與練習(xí) 139
第 4 章 工具類 141
4.1 認(rèn)識(shí)工具類 142
4.1.1 工具類的概念 142
4.1.2 工具類的命名 143
4.1.3 工具類的種類 145
4.2 文本工具類 146
4.2.1 文本對(duì)齊和換行 146
4.2.2 文本字號(hào)和轉(zhuǎn)換 149
4.2.3 字體粗細(xì)和斜體 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 顯示和浮動(dòng)工具類 163
4.7.1 顯示工具類 163
4.7.2 浮動(dòng)工具類 166
4.8 其他工具類 167
4.8.1 位置工具類 167
4.8.2 陰影工具類 167
4.9 案例演練——旅行社旅游平臺(tái)網(wǎng)頁 168
4.9.1 案例概述 168
4.9.2 設(shè)計(jì)網(wǎng)頁頭部 169
4.9.3 設(shè)計(jì)輪播 172
4.9.4 設(shè)計(jì)分類列表 173
4.9.5 設(shè)計(jì)“旅游景點(diǎn)”頁面 176
4.9.6 設(shè)計(jì)頁腳部分 182
4.10 思考與練習(xí) 184
第 5 章 彈性布局 185
5.1 定義彈性布局 186
5.2 彈性布局容器樣式 187
5.2.1 項(xiàng)目對(duì)齊工具類 188
5.2.2 排列方向工具類 191
5.2.3 項(xiàng)目換行工具類 193
5.3 彈性布局項(xiàng)目樣式 194
5.3.1 項(xiàng)目排序工具類 194
5.3.2 項(xiàng)目伸縮工具類 195
5.3.3 自身對(duì)齊工具類 199
5.3.4 自動(dòng)浮動(dòng)工具類 200
5.4 實(shí)戰(zhàn)案例——燒烤餐廳網(wǎng)頁 201
5.4.1 案例概述 201
5.4.2 設(shè)計(jì)網(wǎng)頁頭部導(dǎo)航欄 202
5.4.3 添加輪播廣告區(qū) 204
5.4.4 設(shè)計(jì)網(wǎng)頁主要內(nèi)容 205
5.4.5 添加頁腳信息 208
5.5 思考與練習(xí) 210
第 6 章 表格樣式 211
6.1 Bootstrap基本表格 212
6.2 Bootstrap表格類 214
6.3 面板中的表格 215
6.4 響應(yīng)式表格 217
6.5 實(shí)戰(zhàn)案例——在線教育平臺(tái)網(wǎng)頁 220
6.5.1 案例概述 220
6.5.2 設(shè)計(jì)網(wǎng)頁頭部 223
6.5.3 設(shè)計(jì)“課程”和“大綱”模塊 228
6.5.4 設(shè)計(jì)“學(xué)習(xí)路徑”模塊 233
6.5.5 設(shè)計(jì)“教學(xué)團(tuán)隊(duì)”模塊 235
6.5.6 設(shè)計(jì)“問答”模塊 238
6.5.7 設(shè)計(jì)頁腳部分 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 滑動(dòng)條 258
7.2.5 輸入框組 259
7.3 表單校驗(yàn) 260
7.4 實(shí)戰(zhàn)演練——酒店入住訂購(gòu)網(wǎng)頁 263
7.4.1 案例概述 263
7.4.2 設(shè)計(jì)主頁 264
7.4.3 設(shè)計(jì)側(cè)邊欄 277
7.4.4 添加登錄模塊 280
7.5 思考與練習(xí) 281
第 8 章 定制與優(yōu)化 283
8.1 CSS預(yù)處理程序 284
8.1.1 CSS預(yù)處理程序的概念 284
8.1.2 引入CSS預(yù)處理程序的原因 284
8.2 安裝Ruby和Sass 286
8.2.1 安裝Ruby 286
8.2.2 安裝Sass 287
8.3 Sass的基本應(yīng)用 288
8.3.1 使用變量 288
8.3.2 計(jì)算功能 290
8.3.3 選擇器嵌套 290
8.3.4 添加注釋 292
8.3.5 代碼重用 293
8.3.6 控制語句 297
8.4 思考與練習(xí) 300