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

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

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