Bootstrap基礎(chǔ)入門-第07章 教學(xué)設(shè)計(jì)

學(xué)IT有疑問，就找千問千知千里尋他眾百度,鋒自苦寒磨礪出千鋒教育Bootstrap基礎(chǔ)入門教學(xué)設(shè)計(jì)課程名稱：Bootstrap基礎(chǔ)入門_____授課年級：_______________________授課學(xué)期：_______________________教師姓名：_______________________2022年11月04日課程名稱第7章Bootstrap的CSS組件計(jì)劃學(xué)時(shí)14學(xué)時(shí)內(nèi)容分析本章主要介紹Bootstrap的徽章、警告框、圖標(biāo)、按鈕組件、下拉菜單、導(dǎo)航組件、導(dǎo)航欄、進(jìn)度條、分頁、卡片、媒體對象、巨幕等組件。教學(xué)目標(biāo)與教學(xué)要求【知識目標(biāo)】了解Bootstrap組件的相關(guān)概念理解導(dǎo)航欄的運(yùn)行特點(diǎn)【技能目標(biāo)】掌握Bootstrap徽章組件的應(yīng)用掌握Bootstrap警告框組件的應(yīng)用掌握Bootstrap圖標(biāo)組件的應(yīng)用掌握Bootstrap按鈕組件的應(yīng)用掌握Bootstrap下拉菜單組件的應(yīng)用掌握Bootstrap導(dǎo)航組件的應(yīng)用掌握Bootstrap導(dǎo)航欄組件的應(yīng)用掌握Bootstrap進(jìn)度條組件的應(yīng)用掌握Bootstrap分頁組件的應(yīng)用掌握Bootstrap卡片組件的應(yīng)用掌握Bootstrap媒體對象組件的應(yīng)用掌握Bootstrap巨幕組件的應(yīng)用實(shí)現(xiàn)一個(gè)傳統(tǒng)美食介紹頁面【思政育人目標(biāo)】大學(xué)生是民族共同體的一部分，培養(yǎng)學(xué)生的共同體意識，中華民族共同體意識是維護(hù)國家統(tǒng)一的思想基礎(chǔ)維護(hù)國家統(tǒng)一是培育中華民族共同體意識的根本原則。培養(yǎng)學(xué)生的“團(tuán)結(jié)意識”，團(tuán)隊(duì)成員間相互幫助、互相關(guān)懷,大家彼此共同提高,在一個(gè)團(tuán)隊(duì)中,只有每個(gè)成員都能最大程度地發(fā)揮自己的潛力。教學(xué)重點(diǎn)按鈕組件、下拉菜單組件、導(dǎo)航組件、面包屑組件、導(dǎo)航欄組件、卡片組件教學(xué)難點(diǎn)字體圖標(biāo)、拉菜單應(yīng)用、導(dǎo)航選項(xiàng)卡、【實(shí)戰(zhàn)：傳統(tǒng)美食介紹】教學(xué)方式課堂講解配合ppt演示8學(xué)時(shí)，上機(jī)演練6學(xué)時(shí)

