Bootstrap 響應式 Web 前端開發

王紅 秦海玉 侯勇

  • 出版商: 人民郵電
  • 出版日期: 2022-08-01
  • 定價: $419
  • 售價: 8.5$356
  • 語言: 簡體中文
  • 頁數: 304
  • ISBN: 711558656X
  • ISBN-13: 9787115586568
  • 相關分類: Bootstrap
  • 立即出貨 (庫存 < 4)

  • Bootstrap 響應式 Web 前端開發-preview-1
  • Bootstrap 響應式 Web 前端開發-preview-2
Bootstrap 響應式 Web 前端開發-preview-1

買這商品的人也買了...

商品描述

本書主要介紹Bootstrap的基礎知識、基本語法和高級應用,並採用易於理解的方式講解這些技術的使用技巧和註意事項。全書共14章,內容包括Bootstrap起步、Bootstrap中常用的基本樣式、Bootstrap 4彈性盒、Bootstrap網格佈局、Bootstrap表單、Bootstrap相關組件、Bootstrap徽章及加載動畫、Bootstrap中的圖文混排、設置Bootstrap中的公共樣式、Bootstrap的窗口和提示工具、折疊面板與輪播組件、第三方插件的使用、綜合案例——抖音秀、課程設計——吃了麽外賣網。全書每章內容都與實例緊密結合,有助於讀者理解並應用知識,進而達到學以致用的目的。

本書各章節主要內容配有以二維碼為入口的微課,並在人郵學院(www.rymooc.com)平臺上提供了慕課。此外,本書還提供了課程資源包,資源包中包含本書所有實例、上機指導、綜合案例的源代碼,製作精良的電子課件PPT,重點及難點教學視頻,自測題庫(包括選擇題、填空題、操作題題庫及自測試捲等內容),以及綜合案例和課程設計。其中,源代碼全部經過精心測試,能夠在Windows 7、Windows 8、Windows 10等操作系統下編譯和運行。

本書可作為高等院校電腦、軟件工程等專業“Web前端開發”相關課程的教材,也可作為程序開發人員的參考用書。

作者簡介

明日科技策划本书。

明日科技:已经在人民邮电出版社出版多本“程序设计类”图书,包括“技术方案宝典”、“开发技术大全”、“自学手册”、“参考大全”等多个系列,大都取得了比较好的市场反响,内容由浅入深,读者好评如潮。

目錄大綱

【章名目錄】

第 1章 Bootstrap起步 1

第 2章 Bootstrap中常用的基本樣式 8

第3章 Bootstrap 4彈性盒 37

第4章 Bootstrap網格佈局 69

第5章 Bootstrap表單 90

第6章 Bootstrap相關組件 117

第7章 Bootstrap徽章及加載動畫 135

第8章 Bootstrap中的圖文混排 148

第9章 設置Bootstrap中的公共樣式 166

第 10章 Bootstrap的窗口和提示工具 184

第 11章 折疊面板與輪播組件 218

第 12章 第三方插件的使用 240

第 13章 綜合案例——抖音秀 270

第 14章 課程設計——吃了麽外賣網 276

 

【詳細目錄】

第 1章 Bootstrap起步 1

1.1 Bootstrap概述 1

1.1.1 Bootstrap是什麽 1

1.1.2 Bootstrap版本的“進化” 1

1.2 為什麽使用Bootstrap 2

1.2.1 Bootstrap的優點 2

1.2.2 Bootstrap包含的內容 3

1.2.3 Bootstrap的應用 3

1.3 Bootstrap的下載及使用 3

1.3.1 Bootstrap的下載 3

1.3.2 Bootstrap的文件結構 4

1.3.3 Bootstrap的使用 5

1.4 本章小結 6

上機指導 7

習題 7

 

第 2章 Bootstrap中常用的基本樣式 8

2.1 排版樣式 8

2.1.1 標題樣式 8

2.1.2 添加強調文本 10

2.1.3 縮略語樣式 13

2.1.4 地址樣式 14

2.1.5 引用樣式 15

2.1.6 列表樣式 16

2.2 表格 20

2.2.1 基本的表格 20

2.2.2 可選的表格樣式 21

2.2.3 響應式表格 27

2.3 圖片 29

2.3.1 響應式圖片 29

2.3.2 修飾圖片 29

2.4 其他常用樣式 31

2.4.1 對文本的處理 31

2.4.2 背景樣式 32

2.4.3 設置內容間隔 33

2.4.4 添加陰影 35

