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

學(xué)IT有疑問，就找千問千知千里尋他眾百度,鋒自苦寒磨礪出千鋒教育Bootstrap基礎(chǔ)入門教學(xué)設(shè)計(jì)課程名稱：Bootstrap基礎(chǔ)入門_____授課年級：_______________________授課學(xué)期：_______________________教師姓名：_______________________2022年11月05日課程名稱第8章Bootstrap的JS插件應(yīng)用計(jì)劃學(xué)時14學(xué)時內(nèi)容分析本章主要介紹Bootstrap的插件概念、模態(tài)框、下拉菜單、滾動監(jiān)聽、工具提示、彈出框、警告框、按鈕、折疊、輪播等插件。教學(xué)目標(biāo)與教學(xué)要求【知識目標(biāo)】了解Bootstrap插件工具的相關(guān)概念理解Bootstrap插件應(yīng)用的相關(guān)概念理解Bootstrap插件事件的相關(guān)概念【技能目標(biāo)】掌握Bootstrap模態(tài)框插件的應(yīng)用掌握Bootstrap下拉菜單插件的應(yīng)用掌握Bootstrap滾動監(jiān)聽插件的應(yīng)用掌握Bootstrap工具提示插件的應(yīng)用掌握Bootstrap彈出框插件的應(yīng)用掌握Bootstrap警告框插件的應(yīng)用掌握Bootstrap按鈕插件的應(yīng)用掌握Bootstrap折疊插件的應(yīng)用掌握Bootstrap輪播插件的應(yīng)用實(shí)現(xiàn)一個企業(yè)門戶網(wǎng)站首頁【思政育人目標(biāo)】培養(yǎng)學(xué)生具備創(chuàng)新精神與創(chuàng)造力。培養(yǎng)學(xué)生具備艱苦奮斗、刻苦鉆研、遇到困難堅(jiān)持不懈的精神。鼓勵學(xué)生擁有自己的夢想，并為之付出努力與行動。教學(xué)重點(diǎn)模態(tài)框、下拉菜單、滾動監(jiān)聽、工具提示、折疊、輪播教學(xué)難點(diǎn)手風(fēng)琴式折疊、折疊插件的應(yīng)用、【實(shí)戰(zhàn)：企業(yè)門戶網(wǎng)站首頁】教學(xué)方式課堂講解配合ppt演示8學(xué)時，上機(jī)演練6學(xué)時

