Bootstrap基礎入門-第07章 教學設計

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

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