模塊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 附錄