Bootstrap響應式Web開發(第2版)
黑馬程序員
買這商品的人也買了...
-
$520$442 -
$505ASP.NET Core+Vue.js全棧開發訓練營
-
$880$695
相關主題
商品描述
本書是一本面向Web前端開發學習者的教材,以通俗易懂的語言、豐富實用的案例,全面講解Bootstrap響應式Web開發的相關知識。
本書共8章,第1~3章內容包括初識Bootstrap、移動Web開發基礎和移動Web屏幕適配;第4章講解Bootstrap開發基礎知識,包括佈局容器、柵格系統和工具類等相關內容;第5~7章講解Bootstrap的常用樣式、表單和常用組件的相關內容;第8章講解一個項目實戰——基於Bootstrap的在線學習平臺,將全書所學知識運用到項目開發中。
本書配套豐富的教學資源,包括教學大綱、教學PPT、源代碼、課後習題及答案等,為了幫助讀者更好地學習書中的內容,作者還提供在線答疑,希望幫助更多讀者。
本書可作為高等教育本、專科院校電腦相關專業的教材,也可作為Web前端開發愛好者的自學參考書。
作者簡介
黑马程序员成立于2006年,由中国Java培训先行者张孝祥老师发起,联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今,我们一直坚守着“为千万人少走弯路而著书,为中华软件之崛起而讲课”的办学理念,坚持培养优秀软件应用工程师的宏伟目标,在累计培养的十万余名学员中,其中90%的学员均已在北、上、广等一线城市高薪就业。为了迎合软件市场的需求,我们陆续开设了Java、网页平面、PHP、.Net、iOS、C/C++、Android等9个专业方向的课程,并且未来将逐渐开设其他专业方向的课程。随着传智播客的日益壮大,除了北京总部,我们在上海、广州、武汉、成都、深圳等地也创立了直营分支机构,传智播客俨然已成为了国内具有专业口碑的IT教育机构。
目錄大綱
第1章 初識Bootstrap 1
1.1 Bootstrap 1
1.1.1 Bootstrap概述 1
1.1.2 Bootstrap的特點 2
1.1.3 Bootstrap的組成 3
1.2 瀏覽器 3
1.2.1 PC端瀏覽器 3
1.2.2 移動端瀏覽器 4
1.3 Visual Studio Code編輯器 4
1.3.1 下載並安裝Visual Studio Code編輯器 5
1.3.2 安裝中文擴展包 7
1.3.3 使用Visual Studio Code編輯器 8
1.4 移動Web開發的主流方案 9
1.4.1 單獨製作移動端頁面 10
1.4.2 製作響應式頁面 11
本章小結 13
課後練習 13
第2章 移動Web開發基礎 15
2.1 屏幕分辨率和設備像素比 15
2.1.1 屏幕分辨率 16
2.1.2 設備像素比 16
2.2 視口 17
2.3 CSS樣式初始化 20
2.4 CSS變量 23
2.4.1 定義CSS變量 23
2.4.2 讀取CSS變量的值 24
2.4.3 CSS變量值的類型 25
2.4.4 在JavaScript中設置CSS變量 27
2.5 CSS預處理器 30
2.5.1 Less 30
2.5.2 Sass 32
2.6 Web Storage 35
2.6.1 Web Storage概述 35
2.6.2 localStorage 36
2.6.3 sessionStorage 38
2.7 視頻和音頻 41
2.7.1
2.7.2
2.7.3 video對象和audio對象 43
2.8 移動端touch事件 45
2.8.1 touch事件概述 45
2.8.2 TouchEvent對象 47
2.8.3 模擬移動端單擊事件 48
本章小結 50
課後練習 50
第3章 移動Web屏幕適配 53
3.1 媒體查詢 53
3.2 流式佈局和彈性盒佈局 57
3.2.1 流式佈局 57
3.2.2 彈性盒佈局 60
3.3 rem單位、vw單位和vh單位 64
3.3.1 rem單位 64
3.3.2 vw單位和vh單位 67
3.4 字體圖標 68
3.4.1 什麽是字體圖標 68
3.4.2 下載字體圖標 69
3.4.3 使用字體圖標 73
3.5 二倍圖 74
3.6 SVG 77
3.6.1 什麽是SVG 77
3.6.2 SVG的基本使用方法 77
本章小結 79
課後練習 79
第4章 Bootstrap開發基礎 81
4.1 Bootstrap下載和引入 81
4.1.1 下載Bootstrap 81
4.1.2 引入Bootstrap 85
4.2 Bootstrap佈局容器 85
4.2.1 初識Bootstrap佈局容器 86
4.2.2 Bootstrap佈局容器的使用方法 87
4.3 Bootstrap柵格系統 90
4.3.1 初識Bootstrap柵格系統 90
4.3.2 Bootstrap柵格系統的使用方法 91
4.4 Bootstrap工具類 94
4.4.1 顯示方式工具類 94
4.4.2 邊距工具類 96
4.4.3 彈性盒佈局工具類 98
本章小結 100
課後練習 101
第5章 Bootstrap常用樣式 103
5.1 標題樣式 103
5.2 文本樣式 106
5.2.1 強調文本 107
5.2.2 引用文本 109
5.2.3 文本顏色 111
5.2.4 文本格式 112
5.3 列表樣式 116
5.4 圖文樣式 117
5.4.1 圖像展示方式 117
5.4.2 圖像對齊方式 119
5.4.3 圖文組合方式 121
5.5 表格樣式 122
5.6 輔助樣式 125
5.6.1 背景樣式 125
5.6.2 邊框樣式 127
本章小結 129
課後練習 130
第6章 Bootstrap表單 132
6.1 表單控件樣式 132
6.1.1 文本框 132
6.1.2 下拉列表 135
6.1.3 單選按鈕和復選框 136
6.1.4 輸入組 138
6.2 表單佈局方式 140
6.2.1 行內表單佈局 140
6.2.2 水平表單佈局 142
6.2.3 響應式表單佈局 144
6.3 表單驗證 147
本章小結 154
課後練習 155
第7章 Bootstrap常用組件 157
7.1 初識組件 158
7.1.1 組件概述 158
7.1.2 Bootstrap組件的基本使用方法 158
7.2 按鈕組件 161
7.2.1 基礎樣式按鈕 161
7.2.2 輪廓樣式按鈕 162
7.2.3 尺寸樣式按鈕 163
7.2.4 狀態樣式按鈕 164
7.2.5 組合樣式按鈕 165
7.3 導航組件 167
7.3.1 基礎導航 167
7.3.2 標簽式導航 169
7.3.3 膠囊式導航 171
7.3.4 麵包屑導航 173
7.4 導航欄組件 174
7.4.1 基礎導航欄 175
7.4.2 帶有折疊按鈕的導航欄 177
7.5 下拉菜單組件 179
7.5.1 下拉菜單按鈕 180
7.5.2 下拉菜單導航欄 181
7.6 卡片組件 184
7.6.1 基礎卡片 184
7.6.2 圖文卡片 185
7.6.3 背景圖卡片 187
7.7 輪播組件 190
7.7.1 輪播圖功能分析 190
7.7.2 基礎輪播圖 191
7.8 提示組件 194
7.8.1 工具提示框 194
7.8.2 彈出提示框 197
7.8.3 警告框 201
7.9 模態框組件 204
本章小結 207
課後練習 207
第8章 項目實戰——基於Bootstrap的在線學習平臺 210
8.1 項目介紹 210
8.1.1 項目展示 211
8.1.2 項目分析 214
8.1.3 項目目錄結構 215
8.2 導航欄模塊 216
8.2.1 導航欄模塊效果展示 216
8.2.2 導航欄模塊結構分析 217
8.2.3 導航欄模塊代碼實現 217
8.3 輪播圖模塊 221
8.3.1 輪播圖模塊效果展示 221
8.3.2 輪播圖模塊結構分析 222
8.3.3 輪播圖模塊代碼實現 223
8.4 視頻教程模塊 226
8.4.1 視頻教程模塊效果展示 226
8.4.2 視頻教程模塊結構分析 227
8.4.3 視頻教程模塊代碼實現 228
8.5 學習路線模塊 229
8.5.1 學習路線模塊效果展示 229
8.5.2 學習路線模塊結構分析 231
8.5.3 學習路線模塊代碼實現 232
8.6 熱門學習工具模塊 236
8.6.1 熱門學習工具模塊效果展示 237
8.6.2 熱門學習工具模塊結構分析 237
8.6.3 熱門學習工具模塊代碼實現 238
8.7 版權模塊 239
8.7.1 版權模塊效果展示 239
8.7.2 版權模塊結構分析 239
8.7.3 版權模塊代碼實現 240
本章小結 242