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

目 錄

第 1 章 快速入門 1

1.1 Bootstrap概述 2

1.1.1 Bootstrap的由來 2

1.1.2 Bootstrap的發展歷程 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 柵格系統  17

1.5.1 基礎知識 17

1.5.2 自動佈局列 21

1.5.3 響應式佈局類 25

1.5.4 嵌套佈局 28

1.5.5 列佈局 29

1.6 實戰案例——企業網站首頁 32

1.6.1 案例概述 32

1.6.2 設計頁面導航區 33

1.6.3 設計頁面展示區 34

1.6.4 添加搜索欄 34

1.6.5 設計主體內容區 35

1.6.6 設計兩欄圖文區 38

1.6.7 添加footer區 39

1.6.8 設計頁面樣式 40

1.7 思考與練習 44

第 2 章 基礎樣式 45

2.1 頁面排版 46

2.2 標題 47

2.2.1 Bootstrap標準標題 47

2.2.2 內聯子標題 49

2.2.3 標題輔助文本 49

2.3 正文 49

2.3.1 段落樣式 50

2.3.2 內聯文本 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 實戰案例——在線簡歷模板 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 導航系統 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 模態窗口 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 滾動監聽組件 124

3.11.1 監聽導航 124

3.11.2 監聽導航條 125

3.12 實戰案例——網站後台管理頁面 128

3.12.1 案例概述 128

3.12.2 設計頁面佈局 129

3.12.3 設計導航欄 130

3.12.4 設計左側邊欄 134

3.12.5 設計主功能區 135

3.12.6 設計版權區域 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 實戰案例——燒烤餐廳網頁 201

5.4.1 案例概述 201

5.4.2 設計網頁頭部導航欄 202

5.4.3 添加輪播廣告區 204

5.4.4 設計網頁主要內容 205

5.4.5 添加頁腳信息 208

5.5 思考與練習 210

第 6 章 表格樣式 211

6.1 Bootstrap基本表格 212

6.2 Bootstrap表格類 214

6.3 面板中的表格 215

6.4 響應式表格 217

6.5 實戰案例——在線教育平臺網頁 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 內聯表單 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 實戰演練——酒店入住訂購網頁 263

7.4.1 案例概述 263

7.4.2 設計主頁 264

7.4.3 設計側邊欄 277

7.4.4 添加登錄模塊 280

7.5 思考與練習 281

第 8 章 定製與優化 283

8.1 CSS預處理程序 284

8.1.1 CSS預處理程序的概念 284

8.1.2 引入CSS預處理程序的原因 284

8.2 安裝Ruby和Sass 286

8.2.1 安裝Ruby 286

8.2.2 安裝Sass 287

8.3 Sass的基本應用 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