2.5 本章小結 35

上機指導 35

習題 36

 

第3章 Bootstrap 4彈性盒 37

3.1 響應式設計概述 37

3.1.1 常見的佈局方式 38

3.1.2 佈局的實現方式 38

3.2 彈性盒概述 38

3.2.1 什麽是彈性盒 38

3.2.2 彈性盒的基本屬性 39

3.2.3 Bootstrap 4中彈性盒的使用 40

3.3 項目的對齊與對準 42

3.3.1 彈性盒的主軸方向 42

3.3.2 彈性子項目在主軸上的對齊方式 45

3.3.3 彈性子項目在側軸上的對齊方式 49

3.3.4 項目的自對齊 53

3.4 項目的大小 56

3.4.1 設置項目自相等 56

3.4.2 設置項目等寬變換 57

3.4.3 多行內容的對齊 59

3.5 項目的排列 61

3.5.1 設置項目自浮動 61

3.5.2 Wrap包裹 63

3.5.3 order排序 65

3.6 本章小結 67

上機指導 67

習題 68

 

第4章 Bootstrap網格佈局 69

4.1 網格系統概述 69

4.1.1 什麽是網格系統 69

4.1.2 網格化選項 70

4.1.3 網格系統的簡單應用 70

4.2 響應式的class選擇器 71

4.2.1 覆蓋所有設備 71

4.2.2 固定網格與流式網格 72

4.2.3 間隙的處理 73

4.3 自動佈局列 74

4.3.1 等寬佈局 74

4.3.2 自定義寬度 75

4.3.3 設置項目為寬度可變的彈性空間 77

4.3.4 混合佈局 78

4.4 項目的對齊處理 79

4.4.1 項目的水平對齊 80

4.4.2 項目的垂直對齊 80

4.4.3 自定義某列的垂直對齊方式 82

4.4.4 換行處理 82

4.5 列的偏移、嵌套和重排序 83

4.5.1 列的偏移 83

4.5.2 列的嵌套 86

4.5.3 列的重排序 87

4.6 本章小結 88

上機指導 89

習題 89

 

第5章 Bootstrap表單 90

5.1 表單的風格 90

5.1.1 表單支持的控件 90

5.1.2 控件的狀態 94

5.1.3 表單的佈局風格 95

5.2 下拉菜單 98

5.2.1 設置下拉菜單 98

5.2.2 下拉菜單內容設置 100

5.2.3 下拉菜單的狀態 102

5.3 下拉菜單樣式設置 103

5.3.1 下拉菜單的展開方向 103

5.3.2 下拉菜單的對齊方式 104

5.3.3 下拉菜單的響應式對齊 104

5.4 按鈕 105

5.4.1 按鈕的風格 105

5.4.2 按鈕的大小 108

5.4.3 按鈕的狀態 109

5.5 按鈕組 109

5.5.1 設置按鈕組 109

5.5.2 按鈕組的嵌套 110

5.5.3 垂直排列的按鈕組 111

5.6 輸入框組 111

5.6.1 定義輸入框組 112

5.6.2 輸入框組的樣式 112

5.7 本章小結 115

上機指導 115

習題 116

 

第6章 Bootstrap相關組件 117

6.1 導航菜單 117

6.1.1 導航菜單的基本樣式 117

6.1.2 導航菜單的對齊與填充 119

6.1.3 選項卡 121

6.2 導航欄 123

6.2.1 導航欄的內容組成 123

6.2.2 導航欄的樣式 125

6.2.3 響應式導航欄 127

6.3 麵包屑導航與分頁 129

6.3.1 麵包屑導航 129

6.3.2 設置分頁及其樣式 130

6.4 本章小結 133

上機指導 133

習題 134

 

第7章 Bootstrap徽章及加載動畫 135

7.1 添加徽章 135

7.1.1 徽章的基本使用 135

7.1.2 徽章的樣式 136

7.1.3 徽章的鏈接效果 138

7.2 進度條 138

7.2.1 進度條的基本使用 139

7.2.2 進度條的樣式 139

7.2.3 其他風格進度條 141

7.3 加載動畫 142

7.3.1 加載動畫及其樣式 142

7.3.2 設置加載動畫的位置 143

7.3.3 設置加載動畫的大小 145

7.3.4 在按鈕中添加加載動畫 145

7.4 本章小結 146

上機指導 146

習題 147

 

第8章 Bootstrap中的圖文混排 148

8.1 媒體對象 148