教學(xué)過程第一學(xué)時（插件概述）一、提出需求，導(dǎo)入學(xué)習(xí)任務(wù)（1）思考Bootstrap腳手架的學(xué)習(xí)應(yīng)該從何入手。插件（Plug-in，也稱add-in）是遵循一定規(guī)范的、應(yīng)用程序接口編寫出來的程序。從廣義上來說，插件就是“插入”其他系統(tǒng)里的程序，主要用于增強(qiáng)原有系統(tǒng)的功能。本書前7章中大部分講解的是靜態(tài)的工具類及組件，本章將結(jié)合JavaScript插件講解如何實(shí)現(xiàn)頁面的動態(tài)效果。（2）明確學(xué)習(xí)方向。了解插件工具的相關(guān)概念掌握Bootstrap的插件應(yīng)用掌握Bootstrap的插件事件知識講解（一）插件概述1.插件工具Bootstrap4內(nèi)置了一系列插件，這些插件均可在Bootstrap4的源代碼中找到。在使用Bootstrap4插件時應(yīng)注意不同插件之間的依賴關(guān)系，如下拉菜單、彈出框和工具提示（tooltip）組件均依賴于popper.js。2.插件應(yīng)用（1）安裝插件引入Bootstrap的插件時，可以單獨(dú)引入Bootstrap提供的單個*.js文件，也可以引入bootstrap.js或bootstrap.min.js，從而實(shí)現(xiàn)插件的全部引入。在引入插件時，需要注意，多數(shù)插件之間存在依賴關(guān)系。（2）調(diào)用插件Bootstrap有兩種插件調(diào)用方式，如data屬性調(diào)用、JavaScript調(diào)用。（1）data屬性調(diào)用開發(fā)者可以在頁面中的目標(biāo)元素上通過data屬性啟用插件，無需編寫JavaScript腳本，在開發(fā)過程中首要推薦這種調(diào)用方式。例如激活模態(tài)框時，需要定義data-toggle="modal"激活模態(tài)框插件。data-toggle屬性是Bootstrap激活插件的專用屬性，其屬性值應(yīng)與對應(yīng)插件的字符串相匹配。大部分的Bootstrap插件還需要指定data-target屬性配合使用，上述模態(tài)框插件也不例外。data-target屬性常用來指定控制對象，模態(tài)框通過data-target="模態(tài)框ID名"綁定對應(yīng)ID的模態(tài)框，告知Bootstrap插件顯示指定的頁面元素，具體代碼如下所示。<buttontype="button"class="btn"data-toggle="modal"data-target="#myModal">打開模態(tài)框</button><divid="myModal"class="modal"></div>一般情況下，開發(fā)者會通過data屬性啟動插件，但開發(fā)者也可根據(jù)實(shí)際情況禁用Bootstrap插件的data屬性?？墒褂胐ata-api來取消文檔上所有事件或特定插件的綁定，具體代碼書下所示。$document.off('.data-api')$document.off('.alert.data-api')（2）JavaScript調(diào)用Bootstrap4中的插件也可以使用JavaScript腳本來調(diào)用，示例代碼如下所示。<script>$(function(){$(".btn").dropdown();})//調(diào)用下拉菜單</script>3.插件事件Bootstrap4中的大部分插件都具備自定義事件，這些自定義事件由兩種動詞形式組成，即不定式與過去式。下面將對這些形式進(jìn)行詳細(xì)介紹。（1）不定式：例如hide，表示其在隱藏動作開始時觸發(fā)。（2）過去式：例如hidden，表示其在隱藏動作完成時觸發(fā)。所有的不定式事件均具備preventDefault()功能，該方法可在操作開始前停止相關(guān)事件的執(zhí)行能力，該方法也可通過從事件處理程序返回false實(shí)現(xiàn)調(diào)用，代碼如下所示。$function('#myModal').on('show.bs.modal',function(e){if(!data)returne.preventDefault()//停止顯示模態(tài)框})三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第八章課后作業(yè)。第二學(xué)時（模態(tài)框插件）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握Bootstrap模態(tài)框基本結(jié)構(gòu)掌握Bootstrap模態(tài)框的輔助類掌握Bootstrap模態(tài)框的事件與方法應(yīng)用二、知識講解（一）模態(tài)框介紹模態(tài)框（Modal）是覆蓋在父窗體上的子窗體，用于顯示一個單獨(dú)的內(nèi)容，可在不離開父窗體的前提下實(shí)現(xiàn)頁面互動。開發(fā)者可通過子窗體收集信息、實(shí)現(xiàn)交互，還可自定義其內(nèi)容。（二）模態(tài)框基本結(jié)構(gòu)1.依賴資源在使用模態(tài)框插件前需要先引入jquery.js、util.js和modal.js文件，或一次性引入jquery.js、bootstrao.js或壓縮版的bootstrap.min.js文件。2.固定結(jié)構(gòu)模態(tài)框有其固定的結(jié)構(gòu)，最外層使用.modal類定義彈出模態(tài)框的外框，并在該外框中嵌套兩層<div>結(jié)構(gòu)，即類名為“modal-dialog”的模態(tài)框?qū)υ拰雍皖惷麨椤癿odal-content”的模態(tài)框顯示內(nèi)容。.modal-content模態(tài)框內(nèi)容主要由三部分構(gòu)成，包括.modal-header頭部、.modal-body正文、.modal-footer頁腳。（1）頭部：通過.modal-title為模態(tài)框添加標(biāo)題，通過data-dismiss="modal"屬性為模態(tài)框添加關(guān)閉按鈕。（2）正文：可在正文中嵌入諸如視頻、圖像的其他任何內(nèi)容。（3）頁腳：該區(qū)域默認(rèn)右對齊，可放置“保存”、“關(guān)閉”、“接受”等操作性按鈕。“關(guān)閉”按鈕也通過data-dismiss="modal"屬性實(shí)現(xiàn)。3.結(jié)構(gòu)代碼模態(tài)框基本結(jié)構(gòu)如下所示。<divclass="modal"id="ModalTest"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title">標(biāo)題</h5><buttontype="button"class="close"data-dismiss="modal"><span>×</span></button></div><divclass="modal-body"></div><divclass="modal-footer"></div></div></div></div>4.模態(tài)框激活開發(fā)者需要為特定對象（如按鈕）綁定觸發(fā)行為，并通過特定對象觸發(fā)模態(tài)框的顯示。在特定對象中添加data-target="#ModalTest"屬性來綁定目標(biāo)模態(tài)框，并通過data-toggle="modal"屬性告知Bootstrap4此處調(diào)用的是模態(tài)框，即激活模態(tài)框插件。<buttontype="button"class="btnbtn-info"data-toggle="modal"data-target="#ModalTest">按鈕-用于打開模態(tài)框</button>（二）模態(tài)框輔助類與Bootstrap4的其他組件一樣，Bootstrap4也為模態(tài)框設(shè)計(jì)了一些常用輔助類，可用于控制模態(tài)框的布局與樣式。1.模態(tài)框輔助類介紹.modal-dialog-centered：應(yīng)用于.modal-dialog模態(tài)框?qū)υ拰?，使模態(tài)框垂直居中顯示。.modal-{sm|lg|xl}：應(yīng)用于.modal-dialog模態(tài)框?qū)υ拰?，用于設(shè)置模態(tài)框大小，使模態(tài)框在斷點(diǎn)處自動響應(yīng)，避免滾動條的出現(xiàn)。.container-fluid：在.modal-body模態(tài)框正文中嵌套類名為container-fluid的容器，則該容器可被視為常規(guī)網(wǎng)格系統(tǒng)。（三）模態(tài)框事件與方法1.模態(tài)框調(diào)用（1）data屬性調(diào)用在特定對象（一般是按鈕或超鏈接）上設(shè)置添加data-toggle="modal"、data-target="模態(tài)框ID名"或href="模態(tài)框ID名"即可。具體代碼如下所示。<buttontype="button"class="btnbtn-info"data-toggle="modal"data-target="#ModalTest">按鈕-用于打開模態(tài)框</button><ahref="#ModalTest"data-toggle="modal"class="btn"></a>（2）JavaScript調(diào)用直接通過modal()方法即可調(diào)用模態(tài)框。為特定對象（如按鈕）綁定事件，當(dāng)單擊該特定對象時為模態(tài)框插件調(diào)用modal()構(gòu)造函數(shù)，具體代碼如下所示。$function(".btn").click(function(){$('#ModalTest').modal();})2.modal()的配置參數(shù)Backdrop：默認(rèn)值為true，參數(shù)類型為boolean。用于控制是否顯示背景遮罩層，默認(rèn)顯示。同時設(shè)置單擊模態(tài)框其他區(qū)域時是否關(guān)閉模態(tài)框，默認(rèn)關(guān)閉。keyboard：默認(rèn)值為true，參數(shù)類型為boolean。用于控制是否允許按下ESC鍵關(guān)閉模態(tài)框，默認(rèn)允許。focus：默認(rèn)值為true，初始化時將焦點(diǎn)放在模態(tài)框上。show：默認(rèn)值為true，初始化時是否顯示模態(tài)框，默認(rèn)顯示模態(tài)框。3.模態(tài)框事件Bootstrap4為模態(tài)框插件定義了一些常用事件，具體介紹如下所示。（1）show.bs.modal：調(diào)用顯示模態(tài)框的實(shí)例方法時，將立即觸發(fā)此事件。（2）shown.bs.modal：當(dāng)模態(tài)框顯示完畢后，將立即觸發(fā)此事件。（3）hide.bs.modal：調(diào)用隱藏模態(tài)框的實(shí)例方法時，將立即觸發(fā)此事件。（4）hidden.bs.modal：當(dāng)模態(tài)框隱藏完畢后，將立即觸發(fā)此事件。4.模態(tài)框應(yīng)用演示結(jié)合模態(tài)框的基本結(jié)構(gòu)，分別通過data屬性和JavaScript調(diào)用模態(tài)框，展示模態(tài)框的顯示與隱藏狀態(tài)。第三學(xué)時（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)模態(tài)框插件的應(yīng)用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—2分1.完成data屬性調(diào)用模態(tài)框的案例練習(xí)（1分）（1）參照教材【例8.1】data屬性調(diào)用模態(tài)框-完成對應(yīng)練習(xí)。2.完成JavaScript方法調(diào)用模態(tài)框的案例練習(xí)（1分）（1）參照教材【例8.1】JavaScript方法調(diào)用模態(tài)框-完成練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為2分，并納入平時成績中。第四學(xué)時（下拉菜單、滾動監(jiān)聽）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握下拉菜單的調(diào)用方法掌握下拉菜單的參數(shù)配置掌握下拉菜單的常用事件掌握滾動監(jiān)聽的應(yīng)用規(guī)則掌握滾動監(jiān)聽的調(diào)用方法掌握滾動監(jiān)聽的常用事件二、知識講解（一）下拉菜單插件介紹在Bootstrap4中可通過dropdown.js實(shí)現(xiàn)下拉菜單的交互，在應(yīng)用下拉菜單插件前應(yīng)導(dǎo)入jquery.js、util.js、dropdown.js以及第三方依賴插件popper.js。也可一次性引入jquery.js、popper.js以及bootstrap.js或壓縮版的bootstrap.min.js，并使popper.js置于bootstra.js之前。（二）下拉菜單調(diào)用與模態(tài)框相同，下拉菜單同樣支持data屬性及JavaScript這兩種方法進(jìn)行調(diào)用，在實(shí)際開發(fā)中推薦使用data屬性進(jìn)行調(diào)用。data屬性調(diào)用，在超鏈接或按鈕上組合應(yīng)用.dropdown-toggle類與data-toggle="dropdown"，即可激活下拉菜單。在本書第七章中已對下拉菜單的data屬性調(diào)用方式進(jìn)行了詳細(xì)的介紹，此處不再贅述。JavaScript調(diào)用，使用dropdown()構(gòu)造函數(shù)即可直接調(diào)用下拉菜單。代碼如下所示。$(function(){$(".btn").dropdown();})（三）下拉菜單設(shè)置Boottsrap4支持通過data屬性傳遞配置參數(shù)，參數(shù)名稱追加至“data-”之后，如data-offset=""。offset：數(shù)值類型為number|string|function,默認(rèn)值為0，下拉菜單相對于其目標(biāo)的偏移量flip：數(shù)值類型為boolean,默認(rèn)值為true，允許下拉菜單在引用元素重疊的情況下翻轉(zhuǎn)。boundary：數(shù)值類型為string|element，默認(rèn)值為scrollParent 下拉菜單的溢出約束邊界。display：數(shù)值類型為string,默認(rèn)值為dynamic，默認(rèn)情況下，使用Popper進(jìn)行動態(tài)定位，禁用此功能。（四）下拉菜單事件Bootstrap4為下拉菜單插件定義了一些常用事件，具體介紹如下所示。（1）show.bs.dropdown：調(diào)用顯示下拉菜單的實(shí)例方法時，將立即觸發(fā)此事件。（2）shown.bs.dropdown：當(dāng)下拉菜單顯示完畢后，將立即觸發(fā)此事件。（3）hide.bs.dropdown：調(diào)用隱藏下拉菜單的實(shí)例方法時，將立即觸發(fā)此事件。（4）hidden.bs.dropdown：當(dāng)下拉菜單隱藏完畢后，將立即觸發(fā)此事件。（五）下拉菜單演示在本書7.5節(jié)中已實(shí)現(xiàn)下拉菜單的data屬性調(diào)用，此處不再對其進(jìn)行演示。結(jié)合下拉菜單的基本結(jié)構(gòu)，通過JavaScript調(diào)用下拉菜單，觀察下拉菜單的事件調(diào)用順序（六）滾動監(jiān)聽插件介紹滾動監(jiān)聽（Scrollspy）插件，即自動更新導(dǎo)航插件，可根據(jù)滾動條的位置自動更新對應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著滾動條的滾動，基于滾動條的當(dāng)前位置向?qū)Ш綑谔砑?active類。（六）滾動監(jiān)聽?wèi)?yīng)用規(guī)則在Bootstrap4中可通過scrollspy.js實(shí)現(xiàn)滾動監(jiān)聽，在應(yīng)用滾動監(jiān)聽插件前應(yīng)先導(dǎo)入jquery.js、util.js、scrollspy.js文件，并使scrollspy.js置于bootstrap.js之前。也可一次性引入jquery.js、bootstrap.js或壓縮版的bootstrap.min.js。滾動監(jiān)聽必須與Bootstrap4的導(dǎo)航組件或列表組組件結(jié)合使用。使需要監(jiān)控的元素通過position:relative進(jìn)行相對定位，監(jiān)控元素通常為<body>。對除<body>以外的元素進(jìn)行監(jiān)聽時，應(yīng)確保監(jiān)控元素具備height與overflow-y:scroll屬性。在滾動監(jiān)聽中，錨點(diǎn)是必須的，描點(diǎn)必須與相關(guān)元素的ID名保持一致。（七）滾動監(jiān)聽調(diào)用data屬性調(diào)用，在頁面中為被監(jiān)聽的元素添加data-spy="scroll"屬性，添加data-target="目標(biāo)對象ID名"屬性，使其與同ID名的導(dǎo)航結(jié)構(gòu)建立鏈接。JavaScript調(diào)用，為被監(jiān)聽的元素綁定scrollspy()方法。$(function(){$("body").scrollspy();})與下拉菜單使用方法類似，滾動監(jiān)聽支持通過data屬性或JavaScript傳遞配置參數(shù)。（3）參數(shù)傳遞對于data屬性，參數(shù)名稱應(yīng)追加至“data-”之后，如data-offset=""。對于JavaScript，滾動監(jiān)聽插件的scrollspy()方法支持構(gòu)造參數(shù)offset，可通過該參數(shù)設(shè)置滾動偏移量。該參數(shù)的參數(shù)值為正，則滾動條向上偏移，反之，向下偏移。$(function(){$("body").scrollspy({offset:200});})（八）滾動監(jiān)聽事件Bootstrap4為滾動監(jiān)聽插件定義了1個事件active.bs.scrollspy。每當(dāng)滾動監(jiān)聽激活新項(xiàng)目時，都會在滾動元素上觸發(fā)此事件。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第八章課后作業(yè)。第五學(xué)時（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)Bootstrap的下拉菜單插件、滾動監(jiān)聽插件的使用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—2分1.完成下拉菜單插件的案例練習(xí)（1分）（1）參照教材【例8.2】JavaScript調(diào)用下拉菜單-完成對應(yīng)練習(xí)。2.完成滾動監(jiān)聽插件的案例練習(xí)（1分）（1）參照教材【例8.3】滾動監(jiān)聽插件的事件應(yīng)用-完成對應(yīng)練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為2分，并納入平時成績中。第六、七學(xué)時（工具提示、彈出框、警告框、按鈕）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握工具提示插件的應(yīng)用掌握彈出框插件的應(yīng)用掌握警告框插件的應(yīng)用掌握按鈕插件的應(yīng)用二、知識講解（一）工具提示插件工具提示插件需要tooltip.js的支持，工具提示插件依賴于第三方popper.js插件。因此在應(yīng)用工具提示插件前應(yīng)導(dǎo)入jquery.js、util.js、popper.js和tooltip.js文件。開發(fā)者也可一次性引入jquery.js、popper.js、bootstrap.js或壓縮版的bootstrap.min.js，并使popper.js置于bootstrap.js或bootstrap.min.js之前。（二）下拉菜單的基本結(jié)構(gòu)1.定義工具提示工具提示效果依賴于其他元素進(jìn)行展示，如超鏈接、按鈕等。為元素添加data-toggle="tooltip"屬性實(shí)現(xiàn)工具提示效果，提示的內(nèi)容則通過title屬性進(jìn)行設(shè)計(jì)，提示的方向則通過data-placement="left|right|top|bottom"屬性進(jìn)行設(shè)計(jì)。2.工具提示插件的調(diào)用方式與其他插件不同的是，工具提示插件并不支持通過data屬性激活插件，僅支持JavaScript腳本的方式調(diào)用。需要注意，處于禁用狀態(tài)的元素是不具備交互功能的，因此不能為其添加工具提示效果。開發(fā)者可在禁用元素的外層嵌套一個包裹容器，在該容器上觸發(fā)工具提示。3.工具提示的參數(shù)傳遞Boottsrap4支持通過data屬性或JavaScript傳遞參數(shù)，對于data屬性，需將參數(shù)名稱追加至“data-”之后，如data-trigger="click"。對于JavaScript腳本，需將參數(shù)置于tooltip()構(gòu)造函數(shù)中。$('.btn').tooltip(options);在上述代碼中，options是一個參數(shù)對象，其中可包含多個配置參數(shù)。4.工tooltip()的配置參數(shù)animation：數(shù)據(jù)類型為boolean，默認(rèn)值為true。即是否允許將CSS淡入淡出過渡應(yīng)用于工具提示。container：數(shù)據(jù)類型為string|element|false，默認(rèn)值為false。即將工具提示追加到特定元素上，如<body>。delay：數(shù)據(jù)類型為number|object，默認(rèn)值為0。即設(shè)置工具提示的顯示和隱藏的延遲時間（毫秒），不適用于手動觸發(fā)類型。html：數(shù)據(jù)類型為boolean，默認(rèn)值為false。即默認(rèn)情況下，使用Popper進(jìn)行動態(tài)定位，禁用此功能。placement：數(shù)據(jù)類型為string|function，默認(rèn)值為top。即設(shè)計(jì)工具提示的彈出方向，可取值包括auto|left|right|top|bottom。當(dāng)參數(shù)值為auto時，將動態(tài)地重新定位工具提示。selector：數(shù)據(jù)類型為string|false，默認(rèn)值為false。即設(shè)計(jì)一個選擇器字符串，則工具提示將針對選擇器匹配的目標(biāo)元素進(jìn)行顯示。title ：數(shù)據(jù)類型為string|element|function，無默認(rèn)值。即若title屬性不存在，則顯示默認(rèn)的空標(biāo)題值。trigger：數(shù)據(jù)類型為string，默認(rèn)值為hoverfocus。即設(shè)計(jì)工具提示的觸發(fā)方式，包括單擊（click）、懸?。╤over）、獲取焦點(diǎn)（focus）或手動（manual）。可指定多種觸發(fā)方式，多種方式之間通過空格進(jìn)行間隔。offset：數(shù)據(jù)類型為number|string|function，默認(rèn)值為0。即工具提示內(nèi)容對于其目標(biāo)的偏移量。5.工具提示的實(shí)用方法Bootstrap4為工具提示插件定義了一些實(shí)用方法，具體介紹如下所示。（1）$().tooltip('show')：顯示目標(biāo)元素的工具提示。（2）$().tooltip(hide)：隱藏目標(biāo)元素的工具提示。（3）$().tooltip(toggle)：顯示或隱藏，即切換目標(biāo)元素的工具提示。（4）$().tooltip(dispose)：隱藏并銷毀目標(biāo)元素的工具提示。（5）$().tooltip(enable)：賦予目標(biāo)元素工具提示的顯示功能，默認(rèn)啟用。（6）$().tooltip(disable)：刪除目標(biāo)元素工具提示的顯示功能，僅當(dāng)啟用時才顯示提示。（7）$().tooltip(toggleEnaled)：賦予目標(biāo)元素切換其顯示或隱藏工具提示的功能。（8）$().tooltip(update)：更新目標(biāo)元素的工具提示位置。6.工具提示常用事件Bootstrap4為工具提示插件定義了5個事件，具體介紹如下所示。（1）show.bs.tooltip：調(diào)用顯示工具提示的實(shí)例方法show()時，將立即觸發(fā)此事件。（2）shown.bs.tooltip：當(dāng)工具提示對用戶可見時，將立即觸發(fā)此事件。（3）hide.bs.tooltip：調(diào)用隱藏工具提示的實(shí)例方法hide()時，將立即觸發(fā)此事件。（4）hidden.bs.tooltip：當(dāng)工具提示對用戶不可見時，將立即觸發(fā)此事件。（5）inserted.bs.tooltip：該事件在show.bs.tooltip事件結(jié)束后被觸發(fā)。（三）彈出框彈出框插件需要popover.js的支持，彈出框插件依賴于第三方popper.js插件。因此在應(yīng)用彈出框插件前應(yīng)導(dǎo)入jquery.js、util.js、popper.js和popover.js文件。開發(fā)者也可一次性引入jquery.js、popper.js、bootstrap.js或壓縮版的bootstrap.min.js，并使popper.js置于bootstrap.js或bootstrap.min.js之前。1.定義彈出框彈出框效果依賴于其他元素進(jìn)行展示，如超鏈接、按鈕等。為元素添加data-toggel="popover"屬性實(shí)現(xiàn)彈出框效果，通過title屬性定義彈窗標(biāo)題、data-content屬性定義彈窗內(nèi)容。彈出框的彈出方向則通過data-placement="left|right|top|bottom"屬性進(jìn)行設(shè)計(jì)。2.彈出框調(diào)用方式與工具提示插件一樣，彈出框插件同樣僅支持通過JavaScript腳本的方式進(jìn)行調(diào)用。調(diào)用popover()構(gòu)造函數(shù)即可實(shí)現(xiàn)上述<button>按鈕的彈出框效果。3.彈出框的禁用嵌套在彈出框插件中開發(fā)者同樣可在禁用元素的外層嵌套一個包裹容器，并在該容器上觸發(fā)彈出效果。4.彈出框的參數(shù)傳遞在彈出框插件中可通過data屬性或JavaScript傳遞參數(shù)，對于data屬性，需將參數(shù)名稱追加至“data-”之后，如data-content="彈出框內(nèi)容"。對于JavaScript腳本，需將參數(shù)置于popover()構(gòu)造函數(shù)中。options是一個參數(shù)對象，其中可包含多個配置參數(shù)。彈出框插件的配置參數(shù)與工具提示插件的配置參數(shù)用法基本一致，僅增加了一個content參數(shù).content參數(shù)的類型為string|element|function，其默認(rèn)值為空，當(dāng)data-content屬性不存在時，則應(yīng)用默認(rèn)值。如果給定一個函數(shù)，則該函數(shù)將被調(diào)用，并將其this引用設(shè)為popover所附加的元素。5.彈出框的實(shí)用方法Bootstrap4為彈出框插件定義了一些實(shí)用方法，具體介紹如下所示。（1）$().popover('show')：顯示目標(biāo)元素的彈出框。（2）$().popover(hide)：隱藏目標(biāo)元素的彈出框。（3）$().popover(toggle)：顯示或隱藏，即切換目標(biāo)元素的彈出框。（4）$().popover(dispose)：隱藏并銷毀目標(biāo)元素的彈出框。（5）$().popover(enable)：賦予目標(biāo)元素彈出框的顯示功能，默認(rèn)啟用。（6）$().popover(disable)：刪除目標(biāo)元素彈出框的顯示功能，僅當(dāng)啟用時才顯示彈窗。（7）$().popover(toggleEnaled)：賦予目標(biāo)元素切換其顯示或隱藏彈出框的功能。（8）$().popover(update)：更新目標(biāo)元素的彈出框位置。6.彈出框的常用事件Bootstrap4為工具提示插件定義了5個事件，具體介紹如下所示。（1）show.bs.popover：調(diào)用顯示彈出框的實(shí)例方法show()時，將立即觸發(fā)此事件。（2）shown.bs.popover：當(dāng)彈出框?qū)τ脩艨梢姇r，將立即觸發(fā)此事件。（3）hide.bs.popover：調(diào)用隱藏彈出框的實(shí)例方法hide()時，將立即觸發(fā)此事件。（4）hidden.bs.popover：當(dāng)彈出框?qū)τ脩舨豢梢姇r，將立即觸發(fā)此事件。（5）inserted.bs.popover：該事件在show.bs.popover事件結(jié)束后被觸發(fā)。（四）警告框插件1.警告框插件介紹在Bootstrap4中可通過alert.js實(shí)現(xiàn)警告框的交互，在應(yīng)用警告框插件前應(yīng)導(dǎo)入jquery.js、util.js、alert.js文件。也可一次性引入jquery.js以及bootstrap.js或壓縮版的bootstrap.min.js。2.警告框插件的常用事件Bootstrap4為警告框插件定義了一些常用事件，具體介紹如下所示。（1）colse.bs.alert：當(dāng)colse()實(shí)例方法被調(diào)用后，將立即觸發(fā)此事件。（2）colsed.bs.alert：當(dāng)警告框被關(guān)閉后，將立即觸發(fā)此事件。（五）按鈕插件1.按鈕插件介紹在Bootstrap4中可通過button.js實(shí)現(xiàn)按鈕的交互，在應(yīng)用按鈕插件前應(yīng)導(dǎo)入jquery.js、button.js文件。也可一次性引入jquery.js以及bootstrap.js或壓縮版的bootstrap.min.js。2.按鈕插件調(diào)用按鈕插件同樣支持通過data屬性、JavaScript這兩種方法進(jìn)行調(diào)用，開發(fā)中推薦使用data屬性進(jìn)行調(diào)用。data屬性調(diào)用，在按鈕組件的基本結(jié)構(gòu)之上，為按鈕添加data-toggle="button"屬性，即可激活按鈕。JavaScript調(diào)用，直接通過button()方法即可調(diào)用按鈕插件，具體代碼如下所示。$function(".btn").button()3.按鈕的常用方法（1）$().button('toggle')：切換按鈕狀態(tài)，設(shè)置按鈕被激活時的狀態(tài)與外觀。（2）$().button('dispose')：銷毀按鈕。4.模擬按鈕組Bootsrap4的.button樣式可作用于其他元素，如<label>上，從而模擬實(shí)現(xiàn)單選按鈕組與復(fù)選框效果。在按鈕組基礎(chǔ)之上，可將data-toggle="button"屬性添加到.btn-group內(nèi)的元素上，以便實(shí)現(xiàn)樣式切換效果。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第八章課后作業(yè)。第八學(xué)時（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)Bootstrap的工具提示插件、彈出框插件、警告框插件、按鈕插件的使用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—2分1.完成工具提示插件的案例練習(xí)（0.5分）（1）參照教材【例8.4】工具提示應(yīng)用-完成對應(yīng)練習(xí)。2.完成彈出框插件的案例練習(xí)（0.5分）（1）參照教材【例8.5】彈出框應(yīng)用-完成對應(yīng)練習(xí)。3.完成警告框插件的案例練習(xí)（0.5分）（1）參照教材【例8.6】警告框事件應(yīng)用-完成對應(yīng)練習(xí)。2.完成按鈕插件的案例練習(xí)（0.5分）（1）參照教材【例8.7】按鈕式復(fù)選框應(yīng)用-完成對應(yīng)練習(xí)。（2）參照教材【例8.8】模擬單選式按鈕應(yīng)用-完成對應(yīng)練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為2分，并納入平時成績中。第九、十學(xué)時（折疊插件）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握折疊插件的基本結(jié)構(gòu)實(shí)現(xiàn)手風(fēng)琴式折疊插件的應(yīng)用掌握折疊插件的調(diào)用掌握折疊插件的事件與方法二、知識講解（一）折疊插件介紹折疊插件（collapse.js）可以很容易地使頁面區(qū)域折疊起來。當(dāng)列表菜單的條目過多且頁面空間有限時，可使用類似于手風(fēng)琴的折疊菜單來節(jié)約頁面空間，便于用戶瀏覽。折疊插件需要collapse.js的支持，因此在應(yīng)用輪播插件前應(yīng)導(dǎo)入jquery.js、util.js和collapse.js文件。開發(fā)者也可一次性引入jquery.js、bootstrap.js或壓縮版的bootstrap.min.js。（二）折疊插件的基本結(jié)構(gòu)1.觸發(fā)器觸發(fā)器主要使用<a>或<button>標(biāo)簽進(jìn)行構(gòu)建，為觸發(fā)器元素添加data-toggle="collapse"屬性用于激活折疊插件，并在觸發(fā)器元素中應(yīng)用id名或class名來指定所對應(yīng)的折疊內(nèi)容包含框。具體代碼如下所示。<aclass="btnbtn-info"data-toggle="collapse"href="#collapseA">觸發(fā)器</a><buttonclass="btnbtn-info"type="button"data-toggle="collapse"data-target="#collapseB">觸發(fā)器</button>2.折疊包含框折疊包含框?qū)⑿枰郫B隱藏的內(nèi)容包裹起來，折疊包含框的id名與class名應(yīng)與<a>標(biāo)簽的href屬性或<button>的data-target屬性的屬性值保持一致。折疊包含框不僅需要應(yīng)用.collapse、.collapsing或.collapse.show類，還可在折疊包含框內(nèi)嵌套一個卡片主體內(nèi)容<divclass="cardcard-body">。.collapse：隱藏折疊框中的內(nèi)容。.collapsing：在轉(zhuǎn)換期間應(yīng)用，切換時具備動態(tài)效果。.collapse.show：顯示折疊框中的內(nèi)容，可使折疊框內(nèi)容在默認(rèn)狀態(tài)下打開。apse"data-target="#collapseB">觸發(fā)器</button>（三）手風(fēng)琴式折疊在掌握折疊插件的基本結(jié)構(gòu)后，應(yīng)對折疊插件進(jìn)行實(shí)踐來呢西。手風(fēng)琴式折疊即在某個時間內(nèi)僅可顯示一個子項(xiàng)目的手風(fēng)琴效果。設(shè)計(jì)手風(fēng)琴效果時，需要借助data-parent="外層容器id或class"屬性，以確保在該容器內(nèi)中的某個時間內(nèi)僅可顯示1個子項(xiàng)目。（四）折疊插件的調(diào)用折疊插件有兩種調(diào)用方式，即data屬性以及JavaScript腳本調(diào)用這兩種方式，開發(fā)中推薦使用data屬性進(jìn)行調(diào)用。1.data屬性調(diào)用通過data屬性調(diào)用折疊插件，僅需為<a>或<button>觸發(fā)器添加data-toggle="collapse"屬性和data-target="目標(biāo)折疊包含框的id或class"屬性即可。當(dāng)觸發(fā)器為<a>標(biāo)簽時，無需添加data-target屬性，可直接在href屬性中綁定目標(biāo)折疊包含框的id名或class名。data屬性調(diào)用方式已在折疊插件的基本結(jié)構(gòu)中進(jìn)行了詳細(xì)的介紹，此處不再進(jìn)行贅述。2.JavaScript腳本調(diào)用折疊插件的JavaScript腳本調(diào)用方式如下所示。$('collapse').collapse()3.collapse()的配置參數(shù)parent：選擇器類型，默認(rèn)值為 false ，所有添加該屬性的折疊項(xiàng)，其中某一項(xiàng)顯示時，其他子項(xiàng)自動關(guān)閉。效果與data-parent屬性一致。toggle：boolean類型，默認(rèn)值true，用于設(shè)置是否切換折疊插件顯示狀態(tài)。（四）折疊插件的事件與方法1.折疊插件的方法折疊插件中有4個常用方法，調(diào)用這些方法可為折疊插件實(shí)現(xiàn)特定的行為效果，具體介紹如下所示。.collapse('toggle')：切換可折疊元素，顯示或隱藏該元素。.collapse('show'):顯示可折疊元素。.collapse('hide')：隱藏可折疊元素。.collapse('dispose')：銷毀可折疊元素。2.折疊插件的事件折疊插件中有4個常用事件，調(diào)用這些事件可監(jiān)聽用戶的動作和折疊插件的專題，具體介紹如下所示。show.bs.collapse：調(diào)用實(shí)例方法.collapse(show)時，將立即觸發(fā)此事件。shown.bs.collapse:當(dāng)折疊包含框?yàn)橛脩羲姇r，將立即觸發(fā)此事件。hide.bs.collapse：調(diào)用實(shí)例方法.collapse(hide)時，將立即觸發(fā)此事件。hidden.bs.collapse：當(dāng)折疊包含框不為用戶所見時，將立即觸發(fā)此事件。三、知識鞏固（1）回顧上課前的學(xué)習(xí)目標(biāo)，對本節(jié)課知識點(diǎn)進(jìn)行總結(jié)。（2）使用第八章課后作業(yè)。第十一學(xué)時（上機(jī)練習(xí)）一、目標(biāo)學(xué)生根據(jù)教材中的示例代碼和教師的演示進(jìn)行上機(jī)練習(xí)，以此練習(xí)Bootstrap的折疊插件的應(yīng)用。在本節(jié)課中學(xué)生應(yīng)完成案例練習(xí)并將代碼提交給教師。二、上機(jī)任務(wù)—2分1.完成手風(fēng)琴的案例練習(xí)（1分）（1）參照教材【例8.9】設(shè)計(jì)一個手風(fēng)琴-完成對應(yīng)練習(xí)。2.完成折疊插件實(shí)踐應(yīng)用的案例練習(xí)（1分）（1）參照教材【例8.10】折疊插件事件應(yīng)用-完成對應(yīng)練習(xí)。三、教師評分教師根據(jù)學(xué)生對上機(jī)任務(wù)的完成度給予評分，滿分為2分，并納入平時成績中。第十二學(xué)時（輪播插件）一、回顧上節(jié)課內(nèi)容（1）對上節(jié)課布置的作業(yè)以及學(xué)生提出的問題進(jìn)行答疑解惑。（2）回顧上節(jié)課內(nèi)容，引出本節(jié)課主題。（3）明確學(xué)習(xí)方向。掌握輪播插件的基本結(jié)構(gòu)掌握輪播插件的風(fēng)格設(shè)計(jì)掌握輪播插件的調(diào)用掌握輪播插件的事件與方法二、知識講解（一）輪播插件介紹輪播插件（carousel.js）是一種靈活的、響應(yīng)式的、無縫循環(huán)播放的幻燈片切換插件，其內(nèi)容可以是圖像、內(nèi)嵌框架、視頻或者其他任何類型的內(nèi)容。輪播插件需要carousel.js的支持，因此在應(yīng)用輪播插件前應(yīng)導(dǎo)入jquery.js、util.js和carousel.js文件。開發(fā)者也可一次性引入jquery.js、bootstrap.js或壓縮版的bootstrap.min.js。（二）輪播插件的基本結(jié)構(gòu)1.輪播包含框輪播插件的所有內(nèi)容都應(yīng)被包含在.carousel輪播包含框中，即.carousel-indicators指示圖標(biāo)包含框、.carousel-inner幻燈片包含框、.carousel-control-{prev|next}輪播控制按鈕。開發(fā)者需要為輪播包含框設(shè)計(jì)唯一的ID值，避免多個.carousel輪播包含框之間出現(xiàn)交叉影響。需要注意，.carousel輪播包含框內(nèi)的指示圖標(biāo)與控制按鈕的data-target或href屬性的ID值應(yīng)與該.carousel包含框的ID值保持一致。開發(fā)者需要通過data屬性或JavaScript腳本初始化該輪播插件，即為該包含框添加data-ride="carousel"屬性，使輪播在頁面加載時就開始進(jìn)行動畫播放，或通過JavaScript的carousel()方法初始化該輪播包含框。2.指示圖標(biāo)開發(fā)者可為<ol>列表結(jié)構(gòu)應(yīng)用.carousel-indicators類創(chuàng)建1個指示圖標(biāo)包含框。指示圖標(biāo)包含框內(nèi)的指示圖標(biāo)數(shù)量與幻燈片圖片數(shù)量保持一致，指示圖標(biāo)主要用于顯示當(dāng)前圖片的播放順序。在列表結(jié)構(gòu)中，每個列表項(xiàng)均應(yīng)使用data-target="目標(biāo)輪播包含框ID"屬性指定其父級輪播包含框，并通過data-slide-to="0"定義幻燈片的播放順序。3.幻燈片.carousel-inner幻燈片包含框由多個.carousel-item幻燈片項(xiàng)目構(gòu)成，幻燈片項(xiàng)目由<img>圖片和.carousel-caption圖片說明構(gòu)成。<img>圖片應(yīng)用.d-block類和.w-100類來修正瀏覽器的預(yù)設(shè)圖像對齊帶來的影響。4.控制按鈕在.carousel輪播包含框末尾位置應(yīng)插入兩個控制按鈕，可通過.carousel-control-prev類設(shè)計(jì)向上切換圖片的左按鈕，通過.carousel-control-next類設(shè)計(jì)向下切換圖片右按鈕。左右按鈕上的箭頭圖標(biāo)則分別通過.carousel-control-prev-icon類和.carousel-control-next-icon類來實(shí)現(xiàn)。每個控制按鈕都應(yīng)與.carousel輪播包含框進(jìn)行綁定，例如，使其href屬性的錨點(diǎn)值與.carousel輪播包含框的ID值保持一致。需要注意，實(shí)現(xiàn)左右控制按鈕的交互行為，需要通過data-slide="prev"類和data-slide="next"類進(jìn)行激活。（三）輪播插件的風(fēng)格設(shè)計(jì)在輪播圖插件中，可通過.slide類來設(shè)計(jì)輪播圖片切換的過渡以及動畫效果，當(dāng)圖片不需要過渡效果時，可刪除.slide類。在應(yīng)用.slide類前提下，為.carousel輪播包含框添加.carousel-fade類可實(shí)現(xiàn)輪播的交叉淡入淡出切換效果。輪播插件的幻燈片具有自動循環(huán)播放功能，開發(fā)者可在每個幻燈片項(xiàng)目上設(shè)置其自動循環(huán)的間隔時間。（四）輪播插件的調(diào)用在Bootstrap4中輪播插件有兩種調(diào)用方式，即data屬性調(diào)用和JavaScript腳本調(diào)用。1.data屬性調(diào)用開發(fā)者可通過data屬性快捷地控制輪播的位置，可通過data-ride屬性和data-slide屬性實(shí)現(xiàn)調(diào)用。在輪播插件的基本結(jié)構(gòu)中已對data屬性調(diào)用方式進(jìn)行了詳細(xì)的介紹，此處不再贅述。2.JavaScript腳本調(diào)用除data屬性的調(diào)用方式外，開發(fā)者可通過JavaScript腳本調(diào)用倫比插件。在輪播中，需要去掉data-ride屬性和data-slide屬性，在腳本調(diào)用方式中這些屬性是冗余的。開發(fā)者在腳本中使用carousel()即可激活輪播。3.carousel()的配置參數(shù)Interval；number類型，默認(rèn)值為5000，在自動循環(huán)的項(xiàng)目之間設(shè)置要延遲的時間量。Keyboard：boolean類型，默認(rèn)值為true，用于設(shè)置輪播插件是否會對鍵盤事件作出反應(yīng)。pause：string