Bootstrap響應式網站開發任務式教程（微課版）

孫慶英，女，1982年6月生，江蘇淮安人，淮陰師範學院計算機科學與技術學院副教授，博士，江蘇高校“青藍工程”優秀青年骨幹教師培養對象。中國計算機學會會員，江蘇省計算機學會會員，江蘇省人工智能學會自然語言處理專委會委員，淮安市計算機學會理事。2004年畢業於淮陰師範學院計算機科學與技術專業，獲學士學位；2010年畢業於南京理工大學計算機應用技術專業，獲碩士學位；2019年畢業於蘇州大學計算機科學與技術專業，獲博士學位。主要研究方向：自然語言處理，社會計算，立場分析。主要教授了：《C++程序設計》、《信息安全技術》、《Python程序設計》、《自然語言處理》、《人工智能技術與應用》、《計算機應用基礎》等課程。

主持國家自然科學基金項目1項，主持教育部產學研協同育人項目1項，主持淮安市科技攻關工業計劃項目2項，參與國家自然科學基金項目3項，指導學生參與江蘇省大學生創新訓練項目4項。主持校課堂教學改革、課程考試改革、網絡課程、課程思政等教改項目。發表教科研論文25篇，其中核心以上學術論文12篇，SCI收錄學術論文6篇。獲得校十三次青年教師教學評優一等獎、校“十佳教學能手”、“優秀共產黨員”、“優秀班主任”等稱號，獲得淮安市自然科學優秀學術論文三等獎兩次。

目 錄

出版說明

前言

第 一篇：Bootstrap基礎 1

任務1 認識響應式布局 1

學習目標 1

任務展示：自適應展示社會主義核心價值觀 1

知識準備 1

1.1認識響應式布局 1

1.1.1響應式網頁 1

1.1.2響應式網頁布局的優缺點 2

1.1.3響應式設計的概念 3

1.1.4 認識視口 4

1.2流式網格 5

1.2.1網格設計 5

1.2.2流式布局 6

1.3媒體查找實現響應式布局 6

1.3.1媒體查詢基礎 6

1.3.2使用方法 8

1.3.3設置方式 8

1.3.4媒體類型 8

1.3.5判斷條件 9

1.3.6媒體特征 10

1.4體驗響應式布局中的圖像與字體 10

1.4.1流式圖像 10

1.4.2字體使用 12

1.5綜合案例：體驗響應式頁面布局 14

1.5.1 案例展示 14

1.5.2 案例分析 15

1.5.3 案例實現 15

任務實施：自適應展示社會主義核心價值觀 17

任務拓展 20

任務小結 21

拓展訓練 21

任務2 認識Bootstrap 23

學習目標 23

任務展示：二十四節氣頁面展示 23

知識準備 24

2.1 Bootstrap簡介 24

2.1.1 初識Bootstrap5 24

2.1.2使用Bootstrap的優勢 24

2.1.3瀏覽器與支持 25

2.1.4環境搭建 25

2.2 Bootstrap 使用基礎 26

2.2.1 Bootstrap初次應用體驗 26

2.2.2體驗Bootstrap中的響應式圖像 29

2.2.3體驗Bootstrap中的畫像組件 31

2.3案例：嘗試Bootstrap布局師資培訓網導航區 31

2.3.1 案例展示 31

2.3.2 案例分析 31

2.3.3 案例實現 32

任務實施：二十四節氣頁面展示 33

任務拓展 38

任務小結 39

拓展訓練 39

第二篇：Bootstrap框架 41

任務3 使用Bootstrap網格布局 41

學習目標 41

任務展示：西湖十景頁面展示 41

知識準備 42

3.1 Bootstrap網格系統的原理 42

3.1.1網格系統的實現原理 42

3.1.2網格系統中的斷點設置 43

3.1.3網格系統中的容器 43

3.1.4網格系統的工作原理 45

3.2網格系統的常用布局 47

3.2.1等寬響應式列布局 47

3.2.2不等寬響應式列布局 50

3.2.3響應式嵌套布局 52

3.3網格系統的槽與列偏移 53

3.3.1槽的應用 53

3.3.2偏移列 55

3.4綜合案例：二十四節氣頁面的網格布局 55

3.4.1 案例展示 55

3.4.2 案例分析 55

4.4.3 案例實現 56

任務實施：西湖十景頁面展示 58

任務拓展 62

任務小結 63

拓展訓練 63

任務4 Bootstrap基礎排版與工具應用 64

學習目標 65

