Bootstrap響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)(電子活頁(yè)式)
定 價(jià):59.8 元
- 作者:溫凱 陳承歡
- 出版時(shí)間:2025/12/1
- ISBN:9787115666444
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁(yè)碼:0
- 紙張:
- 版次:01
- 開(kāi)本:16開(kāi)
本書(shū)由淺入深、全面系統(tǒng)地介紹Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)。全書(shū)共9個(gè)模塊,具體包括Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)、Bootstrap 5頁(yè)面元素控制與美化、Bootstrap 5頁(yè)面彈性布局設(shè)計(jì)、Bootstrap 5頁(yè)面導(dǎo)航與下拉菜單設(shè)計(jì)、Bootstrap 5頁(yè)面數(shù)據(jù)展示設(shè)計(jì)、Bootstrap 5頁(yè)面表單操作與用戶交互設(shè)計(jì)、Bootstrap 5消息提示與信息反饋設(shè)計(jì)、Bootstrap 5網(wǎng)頁(yè)特效設(shè)計(jì)及Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)任務(wù)實(shí)戰(zhàn)。本書(shū)內(nèi)容豐富,實(shí)例翔實(shí),旨在為讀者提供從基礎(chǔ)入門到實(shí)踐精通的全面指導(dǎo),提升其網(wǎng)頁(yè)設(shè)計(jì)能力。
本書(shū)可作為高校計(jì)算機(jī)相關(guān)專業(yè)的教材,也可作為計(jì)算機(jī)培訓(xùn)機(jī)構(gòu)的培訓(xùn)教材,還可作為Web前端開(kāi)發(fā)愛(ài)好者的自學(xué)參考書(shū)。
1.名校名師作者,寫作質(zhì)量高:每一章節(jié)都經(jīng)過(guò)精心打磨,旨在為讀者提供最優(yōu)質(zhì)的學(xué)習(xí)體驗(yàn)。
2.模塊式教學(xué),案例引導(dǎo):采用模塊化教學(xué)設(shè)計(jì),將復(fù)雜的知識(shí)點(diǎn)分解成易于理解和掌握的小單元,通過(guò)實(shí)際案例逐步引導(dǎo)學(xué)習(xí)過(guò)程。
3.案例新穎,貼近實(shí)際應(yīng)用:書(shū)中案例選材新穎,緊貼行業(yè)最新趨勢(shì)和技術(shù)發(fā)展,涵蓋多個(gè)實(shí)際應(yīng)用場(chǎng)景。
4.配套資源豐富 :提供全方位的配套資源支持,包括教學(xué)視頻、課后習(xí)題等。無(wú)論是自學(xué)還是課堂教學(xué),都能找到合適的輔助材料。
陳承歡,三級(jí)教授,高級(jí)工程師,軟件設(shè)計(jì)師,湖南省省級(jí)專業(yè)帶頭人,湖南省青年骨干教師,武漢大學(xué)軟件工程專業(yè),湖南鐵道職業(yè)技術(shù)學(xué)院教務(wù)處處長(zhǎng)。2008年,曾赴澳大利亞坎培門理工學(xué)院培訓(xùn)交流,2015年,曾赴加拿大圣力嘉學(xué)院培訓(xùn)交流,2019年,曾赴英國(guó)、德國(guó)學(xué)習(xí)交流。主持開(kāi)發(fā)職業(yè)教育特色教材50多本,其中國(guó)家級(jí)“十一五”規(guī)劃教材4本,國(guó)家級(jí)“十二五”規(guī)劃教材10本,國(guó)家級(jí)“十三五”規(guī)劃教材7本。國(guó)家精品課程與國(guó)家精品共享課程配套教材1本,國(guó)家職業(yè)教育資源庫(kù)配套教材3本。主持《網(wǎng)頁(yè)設(shè)計(jì)與制作》國(guó)家精品課程,主持《網(wǎng)頁(yè)設(shè)計(jì)與制作》國(guó)家精品共享課程,主持《計(jì)算機(jī)維護(hù)與維修》、《實(shí)用工具軟件應(yīng)用》、《網(wǎng)頁(yè)樣式設(shè)計(jì)》3門國(guó)家資源庫(kù)課程。國(guó)家級(jí)教學(xué)成果獎(jiǎng)二等獎(jiǎng)1項(xiàng),湖南省職業(yè)教育教學(xué)成果獎(jiǎng)特等獎(jiǎng)1項(xiàng)、三等獎(jiǎng)1項(xiàng),湖南省教育教學(xué)改革發(fā)展優(yōu)秀成果獎(jiǎng)參等獎(jiǎng)1項(xiàng)。
模塊1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 1
知識(shí)導(dǎo)學(xué) 1
1.1 Bootstrap概述 1
1.2 Bootstrap 5主要內(nèi)容 3
1.3 Bootstrap 5容器 4
1.3.1 固定寬度容器 4
1.3.2 100%寬度容器 5
1.3.3 容器邊距 5
1.3.4 容器的邊框和顏色 7
1.3.5 響應(yīng)式容器 8
1.4 Bootstrap 5網(wǎng)格系統(tǒng) 8
1.4.1 網(wǎng)格類 9
1.4.2 網(wǎng)格系統(tǒng)規(guī)則 9
1.4.3 Bootstrap 5網(wǎng)格的基本結(jié)構(gòu) 10
1.4.4 創(chuàng)建寬度相等的列 12
1.4.5 創(chuàng)建不等寬的響應(yīng)式列 13
1.4.6 設(shè)置某一列的寬度 14
1.4.7 創(chuàng)建平板計(jì)算機(jī)和桌面端的網(wǎng)格布局 14
1.4.8 創(chuàng)建平板計(jì)算機(jī)、桌面顯示器、大型桌面顯示器、超大型桌面顯示器的網(wǎng)格布局 15
1.4.9 嵌套列 15
1.4.10 偏移列 16
1.5 使用本地的Bootstrap導(dǎo)入CSS和JavaScript文件 17
1.6 基于Bootstrap 5創(chuàng)建響應(yīng)式網(wǎng)頁(yè) 18
模擬訓(xùn)練 21
【模擬實(shí)例1-1】基于Bootstrap 5創(chuàng)建響應(yīng)式網(wǎng)頁(yè)demo01.html 21
【模擬實(shí)例1-2】基于Bootstrap 5創(chuàng)建響應(yīng)式網(wǎng)頁(yè)demo02.html 21
【模擬實(shí)例1-3】基于Bootstrap 5創(chuàng)建響應(yīng)式網(wǎng)頁(yè)demo03.html 22
模塊習(xí)題 23
模塊2 Bootstrap 5頁(yè)面元素控制與美化 24
知識(shí)導(dǎo)學(xué) 24
2.1 Bootstrap 5文字排版 24
2.1.1 Bootstrap 5默認(rèn)樣式設(shè)置 24
2.1.2
~標(biāo)題樣式設(shè)置 24
2.1.3 .display標(biāo)題類樣式設(shè)置 25
2.1.4 樣式設(shè)置 26
2.1.5 樣式設(shè)置 27
2.1.6 樣式設(shè)置 27
2.1.7 樣式設(shè)置 27
2.1.8 樣式設(shè)置 28
2.1.9 樣式設(shè)置 28
2.1.10 樣式設(shè)置 29
2.1.11 Bootstrap 5更多文字排版類樣式設(shè)置 29
2.2 Bootstrap 5顏色設(shè)置 30
2.2.1 Bootstrap 5的顏色類 30
2.2.2 設(shè)置文本顏色 31
2.2.3 設(shè)置鏈接文本的顏色 31
2.2.4 設(shè)置顏色透明度 32
2.2.5 設(shè)置背景顏色 32
2.3 Bootstrap 5圖像樣式設(shè)置 34
2.3.1 設(shè)置圖像形狀 34
2.3.2 設(shè)置圖像邊框 35
2.3.3 設(shè)置圖像對(duì)齊方式 35
2.3.4 設(shè)置圖像居中 36
2.3.5 設(shè)置響應(yīng)式圖像 36
2.4 Bootstrap 5實(shí)用工具類 37
2.4.1 設(shè)置邊框 37
2.4.2 浮動(dòng)與清除浮動(dòng) 41
2.4.3 設(shè)置響應(yīng)式浮動(dòng) 42
2.4.4 設(shè)置水平居中對(duì)齊 43
2.4.5 設(shè)置垂直對(duì)齊 43
2.4.6 設(shè)置元素的寬度與高度 44
2.4.7 設(shè)置元素的間距 45
2.4.8 設(shè)置元素的陰影 48
2.4.9 設(shè)置縱橫比 49
2.4.10 設(shè)置元素的可見(jiàn)性 50
2.4.11 設(shè)置關(guān)閉圖標(biāo)的樣式 50
2.4.12 使用屏幕閱讀器獲取隱藏元素 51
2.5 Bootstrap 5徽章 52
2.5.1 徽章特性 52
2.5.2 設(shè)置徽章的顏色 52
2.5.3 創(chuàng)建膠囊徽章 53
2.5.4 在按鈕內(nèi)使用徽章 53
2.6 Bootstrap 5進(jìn)度條 54
2.6.1 創(chuàng)建進(jìn)度條 54
2.6.2 設(shè)置進(jìn)度條高度 55
2.6.3 設(shè)置進(jìn)度條的文本標(biāo)簽 55
2.6.4 創(chuàng)建彩色進(jìn)度條 56
2.6.5 創(chuàng)建條紋進(jìn)度條 57
2.6.6 創(chuàng)建帶動(dòng)畫的進(jìn)度條 59
2.6.7 創(chuàng)建混合色彩進(jìn)度條 59
2.7 Bootstrap 5加載效果 60
2.7.1 實(shí)現(xiàn)加載效果 60
2.7.2 使用文本顏色類為加載效果設(shè)置不同的顏色 60
2.7.3 設(shè)置閃爍的加載效果 61
2.7.4 設(shè)置加載效果的大小 61
2.7.5 向按鈕添加加載效果 62
2.8 Bootstrap Jumbotron 62
模擬訓(xùn)練 63
【模擬實(shí)例2-1】創(chuàng)建各種形式的按鈕 63
【模擬實(shí)例2-2】創(chuàng)建各種形式的進(jìn)度條 64
模塊習(xí)題 65
模塊3 Bootstrap 5頁(yè)面彈性布局設(shè)計(jì) 66
知識(shí)導(dǎo)學(xué) 66
3.1 Flexbox概述 66
3.2 設(shè)置彈性元素的水平顯示方向 67
3.3 設(shè)置彈性元素的垂直顯示方向 68
3.4 設(shè)置彈性元素的水平對(duì)齊方式 69
3.5 設(shè)置彈性元素等寬 70
3.6 擴(kuò)展彈性元素占用剩余可用空間 71
3.7 設(shè)置彈性元素的排列順序 71
3.8 為彈性元素添加自動(dòng)外邊距 72
3.9 設(shè)置彈性容器中彈性元素的包裹方式 73
3.10 控制彈性元素在垂直方向上的對(duì)齊方式 74
3.11 控制單行彈性元素的垂直對(duì)齊方式 74
3.12 設(shè)置單個(gè)彈性元素的垂直對(duì)齊方式 75
模擬訓(xùn)練 77
【模擬實(shí)例3-1】用基本彈性布局創(chuàng)建包含多種布局形式的網(wǎng)頁(yè) 77
模塊習(xí)題 78
模塊4 Bootstrap 5頁(yè)面導(dǎo)航與下拉菜單設(shè)計(jì) 79
知識(shí)導(dǎo)學(xué) 79
4.1 Bootstrap 5分頁(yè)及頁(yè)碼導(dǎo)航 79
4.1.1 創(chuàng)建基本分頁(yè) 79
4.1.2 設(shè)置當(dāng)前頁(yè)的頁(yè)碼為活動(dòng)狀態(tài) 80
4.1.3 將分頁(yè)鏈接設(shè)置為禁用狀態(tài) 80
4.1.4 設(shè)置分頁(yè)條目的大小 81
4.1.5 設(shè)置分頁(yè)條目的對(duì)齊方式 82
4.1.6 制作面包屑導(dǎo)航 83
4.2 Bootstrap 5下拉菜單 84
4.2.1 創(chuàng)建下拉菜單 84
4.2.2 在下拉菜單中添加分隔線 85
4.2.3 在下拉菜單中添加標(biāo)題 86
4.2.4 下拉菜單中的可用項(xiàng)與禁用項(xiàng) 87
4.2.5 控制下拉菜單的位置 87
4.2.6 控制下拉菜單的彈出方向 88
4.2.7 設(shè)置下拉菜單中的普通文本項(xiàng) 90
4.2.8 在按鈕組中設(shè)置下拉菜單 91
4.3 Bootstrap 5導(dǎo)航欄 92
4.3.1 創(chuàng)建簡(jiǎn)單的水平導(dǎo)航欄 93
4.3.2 創(chuàng)建垂直導(dǎo)航欄 93
4.3.3 設(shè)置導(dǎo)航欄的對(duì)齊方式 94
4.3.4 創(chuàng)建彩色導(dǎo)航欄 95
4.3.5 在導(dǎo)航欄中突出顯示品牌Logo 97
4.3.6 創(chuàng)建折疊式導(dǎo)航欄 99
4.3.7 創(chuàng)建帶下拉菜單的導(dǎo)航欄 101
4.3.8 在導(dǎo)航欄中使用表單與按鈕 102
4.3.9 設(shè)置導(dǎo)航欄中的非鏈接文本 104
4.3.10 創(chuàng)建位置固定的導(dǎo)航欄 105
4.3.11 創(chuàng)建黏性導(dǎo)航欄 106
4.4 Bootstrap 5選項(xiàng)卡導(dǎo)航欄 107
4.4.1 創(chuàng)建動(dòng)態(tài)選項(xiàng)卡 107
4.4.2 創(chuàng)建膠囊狀動(dòng)態(tài)選項(xiàng)卡 109
4.4.3 創(chuàng)建等寬選項(xiàng)卡/膠囊的下拉菜單 110
4.4.4 創(chuàng)建膠囊下拉菜單 111
4.4.5 創(chuàng)建選項(xiàng)卡下拉菜單 112
4.4.6 創(chuàng)建可切換的動(dòng)態(tài)選項(xiàng)卡 113
4.4.7 創(chuàng)建可切換的膠囊狀動(dòng)態(tài)選項(xiàng)卡 114
4.5 Bootstrap 5滾動(dòng)監(jiān)聽(tīng) 115
4.5.1 創(chuàng)建滾動(dòng)監(jiān)聽(tīng) 115
4.5.2 創(chuàng)建垂直滾動(dòng)監(jiān)聽(tīng) 116
4.6 Bootstrap 5側(cè)邊欄 116
4.6.1 創(chuàng)建側(cè)邊欄 116
4.6.2 控制側(cè)邊欄的方向 118
4.6.3 設(shè)置頁(yè)面內(nèi)容是否可滾動(dòng)及背景 118
模擬訓(xùn)練 119
【模擬實(shí)例4-1】創(chuàng)建中文日歷 119
【模擬實(shí)例4-2】創(chuàng)建包括下拉菜單和搜索功能的頂部導(dǎo)航欄 119
【模擬實(shí)例4-3】創(chuàng)建首頁(yè)特色頂部導(dǎo)航欄 120
【模擬實(shí)例4-4】創(chuàng)建個(gè)性化的側(cè)邊欄 120
模塊習(xí)題 122
模塊5 Bootstrap 5頁(yè)面數(shù)據(jù)展示設(shè)計(jì) 123
知識(shí)導(dǎo)學(xué) 123
5.1 Bootstrap 5列表組及應(yīng)用 123
5.1.1 創(chuàng)建列表組 123
5.1.2 設(shè)置列表項(xiàng)的激活狀態(tài) 124
5.1.3 設(shè)置禁用的列表項(xiàng) 125
5.1.4 設(shè)置包含鏈接的列表項(xiàng) 126
5.1.5 創(chuàng)建沒(méi)有邊框和圓角的列表組 126
5.1.6 創(chuàng)建帶編號(hào)的列表組 127
5.1.7 創(chuàng)建水平列表組 127
5.1.8 設(shè)置列表項(xiàng)的顏色 128
5.1.9 創(chuàng)建帶徽章的列表組 129
5.2 Bootstrap 5表格及應(yīng)用 129
5.2.1 制作Bootstrap 5基礎(chǔ)表格 129
5.2.2 制作條紋表格 131
5.2.3 制作帶邊框的表格 132
5.2.4 設(shè)置表格行的懸停效果 133
5.2.5 制作具有深色背景的表格 134
5.2.6 制作帶有深色條紋的表格 135
5.2.7 制作有懸停效果的深色背景表格 136
5.2.8 制作無(wú)邊框的表格 137
5.2.9 為表格的行或者單元格設(shè)置顏色 139
5.2.10 制作小型表格 140
5.2.11 制作響應(yīng)式表格 141
模擬訓(xùn)練 143
【模擬實(shí)例5-1】展示圖文形式的列表項(xiàng) 143
【模擬實(shí)例5-2】展示、修改與刪除列表組中列表項(xiàng)的內(nèi)容 143
【模擬實(shí)例5-3】展示、添加與刪除列表組中嵌套的列表項(xiàng) 144
模塊習(xí)題 145
模塊6 Bootstrap 5頁(yè)面表單操作與用戶交互設(shè)計(jì) 146
知識(shí)導(dǎo)學(xué) 146
6.1 Bootstrap 5按鈕 146
6.1.1 設(shè)置按鈕樣式 146
6.1.2 設(shè)置按鈕邊框 147
6.1.3 設(shè)置按鈕大小 148
6.1.4 創(chuàng)建塊級(jí)按鈕 149
6.1.5 設(shè)置按鈕的活動(dòng)和禁用狀態(tài) 150
6.1.6 設(shè)置處于加載狀態(tài)的按鈕 150
6.2 Bootstrap 5按鈕組 151
6.2.1 創(chuàng)建按鈕組 151
6.2.2 設(shè)置按鈕組大小 152
6.2.3 創(chuàng)建垂直按鈕組 153
6.2.4 在水平按鈕組內(nèi)設(shè)置下拉菜單 154
6.2.5 在垂直按鈕組內(nèi)設(shè)置下拉菜單 155
6.3 Bootstrap 5表單與表單元素 155
6.3.1 Bootstrap 5表單元素布局 155
6.3.2 設(shè)置表單元素的狀態(tài) 157
6.3.3 使用文本框 158
6.3.4 使用輸入框 159
6.3.5 下拉菜單 160
6.3.6 使用復(fù)選框與單選按鈕 164
6.3.7 使用范圍菜單 167
6.3.8 創(chuàng)建與使用輸入組 169
6.3.9 浮動(dòng)效果 174
模擬訓(xùn)練 176
【模擬實(shí)例6-1】使用不同的驗(yàn)證類實(shí)現(xiàn)表單的驗(yàn)證功能 176
模塊習(xí)題 179
模塊7 Bootstrap 5消息提示與信息反饋設(shè)計(jì) 180
知識(shí)導(dǎo)學(xué) 180
7.1 創(chuàng)建與使用Bootstrap 5消息提示框 180
7.1.1 設(shè)置與使用消息提示框 180
7.1.2 在消息提示框中添加鏈接 182
7.1.3 關(guān)閉消息提示框 183
7.1.4 實(shí)現(xiàn)消息提示框動(dòng)畫 185
7.2 創(chuàng)建與使用Bootstrap 5模態(tài)框 186
7.2.1 創(chuàng)建模態(tài)框 186
7.2.2 在模態(tài)框中添加動(dòng)畫效果 187
7.2.3 設(shè)置模態(tài)框尺寸 188
7.2.4 實(shí)現(xiàn)模態(tài)框居中顯示 191
7.2.5 在模態(tài)框中設(shè)置滾動(dòng)條 192
7.3 創(chuàng)建與使用Bootstrap 5工具提示 194
7.3.1 創(chuàng)建與使用工具提示 194
7.3.2 設(shè)置工具提示的方向 195
7.4 創(chuàng)建與使用Bootstrap 5彈出框 196
7.4.1 創(chuàng)建彈出框 196
7.4.2 設(shè)置彈出框的位置 197
7.4.3 關(guān)閉彈出框 198
7.5 創(chuàng)建與使用Bootstrap 5彈窗 199
7.5.1 創(chuàng)建彈窗 199
7.5.2 顯示多個(gè)彈窗 201
模擬訓(xùn)練 203
【模擬實(shí)例7-1】創(chuàng)建顯示在頁(yè)面右下角的彈窗 203
【模塊實(shí)例7-2】通過(guò)單擊按鈕顯示彈窗 203
模塊習(xí)題 204
模塊8 Bootstrap 5網(wǎng)頁(yè)特效設(shè)計(jì) 205
知識(shí)導(dǎo)學(xué) 205
8.1 創(chuàng)建與使用Bootstrap 5卡片 205
8.1.1 創(chuàng)建與使用簡(jiǎn)單的卡片 206
8.1.2 創(chuàng)建與使用帶有頭部和底部的卡片 206
8.1.3 創(chuàng)建與使用多種顏色的卡片 206
8.1.4 設(shè)置與使用標(biāo)題樣式、文本樣式和鏈接樣式 208
8.1.5 創(chuàng)建與使用圖像卡片 209
8.1.6 實(shí)現(xiàn)卡片圖像疊加效果 210
8.2 實(shí)現(xiàn)Bootstrap 5折疊效果 211
8.3 實(shí)現(xiàn)Bootstrap 5輪播效果 213
模擬訓(xùn)練 215
【模擬實(shí)例8-1】通過(guò)擴(kuò)展卡片組件實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴功能 215
【模擬實(shí)例8-2】創(chuàng)建一個(gè)簡(jiǎn)單的帶有指示器和控件的圖片輪播 216
模塊習(xí)題 216
模塊9 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)任務(wù)實(shí)戰(zhàn) 217
知識(shí)導(dǎo)學(xué) 217
9.1 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵步驟 217
9.2 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵事項(xiàng) 219
9.3 Bootstrap 5響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)時(shí)應(yīng)用的關(guān)鍵技術(shù) 220
9.4 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的主要優(yōu)點(diǎn)和缺點(diǎn) 221
任務(wù)實(shí)戰(zhàn) 222
【任務(wù)9-1】設(shè)計(jì)Bootstrap 5用戶登錄頁(yè)面 222
【任務(wù)9-2】設(shè)計(jì)Bootstrap 5產(chǎn)品推介網(wǎng)頁(yè) 223
【任務(wù)9-3】設(shè)計(jì)Bootstrap 5網(wǎng)站首頁(yè) 227
模塊習(xí)題 229
附錄