8.1.1 媒體對象的使用 148

8.1.2 媒體對象的樣式 149

8.1.3 媒體對象的嵌套 152

8.2 列表組 152

8.2.1 列表組的基本使用 152

8.2.2 列表組的樣式 154

8.2.3 列表組的嵌套使用 155

8.3 卡片 157

8.3.1 卡片的基本使用 157

8.3.2 卡片的樣式 158

8.3.3 卡片的排列 161

8.4 本章小結 163

上機指導 163

習題 165

 

第9章 設置Bootstrap中的公共樣式 166

9.1 邊框樣式 166

9.1.1 添加和清除邊框 166

9.1.2 設置圓角 169

9.2 設置浮動與清除浮動 170

9.2.1 如何設置浮動 170

9.2.2 設置響應式浮動 172

9.2.3 清除浮動 172

9.3 設置元素位置 173

9.3.1 設置元素的定位方式 174

9.3.2 固定元素的位置 177

9.4 display屬性 179

9.4.1 如何設置display屬性 179

9.4.2 設置元素的顯示與隱藏 180

9.5 本章小結 182

上機指導 182

習題 183

 

第 10章 Bootstrap的窗口和提示工具 184

10.1 警告框 184

10.1.1 添加警告框 184

10.1.2 為警告框添加關閉按鈕 186

10.1.3 警告框組件的方法與事件 188

10.2 模態框 190

10.2.1 模態框的調用 190

10.2.2 動態模態框 192

10.2.3 模態框組件的選項、方法與事件 198

10.3 提示工具的使用 202

10.3.1 toast組件 202

10.3.2 tooltip組件 205

10.3.3 popover組件 210

10.4 本章小結 216

上機指導 216

習題 217

 

第 11章 折疊面板與輪播組件 218

11.1 滾動監聽組件 218

11.1.1 滾動監聽組件的使用 218

11.1.2 在嵌套的導航中添加滾動監聽 221

11.1.3 在列表組中添加滾動監聽 222

11.1.4 滾動監聽組件的選項、方法和事件 223

11.2 折疊面板組件 225

11.2.1 折疊面板組件的使用 225

11.2.2 控制多個折疊面板 226

11.2.3 “手風琴”折疊面板 227

11.2.4 折疊面板組件的選項、方法和事件 228

11.3 輪播組件 230

11.3.1 輪播組件的使用 231

11.3.2 設置輪播組件的風格 234

11.3.3 輪播組件的選項、方法和事件 235

11.4 大塊屏組件 237

11.5 本章小結 238

上機指導 238

習題 239

 

第 12章 第三方插件的使用 240

12.1 日期選擇器 240

12.1.1 日期選擇器的初級應用 240

12.1.2 日期選擇器的高級應用 242

12.2 對話框插件 247

12.2.1 警告框 247

12.2.2 確認框 250

12.2.3 含表單控件的提示框 254

12.2.4 自定義對話框 257

12.3 顏色選擇器 260

12.3.1 顏色選擇器的初級應用 260

12.3.2 顏色選擇器的高級應用 263

12.4 本章小結 266

上機指導 266

習題 269

 

第 13章 綜合案例——抖音秀 270

13.1 項目概述 270

13.2 設計流程 270

13.3 系統預覽 271

13.4 開發工具準備 271

13.5 抖音秀的實現 271

13.5.1 頁頭頁尾區 271

13.5.2 視頻功能區 273

13.5.3 掛件功能區 274

13.6 本章小結 275

 

第 14章 課程設計——吃了麽外賣網 276

14.1 課程設計目的 276

14.2 系統設計 276

14.2.1 項目概述 276

14.2.2 系統功能結構 276

14.2.3 文件夾組織結構 277

14.2.4 系統預覽 277

14.3 首頁、登錄頁面以及註冊頁面的實現 278

14.3.1 首頁的實現 278

14.3.2 登錄頁面的實現 281

14.3.3 註冊頁面的實現 282

14.4 商家版功能實現 284

14.4.1 商家首頁 284

14.4.2 訂單管理頁面 285

14.4.3 菜品管理和菜品修改頁面 287

14.4.4 留言板管理頁面 289

14.5 買家版功能實現 290

14.5.1 買家首頁 290

14.5.2 商品選購頁面 291

14.5.3 商品支付頁面 296

14.5.4 支付方式選擇頁面 298

14.5.5 訂單追蹤頁面 299

14.5.6 買家評價頁面 300

14.6 本章小結 304