教學(xué)過程第一學(xué)時(shí)（徽章、警告框）一、提出需求，導(dǎo)入學(xué)習(xí)任務(wù)（1）思考Bootstrap腳手架的學(xué)習(xí)應(yīng)該從何入手。組件（Component）是一個(gè)抽象的概念，是對數(shù)據(jù)和方法的簡單封裝，是基于HTML基本元素而設(shè)計(jì)的、可重復(fù)利用的對象。Bootstrap4通過組合HTML、CSS以及Javascript代碼設(shè)計(jì)出大量的、可重用的組件。本章重點(diǎn)介紹Bootstrap4中CSS組件的使用方法，每一個(gè)組件均會配以實(shí)際案例來幫助讀者學(xué)習(xí)和掌握其應(yīng)用技巧。（2）明確學(xué)習(xí)方向。了解Bootstrap組件的相關(guān)概念掌握Bootstrap徽章組件的應(yīng)用掌握Bootstrap的默認(rèn)警告框組件掌握Bootstrap警告框的附加內(nèi)容掌握Bootstrap警告框的狀態(tài)知識講解（一）徽章1.徽章組件的概念徽章（badge）是一種小型的、用于計(jì)數(shù)和打標(biāo)簽的組件，主要用于標(biāo)識新發(fā)布的信息、熱點(diǎn)新聞，突出新的或未讀的E-mail郵件等?；照陆M件常用于標(biāo)題、按鈕和鏈接中，徽章組件應(yīng)用于標(biāo)題時(shí)，可適配其直接父元素，即適配標(biāo)題樣式的大小?；照碌某叽绱笮∈腔趀m單位進(jìn)行設(shè)計(jì)的，因而其具有良好的彈性及適配性。2.徽章組件的結(jié)構(gòu)徽章組件的結(jié)構(gòu)非常簡單，一個(gè)<span>標(biāo)簽中包含兩個(gè)類，.badge類用于聲明徽章，.badge-*類用于設(shè)計(jì)徽章顏色，徽章聲明類必須與徽章顏色類聯(lián)用。Bootstrap4為徽章組件定義了一系列工具類，包括創(chuàng)建類、.顏色類以及形狀類?；照骂伾惖目扇☆伾蛋╬rimary、secondary、success、danger、warning、info、light、dark等。.badge-pill徽章形狀類可用于設(shè)置橢圓形徽章和膠囊徽章，能夠使徽章看起來更加圓潤，具備水平內(nèi)邊距。3.徽章組件的應(yīng)用語法格式徽章組件的應(yīng)用語法格式如下所示。<h1>標(biāo)題<spanclass="badgebadge-secondary">徽章內(nèi)容</span></h1>4.徽章組件的應(yīng)用演示在頁面中依次運(yùn)用上述10種徽章類，以便更好地對比不同顏色、形狀的徽章組件的展示效果。（二）默認(rèn)警告框1.默認(rèn)警告框在Bootstrap4中，1個(gè)應(yīng)用了.alert類的<div>元素可定義1個(gè)默認(rèn)的白色警告框，但默認(rèn)的白色警告框并無具體意義，開發(fā)者應(yīng)該將.alert-*警告框顏色類與.alert類組合創(chuàng)建出有意義的警告框組件。Bootstrap4中為警告框組件設(shè)置了8種顏色類，其可取顏色值與其他顏色工具類基本一致，包括primary、secondary、success、danger、warning、info、light、dark等。2.語法格式警告框組件的應(yīng)用語法格式如下所示。<divclass="alertalert-primary">一個(gè)簡單的警告框!</div>3.應(yīng)用演示在頁面中依次運(yùn)用上述8種警告框顏色類。（三）警告框附加內(nèi)容1.警告框附加內(nèi)容警告框組件還可以包含其他HTML元素，如標(biāo)題、段落、分割符等。通常開發(fā)者需要在警告框中加入鏈接，以便讓用戶跳轉(zhuǎn)到某個(gè)位置或新的頁面。當(dāng)警告框中包含<a>超鏈接時(shí)，開發(fā)者需要為超鏈接應(yīng)用.alert-link工具類，使超鏈接與警告框在顏色上保持協(xié)調(diào)。2.語法格式應(yīng)用警告框組件的附加內(nèi)容，其語法格式如下所示。<divclass="alertalert-success"><h4class="alert-heading">標(biāo)題</h4><p>段落文字</p><hr><ahref=”#”class=”alert-link”></a></div>3.應(yīng)用演示以“燈影永留傳”為主題設(shè)計(jì)頁面，為警告框嵌入標(biāo)題、段落文字、分隔線、超鏈接等，實(shí)現(xiàn)警告框組件附加內(nèi)容的應(yīng)用示范。（四）警告框狀態(tài)1.警告框狀態(tài)將任意文本和一個(gè)可選的關(guān)閉按鈕組合在一起，就能組成一個(gè)可關(guān)閉的警告框。實(shí)現(xiàn)警告框的關(guān)閉行為主要有2種方式，如通過Bootstrap4內(nèi)置的工具類實(shí)現(xiàn)關(guān)閉功能，通過JavaScript為警告框添加關(guān)閉功能。2.Bootstrap4內(nèi)置工具類觸發(fā)為警告框添加一個(gè)Bootstrap4的.alert-dismissible內(nèi)置類和一個(gè)關(guān)閉按鈕，使警告框組件的右側(cè)增加1個(gè)額外空間放置關(guān)閉按鈕，即可實(shí)現(xiàn)警告框組件的關(guān)閉功能。關(guān)閉按鈕應(yīng)基于<button>按鈕或<a>超鏈接進(jìn)行設(shè)計(jì)，在關(guān)閉按鈕中添加.close類以及data-dismiss屬性可實(shí)現(xiàn)警告框的關(guān)閉操作。3.Bootstrap4內(nèi)置工具類觸發(fā)語法格式基于<button>實(shí)現(xiàn)關(guān)閉警告框的語法格式如下所示。<divclass="alertalert-dangeralert-dismissble"><buttontype="button"class="close"data-dismiss="alert">×</button>失敗警告</div>基于<a>實(shí)現(xiàn)關(guān)閉警告框的語法格式如下所示。<divclass="alertalert-dangeralert-dismissble"><ahref="#"class="close"data-dismiss="alert">×</a>失敗警告</div>4.Bootstrap4內(nèi)置工具類觸發(fā)應(yīng)用演示以“馬耳他中學(xué)‘中國角’”為主題設(shè)計(jì)關(guān)閉警告框，分別使用<button>按鈕、<a>超鏈接實(shí)現(xiàn)關(guān)閉警告框。值得注意的是，在頁面中單擊警告框組件的關(guān)閉按鈕后，該警告框組件即被刪除，此處的“刪除”不僅指頁面上元素消失，還指DOM節(jié)點(diǎn)上對應(yīng)元素被刪除。如需在關(guān)閉警告框時(shí)展示淡入、淡出的動畫效果，可在警告框容器上同時(shí)添加.fade類和.show類。5.通過JavaScript方法觸發(fā)關(guān)閉行為在Bootstrap4中，警告框組件暴露了一些常用的JavaScript方法，如$().alert()、$().alert('close')、$().alert('dispose')等，開發(fā)者可利用這些方法對警告框組件進(jìn)行關(guān)閉、銷毀等操作。$().alert()：用于使警告框能夠監(jiān)聽具有data-dismiss="alert"屬性的子元素上的點(diǎn)擊事件。（如果使用的是data屬性API來自動初始化組件的話，則不需要調(diào)用此函數(shù)。）$().alert('close')：關(guān)閉警告框并將其從DOM中刪除。$().alert('dispose')：銷毀某個(gè)元素的警告框（alert）6.通過JavaScript方法觸發(fā)關(guān)閉行為-語法格式通過組件方法實(shí)現(xiàn)警告框關(guān)閉操作的語法格式如下所示。$('.alert').alert('close')7.通過JavaScript方法觸發(fā)關(guān)閉行為-應(yīng)用演示以“青山不老，軍魂永駐”為主題設(shè)計(jì)頁面內(nèi)容，使用組件本身所暴露的JavaScript方法實(shí)現(xiàn)警告框的關(guān)閉操作。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第七章課后作業(yè)。第二學(xué)時(shí)（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)徽章組件、警告框組件的應(yīng)用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—2分1.完成徽章組件的案例練習(xí)（0.5分）（1）參照教材【例7.1】徽章類-完成練習(xí)。2.完成警告框組件的案例練習(xí)（1.5分）（1）參照教材【例7.2】警告框顏色類-完成練習(xí)。（2）參照教材【例7.3】警告框附加內(nèi)容-完成練習(xí)。（3）參照教材【例7.4】Bootstrap4內(nèi)置工具類實(shí)現(xiàn)關(guān)閉警告框-完成練習(xí)。（4）參照教材通過JavaScript方法觸發(fā)關(guān)閉行為的代碼-完成練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為2分，并納入平時(shí)成績中。第三、四學(xué)時(shí)（圖標(biāo)組件、按鈕組件）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握Bootstrap的按鈕組件掌握Bootstrap的按鈕組件風(fēng)格掌握Bootstrap的基本按鈕組掌握Bootstrap的基本按鈕組掌握Bootstrap按鈕組的布局與樣式二、知識講解（一）圖標(biāo)Bootstrap擁有一個(gè)包含1600多個(gè)免費(fèi)、高質(zhì)量圖標(biāo)的開源圖標(biāo)庫，開發(fā)者可通過多種方式使用這些圖標(biāo)，本節(jié)內(nèi)容主要介紹Bootstrap的字體圖標(biāo)和旋轉(zhuǎn)圖標(biāo)。1.字體圖標(biāo)安裝（1）安裝Bootstrap圖標(biāo)庫已被發(fā)布到了NPM中，開發(fā)者不僅可以通過NPM的方式進(jìn)行安裝，還可以通過CDN鏈接進(jìn)行安裝。（1）通過NPM進(jìn)行安裝，執(zhí)行如下命令。npmibootstrap-icons（2）利用公共的CDN來安裝Bootstrap圖標(biāo)庫。通過<link>標(biāo)簽將字體圖標(biāo)的樣式表添加到網(wǎng)頁的<head>標(biāo)簽內(nèi)或通過CSS的@import指令加載圖標(biāo)字體的樣式表。具體語法格式如下所示。<linkrel="stylesheet"href="/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">@importurl("/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");2.字體圖標(biāo)應(yīng)用應(yīng)用字體圖標(biāo)時(shí)，在頁面中引入對應(yīng)圖標(biāo)字體文件，根據(jù)需要為HTML標(biāo)簽添加對應(yīng)的class名稱或進(jìn)入圖標(biāo)詳情頁復(fù)制字體圖標(biāo)的HTML元代碼并粘貼至頁面指定位置即可。可在按鈕、標(biāo)題或input表單等元素中使用字體圖標(biāo)。以<button>按鈕為例，在其中添加cart圖標(biāo)，進(jìn)行字體圖標(biāo)的應(yīng)用說明。新建一個(gè)HTML文件，以外鏈的方式在該文件中引入bootstrap框架的相關(guān)資源文件，并通過CDN引入字體圖標(biāo)的樣式表。（2）進(jìn)入Bootstrap4的圖標(biāo)庫頁面，單擊名為“cart”的圖標(biāo)。（3）跳轉(zhuǎn)至“cart”圖標(biāo)的詳情頁，復(fù)制字體圖標(biāo)的HTML代碼，代碼如下所示。<iclass="bibi-cart"></i>（4）將字體圖標(biāo)的HTML代碼粘貼至頁面指定位置。3.旋轉(zhuǎn)圖標(biāo)Bootstrap的旋轉(zhuǎn)圖標(biāo)（Spinners，亦稱旋轉(zhuǎn)器）用于指示組件或頁面的加載狀態(tài)，該組件使用HTML和CSS實(shí)現(xiàn)，無任何JavaScript代碼。旋轉(zhuǎn)圖標(biāo)組件不屬于Bootstrap4圖標(biāo)庫，應(yīng)用旋轉(zhuǎn)圖標(biāo)組件時(shí)無需引入圖標(biāo)庫。（1）旋轉(zhuǎn)圖標(biāo)的結(jié)構(gòu)組成出于增強(qiáng)可及性的目的，每個(gè)旋轉(zhuǎn)圖標(biāo)都設(shè)置了role="status"屬性并嵌套1個(gè)<span>標(biāo)簽，具體語法格式如下所示。<divclass="旋轉(zhuǎn)圖標(biāo)類型"role="status"><spanclass="sr-only">Loading...</span></div>（2）旋轉(zhuǎn)圖標(biāo)分類旋轉(zhuǎn)圖標(biāo)組件的外觀、顏色可通過Bootstrap4提供的工具類進(jìn)行設(shè)置。.spinner-border：用于定義環(huán)狀旋轉(zhuǎn)圖標(biāo)，輕量級的加載指示器?？墒褂梦谋绢伾ぞ哳惛钠渫庥^。.spinner-grow：用于定義增長式旋轉(zhuǎn)圖標(biāo)，該圖標(biāo)不是在旋轉(zhuǎn)，而是反復(fù)地由小變大。可使用文本顏色工具類更改其外觀。4.旋轉(zhuǎn)圖標(biāo)設(shè)置Bootstrap4中的旋轉(zhuǎn)圖標(biāo)使用rem單位來設(shè)置其尺寸，使用display:inline-flex設(shè)置其布局，因此開發(fā)者可以輕松地調(diào)整圖標(biāo)的尺寸，使其快速對齊，具體說明如下所示?？墒褂妙愃?m-5的外邊距（margin）工具類為旋轉(zhuǎn)圖標(biāo)添加外邊距。可使用flexbox工具類、float工具類和文本對齊工具類將旋轉(zhuǎn)圖標(biāo)放置到需要的位置上，實(shí)現(xiàn)旋轉(zhuǎn)圖標(biāo)的快速對齊?？蔀樾D(zhuǎn)圖標(biāo)添加.spinner-border-sm和.spinner-grow-sm類實(shí)現(xiàn)小尺寸的旋轉(zhuǎn)圖標(biāo)，以便在其他組件中應(yīng)用旋轉(zhuǎn)圖標(biāo)。在按鈕中使用旋轉(zhuǎn)圖標(biāo)用于指示當(dāng)前正在處理或正在進(jìn)行的操作，還可將旋轉(zhuǎn)圖標(biāo)中包含的“Loading”文字去掉，并將按鈕中包含的文字作為提示性信息。（二）按鈕組件按鈕是網(wǎng)頁中不可或缺的一個(gè)組件，按鈕組件廣泛應(yīng)用于表單、對話框、下拉菜單等元素中，如網(wǎng)站首頁中的“登錄”、“注冊”按鈕等。1.按鈕Bootstrap4內(nèi)置的.btn類可用于定義按鈕組件，.btn類不僅可以應(yīng)用于<button>標(biāo)簽中，還可以應(yīng)用于<a>、<input>等標(biāo)簽中實(shí)現(xiàn)按鈕效果。（1）語法格式按鈕組件創(chuàng)建類的語法格式如下所示。<buttonclass="btn">按鈕</button>（2）應(yīng)用演示以科技考古為主題，在頁面中將.btn類分別應(yīng)用于<button>按鈕、<a>超鏈接和<input>表單，展現(xiàn).btn類在不同元素上實(shí)現(xiàn)的按鈕效果。2.按鈕風(fēng)格設(shè)計(jì)Bootstrap4中內(nèi)置了大量工具類，用于設(shè)置按鈕樣式，包括按鈕背景顏色、邊框顏色、大小和狀態(tài)等，下面將介紹Bootstrap4為按鈕組件定義的常用樣式類。（1）按鈕顏色Bootstrap4為按鈕組件設(shè)計(jì)了.btn-*類，即背景顏色類，按鈕的每種背景顏色都有自己的語義目的，Bootstrap4為按鈕組件設(shè)計(jì)了.btn-outline-*類，即邊框顏色類。當(dāng)開發(fā)者需要使用按鈕組件，但不希望按鈕帶有背景顏色時(shí)，可將按鈕的背景顏色類替換為邊框顏色類。.btn-*類與.btn-outline-*類的可取顏色值與其他顏色工具類基本一致，包括primary、secondary、success、danger、warning、info、light、dark等。應(yīng)用.btn-outline-*類的按鈕，其背景色默認(rèn)為白色，當(dāng)鼠標(biāo)懸浮于按鈕之上時(shí)，按鈕的背景與邊框保持同色。需要注意，所有添加.btn-outline-*類的按鈕，其文本顏色與邊框顏色保持一致。鼠標(biāo)懸浮狀態(tài)下，添加.btn-outline-light與.btn-outline-dark類的按鈕，其文本顏色與邊框色形成反色。（2）語法格式按鈕組件顏色設(shè)計(jì)的語法格式如下所示。<buttontype="button"class="btnbtn-primary">按鈕文字</button><buttontype="button"class="btnbtn-outline-primary">按鈕文字</button>創(chuàng)建按鈕組件時(shí)，需要為<button>標(biāo)簽添加type="button"屬性，且為按鈕組件應(yīng)用顏色類的前提是通過.btn類已創(chuàng)建了一個(gè)按鈕組件。（3）應(yīng)用演示在頁面中分別應(yīng)用按鈕背景顏色類和按鈕邊框顏色類，以便展現(xiàn)多種按鈕風(fēng)格。3.按鈕尺寸與狀態(tài)為提升用戶體驗(yàn)，開發(fā)者會根據(jù)網(wǎng)頁布局選擇更大或更小的按鈕。Bootstrap4中內(nèi)置了一些按鈕尺寸類，包括.btn-lg、.btn-sm和.btn-block類。（1）按鈕尺寸類.btn-lg 用于定義大號按鈕。.btn-sm 用于定義大小號按鈕。.btn-block 用于定義塊級按鈕，使按鈕跨域父容器的整個(gè)寬度。（2）語法格式按鈕組件尺寸、狀態(tài)設(shè)計(jì)的語法格式如下所示。<buttontype="button"class="btnbtn-infobtn-lg">大號按鈕</button><buttontype="button"class="btnbtn-infoactive">激活按鈕</button><buttontype="button"class="btnbtn-info"disabled>禁用按鈕</button>（3）應(yīng)用演示在頁面中分別應(yīng)用按鈕尺寸類和按鈕狀態(tài)類，對比不同尺寸、不同狀態(tài)的按鈕組件的顯示效果。（三）基本按鈕組按鈕組指的是通過群組的方式將一系列按鈕結(jié)合起來，放置于同一行中，以產(chǎn)生類似于單選按鈕組或復(fù)選按鈕組的組合效果。Bootstrap4內(nèi)置的.btn-group類可用于定義按鈕組，應(yīng)用.btn-group類的父容器所包含的一系列<button>、<a>標(biāo)簽即可生成按鈕組。1.語法格式按鈕組創(chuàng)建類的語法格式如下所示。<divclass="btn-group"><buttontype="button"class="btnbtn-secondary">按鈕1</button><buttontype="button"class="btnbtn-secondary">按鈕2</button></div>2.演示說明在頁面中為1個(gè)div塊元素應(yīng)用.btn-group類，實(shí)現(xiàn)按鈕組容器的創(chuàng)建。在容器中放置3個(gè)<button>按鈕，實(shí)現(xiàn)一個(gè)標(biāo)準(zhǔn)的按鈕組組件的創(chuàng)建.（三）按鈕組的布局與樣式Bootstrap4按鈕組主要包括基本按鈕組、工具欄按鈕組、嵌套按鈕組、垂直布局按鈕組以及按鈕組尺寸設(shè)計(jì)等方面內(nèi)容?；景粹o組可通過.btn-group類實(shí)現(xiàn)，具體應(yīng)用見本書7.4.3節(jié)。本節(jié)主要介紹與按鈕組布局、樣式相關(guān)的內(nèi)容。1.工具類按鈕組工具欄按鈕組將多個(gè)btn-group基本按鈕組放置到1個(gè).btn-toolbar類創(chuàng)建工具欄按鈕組容器中，形成類似工具欄的樣式，從而獲得功能更復(fù)雜的組件。開發(fā)者可根據(jù)需要使用邊距工具類來分隔按鈕組之間的空間。工具欄按鈕組的語法格式如下所示。<divclass="btn-toolbar"><divclass="btn-groupmr-2"><buttontype="button"class="btnbtn-secondary">1</button><buttontype="button"class="btnbtn-secondary">2</button></div><divclass="btn-groupmr-2"><buttontype="button"class="btnbtn-secondary">3</button><buttontype="button"class="btnbtn-secondary">4</button></div></div>2.嵌套按鈕組將一個(gè)下拉菜單組件放在一個(gè)按鈕組中，可實(shí)現(xiàn)按鈕組與下拉菜單組件的嵌套效果。需要注意，在Bootstrap4中實(shí)現(xiàn)某些組件的動態(tài)效果需要引入popper.js文件，如下拉菜單、彈窗、工具提示等。開發(fā)者可在頁面下載最新的popper.js文件。3按鈕組輔助類Bootstrap4定義了一系列關(guān)于按鈕組的輔助類，用于實(shí)現(xiàn)控制按鈕組的布局方式、尺寸設(shè)置等。通過按鈕組輔助類可快速實(shí)現(xiàn)按鈕組的垂直分布以及尺寸調(diào)整。.btn-group-vertical 使一組按鈕垂直堆疊，實(shí)現(xiàn)垂直分布的按鈕組。.btn-group-lg 設(shè)置按鈕組內(nèi)所有按鈕為大號按鈕。.btn-group-sm 設(shè)置按鈕組內(nèi)所有按鈕為小號按鈕。4.按鈕組輔助類的語法格式按鈕組輔助類的語法格式如下所示。<divclass="btn-group-vertical"><buttontype="button"class="btn>按鈕</button></div><divclass="btn-groupbtn-group-lg"><buttontype="button"class="btn>按鈕</button></div>需要注意，應(yīng)用.btn-group-vertical類時(shí)，無需添加.btn-group類。應(yīng)用.btn-group-{lg|sm}類時(shí)，需先應(yīng)用.btn-group類生成按鈕組容器。5.應(yīng)用演示（1）工具欄按鈕組應(yīng)用.btn-toolbar類創(chuàng)建工具欄按鈕組容器，并通過工具欄按鈕組實(shí)現(xiàn)1個(gè)頁面分頁器。（2）嵌套按鈕組以“人民的江山”為主題設(shè)計(jì)1個(gè)嵌套按鈕組。應(yīng)用.btn-toolbar類創(chuàng)建工具欄按鈕組容器，并通過工具欄按鈕組實(shí)現(xiàn)1個(gè)頁面分頁器（3）按鈕輔助類以“鄉(xiāng)村振興”為主題設(shè)計(jì)頁面，在頁面中分別應(yīng)用上述3種按鈕輔助類。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第七章課后作業(yè)。第五學(xué)時(shí)（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)Bootstrap的圖標(biāo)組件、按鈕組件的使用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—2分1.完成字體圖標(biāo)組件的案例練習(xí)（0.5分）（1）參照教材【例7.5】字體圖標(biāo)應(yīng)用-完成對應(yīng)練習(xí)。2.完成旋轉(zhuǎn)圖標(biāo)組件的案例練習(xí)（0.5分）（1）參照教材【例7.6】旋轉(zhuǎn)圖標(biāo)分類-完成對應(yīng)練習(xí)。3.完成按鈕組件的案例練習(xí)（1分）（1）參照教材【例7.8】按鈕顏色類-完成對應(yīng)練習(xí)。（2）參照教材【例7.9】按鈕尺寸與狀態(tài)類-完成對應(yīng)練習(xí)。（3）參照教材【例7.10】按鈕組創(chuàng)建類-完成對應(yīng)練習(xí)。（4）參照教材【例7.11】工具欄按鈕組-完成對應(yīng)練習(xí)。（5）參照教材【例7.12】嵌套按鈕組-完成對應(yīng)練習(xí)。（6）參照教材【例7.13】按鈕輔助類-完成對應(yīng)練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為2分，并納入平時(shí)成績中。第六、七學(xué)時(shí)（下拉菜單、導(dǎo)航組件）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握Bootstrap下拉菜單的基本結(jié)構(gòu)掌握Bootstrap下拉菜單的輔助類掌握Bootstrap下拉菜單的應(yīng)用掌握Bootstrap導(dǎo)航的基本結(jié)構(gòu)掌握Bootstrap的導(dǎo)航輔助類掌握Bootstrap的導(dǎo)航選項(xiàng)卡二、知識講解（一）下拉菜單網(wǎng)頁交互的時(shí)候經(jīng)常會用到下拉菜單組件，下拉菜單可節(jié)省網(wǎng)頁排版空間，使網(wǎng)頁布局更加簡潔有序。Bootstrap4提供了用于顯示鏈接列表的、可切換的、有上下文的菜單，可滿足在各種交互狀態(tài)下的菜單展示需要。（二）下拉菜單的基本結(jié)構(gòu)Bootstrap4定義的下拉菜單組件具有固定結(jié)構(gòu)，包括.dropdown類定義的下拉菜單容器，<a>或<button>實(shí)現(xiàn)的觸發(fā)按鈕以及.dropdown-menu類實(shí)現(xiàn)的下拉菜單內(nèi)容容器，且下拉菜單內(nèi)容容器中應(yīng)包含1個(gè)或多個(gè)由<a>或<button>構(gòu)建的dropdown-item菜單項(xiàng)。1.基本結(jié)構(gòu)下拉菜單的基本結(jié)構(gòu)如下所示。<divclass="dropdown"><button>觸發(fā)按鈕</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">菜單項(xiàng)</a><buttontype="button"class="dropdown-item">菜單項(xiàng)</button></div></div>需要注意，當(dāng)下拉菜單組件未被包含在下拉菜單容器中時(shí)，可應(yīng)用聲明為position:relative的元素作為下拉菜單容器。<divstyle="position:relative;"><button>觸發(fā)按鈕</button><divclass="dropdown-menu">...</div></div>2.下拉菜單的交互行為應(yīng)用下拉菜單組件時(shí)，應(yīng)在上述基本結(jié)構(gòu)的基礎(chǔ)上，為觸發(fā)按鈕或鏈接應(yīng)用.dropdown-toggle類，生成一個(gè)三角形的指示圖標(biāo)。需要添加data-toggle="dropdown"屬性激活下拉菜單的交互行為，具體語法如下所示。<divclass="dropdown"><buttontype="button"class="btnbtn-secondarydropdown-toggle"data-toggle="dropdown">觸發(fā)按鈕</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">菜單項(xiàng)</a><buttontype="button"class="dropdown-item">菜單項(xiàng)</button></div></div>（三）下拉菜單輔助類Bootstrap4定義了一系列關(guān)于下拉菜單的輔助工具類，用于快速設(shè)置菜單樣式、菜單展開方向、菜單分割線、菜單狀態(tài)以及菜單對齊方向，如.dropdown-toggle-split、.dropleft、.dropright等。1.下拉菜單輔助類介紹.dropdown-toggle-split：應(yīng)用于觸發(fā)按鈕。下拉菜單容器應(yīng)用.btn-group類，通過1個(gè)基本觸發(fā)按鈕和1個(gè)空白觸發(fā)按鈕實(shí)現(xiàn)分裂式按鈕下拉菜單。該輔助類應(yīng)用于空白觸發(fā)按鈕。.dropleft：應(yīng)用于下拉菜單容器，替換.dropdown類，使菜單激活后向左展開。.dropright ：應(yīng)用于下拉菜單容器，替換.dropdown類，使菜單激活后向右展開。.dropup ：應(yīng)用于下拉菜單容器，替換.dropdown類，使菜單激活后向上展開。.dropdown-menu-right ：應(yīng)用于下拉菜單內(nèi)容容器。使下拉菜單內(nèi)容容器靠右對齊。.dropdown-divider ：應(yīng)用于與菜單項(xiàng)同級的、下拉菜單內(nèi)容容器的子元素。通過添加dropdown-divider類的容器（div）構(gòu)造分割線，對菜單內(nèi)容進(jìn)行分割。.active：應(yīng)用于菜單項(xiàng)。使當(dāng)前菜單項(xiàng)處于激活狀態(tài)，即菜單項(xiàng)表現(xiàn)為被按下的效果，使其背景變暗或顯色。.disabled：應(yīng)用于菜單項(xiàng)。使當(dāng)前菜單項(xiàng)處于禁用狀態(tài)，即菜單項(xiàng)文字顏色變淺，不具有交互性，單擊菜單項(xiàng)無響應(yīng)、不會變色。2.語法格式下拉菜單輔助類的語法格式如下所示。<divclass="dropupbtn-group"><buttontype="button"class="btnbtn-primary">觸發(fā)按鈕</button><buttonclass="btndropdown-toggle-splitdropdown-toggle"type="button"data-toggle="dropdown"></button><divclass="dropdown-menudropdown-menu-right"><aclass="dropdown-itemactive"href="#">菜單項(xiàng)1</a><divclass="dropdown-divider"></div></div></div>3.應(yīng)用演示以“東北振興”為主題設(shè)計(jì)下拉菜單，在頁面中依次運(yùn)用Bootstrap4定義的上述下拉菜單輔助類，展現(xiàn)多種菜單樣式。（四）下拉菜單偏移量應(yīng)用1.圓角邊框介紹在下拉菜單中不僅可以通過輔助類來設(shè)置菜單的對齊方向和彈出方向，還可以通過data-offset="x,y"屬性來設(shè)置菜單內(nèi)容容器的偏移量，通過data-reference="parent"屬性使菜單內(nèi)容容器相對于觸發(fā)按鈕的父級容器進(jìn)行定位。在下拉菜單中，菜單內(nèi)容容器中不僅可以包含菜單項(xiàng)，還可以包含菜單項(xiàng)標(biāo)題、文本、表單等。2.語法格式下拉菜單data-offset="x,y"屬性的語法格式如下所示。<divclass="dropdown"><buttondata-offset="100,50">觸發(fā)按鈕</button><divclass="dropdown-menu"><h3>菜單標(biāo)題</h3><buttontype="button"class="dropdown-item">菜單項(xiàng)</button><p>菜單文本<p></div></div>3.應(yīng)用演示以“小康生活”為主題設(shè)計(jì)下拉菜單，在頁面中依次運(yùn)用Bootstrap4定義的上述下拉菜單輔助類，展現(xiàn)多種菜單樣式。（五）導(dǎo)航組件導(dǎo)航是一個(gè)成熟網(wǎng)站的必備功能，實(shí)現(xiàn)一個(gè)美觀的導(dǎo)航組件，需要耗費(fèi)開發(fā)者的大量精力。Bootstrap4框架設(shè)計(jì)的導(dǎo)航組件，風(fēng)格多樣、應(yīng)用便捷，可極大地降低開發(fā)的時(shí)間成本。本節(jié)重點(diǎn)介紹Bootstrap4框架的導(dǎo)航組件，在Bootstrap4框架中所有導(dǎo)航組件均通過.nav類來實(shí)現(xiàn)，針對不同類型的導(dǎo)航再增加相應(yīng)的輔助類即可。（六）導(dǎo)航基本結(jié)構(gòu)在Bootstrap中所有導(dǎo)航組件都具有相同的結(jié)構(gòu)，它們基于<ul>、<li>以及<a>標(biāo)簽實(shí)現(xiàn)。為<ul>應(yīng)用.nav類構(gòu)造1個(gè)導(dǎo)航容器，為<li>應(yīng)用.nav-item類構(gòu)造1個(gè)導(dǎo)航項(xiàng)，并為導(dǎo)航項(xiàng)中的<a>鏈接應(yīng)用.nav-link類。1.基本結(jié)構(gòu)導(dǎo)航組件的基本結(jié)構(gòu)如下所示。<ulclass="nav"><liclass="nav-item"><aclass="nav-linkactive"href="#">鏈接</a></li></ul>在Bootstrap4中，.nav類不僅可以應(yīng)用于<ul>標(biāo)簽，還可應(yīng)用于其他元素，如<nav>、<div>等。當(dāng).nav類應(yīng)用于<nav>標(biāo)簽時(shí)，導(dǎo)航項(xiàng)與導(dǎo)航鏈接的行為表現(xiàn)相同，因此在<nav>結(jié)構(gòu)中可省略.nav-item類的參與。<navclass="nav"><aclass="nav-linkactive"href="#">Active</a></nav>2.演示說明根據(jù)導(dǎo)航的基本結(jié)構(gòu)在頁面中實(shí)現(xiàn)一個(gè)簡單的導(dǎo)航組件。（六）導(dǎo)航輔助類Bootstrap4定義了一系列關(guān)于導(dǎo)航的輔助工具類，用于快速設(shè)置導(dǎo)航布局、導(dǎo)航風(fēng)格以及導(dǎo)航項(xiàng)的填充與對齊等。1.輔助類說明.justify-content-center 應(yīng)用于導(dǎo)航容器。導(dǎo)航默認(rèn)左對齊，此處設(shè)置導(dǎo)航水平居中。nav組件是采用Flexbox布局構(gòu)建的，導(dǎo)航布局可借助Flexbox布局的工具類實(shí)現(xiàn)。.justify-content-end 應(yīng)用于導(dǎo)航容器。設(shè)置導(dǎo)航右對齊。.flex-column 應(yīng)用于導(dǎo)航容器。設(shè)置導(dǎo)航垂直對齊，可定義響應(yīng)式.flex-{sm|md|lg|xl}-column。.nav-tabs 應(yīng)用于導(dǎo)航容器。實(shí)現(xiàn)標(biāo)簽頁導(dǎo)航。.nav-pills 應(yīng)用于導(dǎo)航容器。實(shí)現(xiàn)膠囊式導(dǎo)航。.nav-fill 應(yīng)用于導(dǎo)航容器。使含有.nav-item類的導(dǎo)航項(xiàng)按比例分配導(dǎo)航的所有水平空間。.active 應(yīng)用于導(dǎo)航項(xiàng)或?qū)Ш芥溄?。使?dāng)前導(dǎo)航項(xiàng)處于激活狀態(tài)。.disabled 應(yīng)用于導(dǎo)航項(xiàng)或?qū)Ш芥溄?。使?dāng)前導(dǎo)航項(xiàng)處于禁用狀態(tài)。2.語法格式導(dǎo)航輔助類的語法格式如下所示。<ulclass="navjustifiy-content-centernav-pillsnav-fill"><liclass="nav-item"><aclass="nav-linkactive"href="#">Active</a></li></ul>3.應(yīng)用演示以“大思政課”為主題設(shè)計(jì)頁面導(dǎo)航，在頁面中依次運(yùn)用Bootstrap4定義的上述導(dǎo)航輔助類，展現(xiàn)多種導(dǎo)航樣式。（七）導(dǎo)航選項(xiàng)卡導(dǎo)航選項(xiàng)卡類似于桌面系統(tǒng)中的tab欄，切換tab項(xiàng)可切換對應(yīng)內(nèi)容框中的內(nèi)容。在Bootstrap4框架中，導(dǎo)航選項(xiàng)卡一般在標(biāo)簽頁或膠囊式導(dǎo)航組件的基礎(chǔ)上實(shí)現(xiàn)。1.導(dǎo)航選項(xiàng)卡實(shí)現(xiàn)實(shí)現(xiàn)導(dǎo)航選項(xiàng)卡，需要為每個(gè)導(dǎo)航鏈接添加data-toggle="tabs"或data-toggle="pills"屬性，以便激活導(dǎo)航組件的交互行為。在導(dǎo)航組件基本結(jié)構(gòu)的基礎(chǔ)上，應(yīng)用.tab-content類構(gòu)造內(nèi)容包含框，應(yīng)用.tab-pane類在內(nèi)容包含框中插入與導(dǎo)航鏈接所對應(yīng)的子內(nèi)容框，且每個(gè)子內(nèi)容框都具有唯一的id名。在導(dǎo)航項(xiàng)中，每個(gè)導(dǎo)航鏈接的錨鏈接值與子內(nèi)容框id名一一對應(yīng)。2.導(dǎo)航選項(xiàng)卡演示以“社會主義文化強(qiáng)國建設(shè)”為主題設(shè)計(jì)標(biāo)簽頁選項(xiàng)卡。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第七章課后作業(yè)。第八學(xué)時(shí)（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)Bootstrap的下拉菜單組件、導(dǎo)航組件的使用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—3分1.完成下拉菜單組件的案例練習(xí)（1.5分）（1）參照教材【例7.14】基本下拉菜單-完成對應(yīng)練習(xí)。（2）參照教材【例7.15】下拉菜單輔助類-完成對應(yīng)練習(xí)。（3）參照教材【例7.16】下拉菜單偏移量應(yīng)用-完成對應(yīng)練習(xí)。2.完成導(dǎo)航組件的案例練習(xí)（1.5分）（1）參照教材【例7.17】基本導(dǎo)航-完成對應(yīng)練習(xí)。（2）參照教材【例7.18】導(dǎo)航輔助類-完成對應(yīng)練習(xí)。（3）參照教材【例7.19】標(biāo)簽頁選項(xiàng)卡-完成對應(yīng)練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為3分，并納入平時(shí)成績中。第九、十學(xué)時(shí)（面包屑、導(dǎo)航欄、進(jìn)度條、分頁）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握Bootstrap的面包屑導(dǎo)航了解Bootstrap導(dǎo)航欄的運(yùn)行特點(diǎn)掌握Bootstrap的導(dǎo)航欄輔助類掌握Bootstrap的進(jìn)度條組件二、知識講解（一）面包屑導(dǎo)航1.面包屑導(dǎo)航介紹面包屑導(dǎo)航（Breadcrumb）用于指示當(dāng)前頁面在導(dǎo)航層級中的位置，可通過CSS樣式為各導(dǎo)航條目之間自動添加分隔符。2.面包屑導(dǎo)航結(jié)構(gòu)Bootstrap4定義的面包屑導(dǎo)航組件具有固定結(jié)構(gòu)，該組件基于<nav>、<ol>>以及<li>標(biāo)簽實(shí)現(xiàn)。創(chuàng)建面包屑導(dǎo)航，需要為<ol>應(yīng)用.breadcrumb類，為<li>應(yīng)用.breadcrumb-item類。面包屑導(dǎo)航的基本結(jié)構(gòu)如下所示。<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">首頁</a></li></ol></nav>3.面包屑導(dǎo)航分隔符設(shè)置面包屑導(dǎo)航的分隔符樣式可通過CSS進(jìn)行自定義，通過CSS樣式代碼覆蓋Bootstrap4中的分隔符樣式。在::before偽元素的content屬性中添加自定義的分隔符，具體代碼如下所示。<style>/*間隔符設(shè)計(jì)*/.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:0.4rem;color:#898f94;content:">";}</style>（二）導(dǎo)航欄導(dǎo)航欄是一個(gè)將商標(biāo)、導(dǎo)航以及其它元素簡單放置到一個(gè)簡潔導(dǎo)航頁頭的容器代碼組合，是一個(gè)網(wǎng)頁的“大腦”，利用導(dǎo)航欄可便捷的訪問到所需的內(nèi)容。1.導(dǎo)航欄的運(yùn)行特點(diǎn)（1）導(dǎo)航欄是實(shí)現(xiàn)應(yīng)用程序或網(wǎng)站導(dǎo)航標(biāo)題的響應(yīng)式基礎(chǔ)組件。Bootstrap4導(dǎo)航欄在移動設(shè)備的可視區(qū)域中以折疊方式呈現(xiàn)，當(dāng)可視區(qū)域的寬度增加并跨越響應(yīng)斷點(diǎn)時(shí)，導(dǎo)航欄以水平布局方式呈現(xiàn)。（2）導(dǎo)航欄中的默認(rèn)內(nèi)容遵循流式布局，可使用container容器來限制其水平寬度。（3）可使用Bootstrap提供的邊距類和Flex布局樣式來控制導(dǎo)航欄元素項(xiàng)的間距和對齊方式。2.導(dǎo)航欄輔助類在Bootstrap框架中，所有導(dǎo)航欄組件均使用.navbar類來實(shí)現(xiàn)，可使用.navbar-expand{-sm|-md|-lg|-xl}類實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式布局，若要設(shè)計(jì)不同類型的導(dǎo)航欄僅需增加相應(yīng)的樣式即可。在Bootstrap中，導(dǎo)航欄組件是由許多子組件構(gòu)成的，Bootstrap定義了許多輔助類服務(wù)于導(dǎo)航欄容器和導(dǎo)航欄子組件，具體如下所示。.navbar：用于定義一個(gè)可包含眾多子組件的導(dǎo)航欄容器。.navbar-expand{-sm|-md|-lg|-xl}：應(yīng)用于導(dǎo)航欄容器。實(shí)現(xiàn)導(dǎo)航欄容器的響應(yīng)式布局。當(dāng)屏幕寬度低于響應(yīng)斷點(diǎn)時(shí)，隱藏部分導(dǎo)航內(nèi)容?？赏ㄟ^激活折疊組件顯示導(dǎo)航欄的隱藏部分。.navbar-brand：應(yīng)用于導(dǎo)航欄子項(xiàng)目。用于為導(dǎo)航欄設(shè)置LOGO或項(xiàng)目名稱。.navbar-nav：用于實(shí)現(xiàn)輕便的導(dǎo)航菜單，實(shí)現(xiàn)對下拉菜單的支持。.navbar-toggler：應(yīng)用于折疊導(dǎo)航按鈕，可實(shí)現(xiàn)折疊插件和導(dǎo)航切換行為。.form-inline：用于控制操作表單。.navbar-text：可實(shí)現(xiàn)文本字符串的垂直對齊，并對其水平間距進(jìn)行優(yōu)化。.collapse與.navbar-collapse：通過父容器的斷點(diǎn)進(jìn)行分組和隱藏導(dǎo)航列內(nèi)容。在響應(yīng)式導(dǎo)航欄中，需要折疊的導(dǎo)航欄內(nèi)容必須包裹在應(yīng)用.collapse類與.navbar-collapse類的<div>中。.fixed-{top|bottom}： 通過Bootstrap4定位類中的特殊定位類，可輕松實(shí)現(xiàn)導(dǎo)航欄的固定定位，將導(dǎo)航欄固定到頂部或底部。.navbar-{light|dark}：用于設(shè)計(jì)導(dǎo)航欄主題顏色，深色或淺色背景，加此樣式可以突顯文字。3.導(dǎo)航欄組件的基本結(jié)構(gòu)導(dǎo)航欄組件的的基本結(jié)構(gòu)如下所示。<navclass="navbarnavbar-light"><ahref="#"class="navbar-brand">導(dǎo)航LOGO或項(xiàng)目名稱--子項(xiàng)目</a></nav>4.導(dǎo)航欄組件演示說明以“新時(shí)代人才事業(yè)發(fā)展”為主題設(shè)計(jì)頁面導(dǎo)航欄，在頁面中依次運(yùn)用.navbar、.navbar-expand-{md}、navbar-text、navbar-light、.fixed-top等輔助類實(shí)現(xiàn)一個(gè)簡單的導(dǎo)航欄組件，展現(xiàn)導(dǎo)航欄組件內(nèi)容與樣式的豐富多彩。（三）響應(yīng)式導(dǎo)航欄響應(yīng)式導(dǎo)航欄在大屏幕中導(dǎo)航內(nèi)容水平鋪開，在小屏幕中導(dǎo)航內(nèi)容垂直堆疊。為實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式特性，需要折疊的導(dǎo)航欄內(nèi)容必須包裹在帶有.collapse、.navbar-collapse類的<div>元素中。1.響應(yīng)式導(dǎo)航欄介紹折疊起來的導(dǎo)航欄實(shí)際上是一個(gè)帶有.navbar-toggle類及兩個(gè)data-屬性的按鈕，為該按鈕應(yīng)用.navbar-toggler類、data-toggle="collapse"屬性和data-target="#collapse"屬性可實(shí)現(xiàn)響應(yīng)式切換。其中data-toggle="collapse"屬性用于切換指定內(nèi)容的顯示與隱藏狀態(tài)，data-target="#collapse"屬性用于指示需要切換的內(nèi)容和元素。在.navbar-nav導(dǎo)航欄中，不僅可在.nav-link或.nav-item中添加active和disabled類實(shí)現(xiàn)導(dǎo)航項(xiàng)的激活與禁用，還可在導(dǎo)航欄中添加下拉菜單。2.響應(yīng)式導(dǎo)航欄演示說明通過一個(gè)簡單的案例來練習(xí)響應(yīng)式導(dǎo)航欄的具體應(yīng)用，該導(dǎo)航欄以“新發(fā)展理念”為主題進(jìn)行設(shè)計(jì)，并在導(dǎo)航欄中嵌套下拉菜單，實(shí)現(xiàn)一個(gè)內(nèi)容多樣化的導(dǎo)航欄。該導(dǎo)航欄在中屏設(shè)備上水平顯示，在小屏設(shè)備上垂直折疊顯示。（四）進(jìn)度條進(jìn)度條（Progress）組件主要用于展示加載、跳轉(zhuǎn)或動作正在執(zhí)行中的狀態(tài)，是網(wǎng)頁設(shè)計(jì)中比較常用的組件。Bootstrap4設(shè)計(jì)了簡單、美觀、色彩豐富的進(jìn)度條，使進(jìn)度條具備條紋和動畫效果。在Bootstrap4中，進(jìn)度條組件一般由兩個(gè)嵌套的HTML元素構(gòu)成，外層元素應(yīng)用.progress類創(chuàng)建進(jìn)度槽，內(nèi)層元素應(yīng)用.progress-bar類創(chuàng)建進(jìn)度條。1.基本結(jié)構(gòu)進(jìn)度條組件的的基本結(jié)構(gòu)如下所示。<divclass="progress"><divclass="progress-bar"></div></div>2.進(jìn)度條輔助類設(shè)計(jì)進(jìn)度條樣式可借助于Bootstrap4的內(nèi)置工具類，如.bg-*背景類、.w-*尺寸類等。除此之外，還可借助Bootstrap4定義的進(jìn)度條組件輔助類進(jìn)行設(shè)計(jì)，包括.progress-bar-struped、.progress-bar-animated等。.progress：應(yīng)用于進(jìn)度條結(jié)構(gòu)的外層元素，用于實(shí)現(xiàn)進(jìn)度槽。.progress-bar：應(yīng)用于進(jìn)度條結(jié)構(gòu)的內(nèi)層元素，用于實(shí)現(xiàn)進(jìn)度條。.progress-bar-striped：應(yīng)用于進(jìn)度槽上，使用CSS漸變?yōu)檫M(jìn)度條背景顏色加上條紋效果。.progress-bar-animated：應(yīng)用于進(jìn)度槽上，使進(jìn)度條實(shí)現(xiàn)從左到右的動畫效果。此效果需要與條紋效果組合實(shí)現(xiàn)。.w-{*}：應(yīng)用于.progress-bar容器上，效果與width屬性一致，均可設(shè)置進(jìn)度條進(jìn)度。.bg-{*}：應(yīng)用于.progress-bar容器上，可為進(jìn)度條設(shè)計(jì)不同的背景色。<divclass="w-25p-3"style="background-color:#eee;">25%的寬度</div>3.相對于父元素的尺寸類演示說明在頁面中分別應(yīng)用上述進(jìn)度條輔助類，實(shí)現(xiàn)多種進(jìn)度條樣式。（五）分頁在網(wǎng)頁設(shè)計(jì)的開發(fā)過程中，當(dāng)單頁面中需要渲染的數(shù)據(jù)過多時(shí)，一般會使用分頁組件對數(shù)據(jù)進(jìn)行分頁處理。在Bootstrap4中，分頁組件一般由3個(gè)嵌套的HTML元素構(gòu)成，該HTML元素一般指<ul>、<li>以及<a>元素，也可使用其他元素來實(shí)現(xiàn)分頁組件。在分頁組件中，外層元素<ul>應(yīng)用.pagination類創(chuàng)建分頁容器，內(nèi)層元素<li>應(yīng)用.item類創(chuàng)建分頁項(xiàng)，當(dāng)分頁項(xiàng)中包含<a>超鏈接時(shí)，需要為<a>超鏈接應(yīng)用.link類。1.基本結(jié)構(gòu)分頁組件的的基本結(jié)構(gòu)如下所示。<ulclass="pagination"><liclass="item"><aclass="link"href="#">上一頁</a></li><liclass="item"><aclass="link"href="#">1</a></li><liclass="item"><aclass="link"href="#">下一頁</a></li></ul>2.進(jìn)度條輔助類Bootstrap4定義了一系列分頁組件輔助類，用于設(shè)計(jì)多種風(fēng)格、尺寸的分頁組件，包括.pagination-lg、.pagination-sm等。.pagination：應(yīng)用于分頁結(jié)構(gòu)的外層元素，用于實(shí)現(xiàn)分頁容器。.item：應(yīng)用于分頁結(jié)構(gòu)的內(nèi)層元素，用于實(shí)現(xiàn)分頁項(xiàng)。.link：應(yīng)用于分頁鏈接上，用于實(shí)現(xiàn)分頁項(xiàng)中包含的跳轉(zhuǎn)鏈接。.pagination-{lg|sm}：應(yīng)用于.pagination分頁容器，可設(shè)計(jì)大號或小號的分頁樣式。.active：應(yīng)用于.item分頁項(xiàng)上，使當(dāng)前類所在的分頁項(xiàng)高亮。.disabled：應(yīng)用于.item分頁項(xiàng)上，禁用當(dāng)前類所在的分頁項(xiàng)。3.相對于父元素的尺寸類演示說明在頁面中分別應(yīng)用上述分頁組件輔助類，實(shí)現(xiàn)多種樣式的分頁組件。分別使用"«"、"«"圖標(biāo)來設(shè)計(jì)“上一頁”、“下一頁”。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第七章課后作業(yè)。第十一學(xué)時(shí)（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)Bootstrap的面包屑組件、導(dǎo)航欄組件、進(jìn)度條組件、分頁組件的應(yīng)用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—3分1.面包屑導(dǎo)航案例練習(xí)（0.5分）（1）參照教材中面包屑導(dǎo)航的基本結(jié)構(gòu)與分隔符樣式代碼進(jìn)行練習(xí)。2.完成導(dǎo)航欄組件的案例練習(xí)（1分）（1）參照教材【例7.20】導(dǎo)航欄輔助類-完成對應(yīng)練習(xí)。（2）參照教材【例7.21】響應(yīng)式導(dǎo)航欄-完成對應(yīng)練習(xí)。3.完成進(jìn)度條組件的案例練習(xí)（0.5分）（1）參照教材【例7.22】進(jìn)度條輔助類-完成對應(yīng)練習(xí)。4.完成分頁組件的案例練習(xí)（1分）（1）參照教材【例7.23】分頁輔助類-完成對應(yīng)練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為3分，并納入平時(shí)成績中。第十二學(xué)時(shí)（卡片、媒體對象、巨幕）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握Bootstrap的卡片組件掌握Bootstrap的媒體對象組件掌握Bootstrap的巨幕組件二、知識講解（一）卡片組件1.卡片組件介紹Bootstrap4中的卡片（card）組件是一個(gè)靈活的、可擴(kuò)展的內(nèi)容容器，它包括卡片的頁眉和頁腳、各種各樣的卡片內(nèi)容、上下文背景顏色以及強(qiáng)大的顯示選項(xiàng)。Bootstrap4的卡片組件可替代Bootstrap3的面板、縮略圖等組件。2.卡片內(nèi)容卡片組件支持多種多樣的內(nèi)容，包括標(biāo)題、主體、文本、超鏈接、頁眉、頁腳、圖片、列表群組等。Bootstrap4內(nèi)置了豐富的卡片組件內(nèi)容類，可用于實(shí)現(xiàn)上述卡片內(nèi)容，如.card、.card-title、.card-body、.card-text等。（1）卡片內(nèi)容內(nèi)容類.card：用于構(gòu)建1個(gè)卡片組件容器。.card-title：用于構(gòu)建卡片標(biāo)題.card-subtitle：用于構(gòu)建卡片小標(biāo)題。.card-body：用于構(gòu)建卡片主體內(nèi)容。.card-text：用于構(gòu)建卡片文本。.card-link：用于構(gòu)建卡片超鏈接。.card-img-{top|bottom}：用于構(gòu)建一張圖片在卡片的頂端或底端。.card-img-overlay：用于將圖像轉(zhuǎn)換為卡片的背景，可疊加卡片文本在該背景圖片上。.card-header：用于創(chuàng)建卡片的頁眉。.card-footer：用于創(chuàng)建卡片的頁腳。.list-group：使用.list-group、.list-group-flush構(gòu)建列表容器，使用.list-group-item構(gòu)建列表項(xiàng)。在卡片內(nèi)使用，可創(chuàng)建卡片的列表群組。（2）基本結(jié)構(gòu)分頁組件的的基本結(jié)構(gòu)如下所示。<divclass="card"><divclass="card-header">頁眉</div><imgsrc="..."class="card-img-top"><divclass="card-body"><h5class="card-title">卡片標(biāo)題</h5><pclass="card-text">卡片文本</p><ahref="#"class="card-link">卡片超鏈接</a></div><divclass="card-footer">頁腳</div></div>（3）演示說明在頁面中運(yùn)用上述卡片內(nèi)容類實(shí)現(xiàn)一個(gè)以“Bootstrap網(wǎng)站實(shí)例”為主題的卡片組件3.卡片的應(yīng)用（1）控制卡片寬度卡片組件在默認(rèn)情況下是100%顯示的，可使用網(wǎng)格系統(tǒng)、尺寸類或自定義尺寸來控制卡片組件的寬度。<!--網(wǎng)格系統(tǒng)控制寬度--><divclass="row"><divclass="col-6"><divclass="card">卡片組件-內(nèi)容省略</div></div><divclass="col-6"><divclass="card">卡片組件-內(nèi)容省略</div></div></div><!--尺寸類控制寬度--><diVclass="cardw-50">卡片組件-內(nèi)容省略</diV><!--CSS樣式控制寬度--><divclass="card"style="width:10rem;">卡片組件-內(nèi)容省略</div>（2）控制卡片的文本對齊方式卡片組件支持設(shè)置卡片內(nèi)容的對齊方式，包括頁眉、標(biāo)題、卡片主體的對齊方式等，采用如.text-center的文本對齊類即可實(shí)現(xiàn)，具體代碼如下所示。<divclass="card"><pclass="card-texttext-center">卡片文本</p><divclass="card-bodytext-right">卡片主體的對齊方式</div></div>（3）控制卡片的顏色卡片組件支持設(shè)置卡片的背景顏色、背景圖片、邊框顏色等，還可根據(jù)需要設(shè)置卡片頁眉和頁腳的背景色及邊框色?？ㄆ谋尘邦伾O(shè)置：可采用Bootstrap的.bg-*背景類實(shí)現(xiàn)，具體代碼如下所示。<divclass="cardbg-secondary">卡片內(nèi)容省略</div>卡片的背景圖片設(shè)置：可通過為<img>圖片添加.card-img類，并設(shè)置1個(gè)包含.card-img-overlay類的容器實(shí)現(xiàn)，該容器用于輸入文本內(nèi)容，具體代碼如下所示。<divclass="card"><imgsrc=""class="card-img"><divclass="card-img-overlay"><h3class="card-title">標(biāo)題</h3><pclass="card-text">文本</p></div></div>卡片的邊框顏色設(shè)置：可采用Bootstrap的.border-*邊框類實(shí)現(xiàn)，具體代碼如下所示。<divclass="cardborder-primary">卡片內(nèi)容省略</div>.bg-*類與.border-*類的應(yīng)用：.bg-*類與.border-*類應(yīng)用在.card卡片容器上時(shí)，是對卡片容器的背景顏色和邊框顏色的整體設(shè)置。當(dāng)開發(fā)者需要單獨(dú)設(shè)置卡片的頁眉與頁腳邊框顏色時(shí)，可在.card-header頁眉或.card-footer頁腳上應(yīng)用.border-*類設(shè)置其邊框顏色。當(dāng)開發(fā)者需要刪除卡片的頁眉與頁腳背景顏色時(shí)，可應(yīng)用.bg-transparent類刪除其背景顏色，具體代碼如下所示。<divclass="card"><divclass="card-headerbg-transparentborder-success">頁眉</div><divclass="card-bodytext-success"></div><divclass="card-footerbg-transparentborder-success">頁腳</div></div>（4）在卡片中添加導(dǎo)航在卡片組件中使用.card-header-tabs類配合導(dǎo)航組件可實(shí)現(xiàn)卡片組件的導(dǎo)航功能。為<ul>添加.card-header-tabs類，可在卡片組件中實(shí)現(xiàn)默認(rèn)的標(biāo)簽頁導(dǎo)航選項(xiàng)卡。將<ul>中的.nav-tabs、.nav-header-tabs類改為.nav-pills、.card-header-pills即可實(shí)現(xiàn)膠囊式導(dǎo)航選項(xiàng)卡，具體代碼如下所示。<divclass="card"><divclass="card-header"><ulclass="navnav-tabscard-header-tabs"><liclass="nav-item"><aclass="nav-link"id="home-tab"data-toggle="tab"href="#nav1">導(dǎo)航項(xiàng)1</a></li>以下省略重復(fù)性代碼</ul></div><divclass="card-bodytab-content"><divclass="tab-paneactive"id="nav1"><divclass="card-body">導(dǎo)航項(xiàng)對應(yīng)的子內(nèi)容框</div></div>以下省略重復(fù)性代碼</div></div>4.卡片的布局在Bootstrap4中不僅包含可設(shè)置卡片內(nèi)容樣式的卡片內(nèi)容類，還包括一系列可設(shè)置卡片排版布局的卡片布局類，如.card-group、.card-deck、.card-columns等。.card-group：卡片組類，可將多個(gè)卡片組合成一個(gè)群組，使它們呈現(xiàn)為具有相同寬度和高度的列，且群組內(nèi)的每個(gè)卡片緊貼在一起。.card-deck：實(shí)現(xiàn)一組互不相連的、寬度與高度相等的卡片，即卡片陣列。.card-columns：將卡片包裹在.card-columns類中，將卡片設(shè)計(jì)成瀑布流布局。在該類下的卡片是使用CSS屬性構(gòu)建的，而非flexbox，以便于實(shí)現(xiàn)浮動對齊。卡片排列順序從上到下、從左到右進(jìn)行排列。（1）卡片布局類語法格式卡片布局類的語法格式如下所示。<divclass="card-group"><divclass="card">卡片1</div><divclass="card">卡片2</div></div><divclass="card-deck"><divclass="card">卡片1</div><divclass="card">卡片2</div></div><divclass="card-columns"><divclass="card>卡片1</div><divclass="card">卡片2</div></div>（2）卡片布局類應(yīng)用演示以.card-deck類為例，示范卡片布局類的應(yīng)用，實(shí)現(xiàn)1個(gè)以“Bootstrap相關(guān)優(yōu)質(zhì)項(xiàng)目推薦”為主題的卡片陣列。（二）媒體對象組件\t"/weixin_42234804/article/details/_blank"Bootstrap4中的多媒體對象(MediaObject)是一個(gè)抽象的、特殊版式的區(qū)塊樣式，可以通過更少的代碼實(shí)現(xiàn)媒體對象與文字的混排效果。圖片居左，內(nèi)容居右是媒體對象的常見布局。1.媒體對象基本結(jié)構(gòu)媒體對象一般是成組出現(xiàn)的，而一組媒體對象常常由兩部分組成，包括媒體對象的容器、媒體對象的對象（如<img>圖片）和媒體對象的主體。媒體對象的容器通過.media類構(gòu)建，可用于容納媒體對象的所有內(nèi)容。媒體對象的對象常指的是<img>圖片。媒體對象的主體通過.media-body類構(gòu)建，可用于存放媒體對象中的主體內(nèi)容，主體內(nèi)容可以是圖片的側(cè)邊內(nèi)容，也可以是其他任何元素。媒體對象的基本結(jié)構(gòu)如下所示。<divclass="media"><imgsrc="..."class="mr-3"><divclass="media-body">媒體對象主體</div></div>在媒體對象中，開發(fā)者可選擇是否利用Bootstrap4的邊距類來控制其元素之間的間距。2.媒體對象的應(yīng)用演示以“圖書介紹”為主題設(shè)計(jì)1個(gè)媒體對象組件。3.媒體對象應(yīng)用（1）實(shí)現(xiàn)媒體對象的嵌套媒體對象