任務展示：中原音樂文化頁面展示 65

知識準備 65

4.1基礎排版 65

4.1.1基礎重置 65

4.1.2標題 65

4.1.3段落 67

4.1.4文本樣式 67

4.2列表 70

4.2.1有序列表和無序列表 70

4.2.2內聯列表 70

4.2.3定義列表 71

4.3工具類 71

4.3.1背景顏色 71

4.3.2顯示（Display) 72

4.3.3邊框（Border） 73

4.3.4間距（Spacing） 74

4.3.5 Flex布局 75

4.3.6浮動（Float) 80

4.3.7溢出(Overflow) 80

4.3.8定位(Position) 81

4.3.9陰影（Shadows） 82

4.3.10調整大小 82

4.5案例：綜合案例：中原音樂文化頁面展示 83

4.5.1 案例展示 83

4.5.2 案例分析 84

4.5.3 案例實現 84

任務實施：中原音樂文化頁面展示 87

任務拓展 92

任務小結 92

拓展訓練 93

任務5 運用Bootstrap表格 94

學習目標 94

任務展示：北京冬奧會中國隊獎牌榜信息展示 94

知識準備 95

5.1網頁中的表格 95

5.1.1表格的簡介 95

5.1.2 表格的基本元素 95

5.1.3 創建表格 96

5.2Bootstrap中表格的簡介 96

5.2.1基本型表格 96

5.2.2條紋狀表格 98

5.2.3帶邊框的表格 99

5.2.4鼠標懸停表格 99

5.2.5響應式表格 100

5.2.6應用表格的狀體類與顏色類 100

5.3綜合案例：“圓夢助學”助學金評選結果展示 103

5.3.1 案例展示 103

5.3.2 案例分析 103

5.3.3 案例過程 103

任務實施：北京冬奧會中國隊獎牌榜信息展示 111

任務拓展 113

任務小結 113

拓展訓練 114

任務6 運用Bootstrap表單 116

學習目標 116

任務展示：青年誌願者信息註冊頁面制作 116

知識準備 117

6.1表單的類型 117

6.1.1堆疊表單 117

6.1.2內聯表單 118

6.1.3水平排列表單 119

6.2表單中控件的分類 120

6.2.1按鈕 120

6.2.2常用表單控件 123

6.2.3範圍 126

6.3輸入框組 126

6.3.1認識輸入框組 126

6.3.2輸入框組的形態 128

6.4表單浮動標簽與表單驗證 130

6.4.1表單浮動標簽 131

6.4.2表單驗證 133

6.4案例：個人捐贈用戶捐款界面設計 136

6.4.1 案例展示 136

6.4.2 案例分析 137

6.4.3 案例實現 137

任務實施：青年誌願者信息註冊頁面制作 140

任務拓展 143

任務小結 144

拓展訓練 144

任務7 使用組件 145

學習目標 145

任務展示：歷代墨竹優秀作品展示學習頁面設計制作 145

知識準備 145

7.1普通組件 145

7.1.1字體圖標庫 146

7.1.2徽章 147

7.1.3面包屑導航 148

7.1.4按鈕組 149

7.1.5警告框 152

7.1.6進度條 153

7.1.7分頁 154

7.1.8導航 155

7.1.9列表組 161

7.1.10卡片 163

7.2高級組件 164

7.2.1下拉菜單 164

7.2.2導航欄 166

7.2.3輪播 168

7.2.4輪播 170

7.2.5模態框 173

7.2.6提示框 175

7.2.7彈出框 176

7.2.8消息彈窗 178

7.2.9滾動監聽 179

7.2.10側邊欄導航 182

7.3案例：博物館側邊欄導航設計制作 183

7.3.1 案例展示 184

7.3.2 案例分析 184

7.3.3 案例實現 184

任務實施：歷代墨竹優秀作品展示學習頁面設計制作 187

任務拓展 197

任務小結 199

拓展訓練 199

第三篇：Bootstrap綜合實戰 41

任務8 綜合實戰:AI教育企業主頁設計制作 200

8.1項目展示 200

8.2項目分析 202

8.3項目展示 203

8.3.1搭建基本頁面框架 203

8.3.2頂部欄模塊的分析與實現 204

8.3.3導航欄模塊的分析與實現 207

9.3.4輪播圖模塊實現 212

8.3.5信息和課程報名模塊的分析與實現 213

8.3.6產品模塊的分析與實現 215

8.3.7新聞和合作夥伴模塊的分析與實現 224

8.3.8 項目拓展 231