快速認識Javascript外掛
11.1.1 外掛分類
Bootstrap4內建了許多外掛，這些外掛在Web應用開發中應用頻率比較高，下面列出bootstrap外掛支援的檔案以及各種外掛對應的js檔案：
警告框：alert.js。
按鈕：button.js。
輪播：carousel.js。
摺疊：collapse.js。
下拉選單：dropdown.js。
模態框：modal.js。
彈窗：popover.js。
滾動監聽：scrollspy.js。
標籤頁：tab.js。
工具提示：tooltip.js。
11.1.2 安裝外掛
Bootstrap外掛可以單個引入，方法是使用bootstrap提供的單個*.js檔案；也可以一次性全部引入，方法是引入bootstrap.js或者boostrap.min.js。
部分bootstrap外掛和CSS元件依賴於其他外掛。如果需要單獨引入某個外掛時，請確保在文件中檢查外掛之間的依賴關係。
所有bootstrap外掛都依賴於util.js，它必須在外掛之前引入。如果要單獨使用某一個外掛，引用時必須要包含util.js檔案。如果使用的是已編譯bootstrap.js或者bootstrap.min.js檔案，就沒有必要再引入該檔案了，因為其中已經包含了。
提示：util.js檔案包括實用程式函式、基本事件以及CSS轉換模擬器。util.js檔案在bootstrap4原始檔中可以找到，與其他外掛在一個資料夾中。
11.1.3 呼叫外掛
Bootstrap4提供了兩種呼叫外掛的方法，具體說明如下。
1.Date屬性呼叫
在頁面中目標元素上定義data屬性，可以啟用外掛，不用編寫JavaScript指令碼。推薦首選這種方式。
2.JavaScript呼叫
Bootstrap外掛也可以使用JavaScript指令碼進行呼叫。
11.1.4 事件
Bootstrap4為大部分外掛自定義事件。這些事件包括兩種動詞形式，不定式和過去式。
不定式形式：例如show，表示其在事件開始時被觸發。
過去式形式：例如shown，表示在動作完成之後被觸發。
所有不定式事件都提供了preventDefault()功能，這提供了在操作開始之前停止其執行的能力，從事件處理程式返回false也會自動呼叫preventDefault()。
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() //停止顯示模態框 })
按鈕
11.2.1. 切換狀態
新增data-toggle="button"屬性，可以切換按鈕的active狀態，如果你預先需要切換按鈕，必須將.active樣式屬性新增到