如何應用Bootstrap的模態框

工具/材料

Sublime Text

操作方法

首先在HTML5頁面中新增壓縮好後的樣式檔案，如下圖所示，在大多數的專案中一般都會運用壓縮版的CSS檔案

然後在頁面中繼續新增，如下圖所示，這個檔案中定義好了很多常用的指令碼效果

然後我們在body區域定義button按鈕，點選這個按鈕可以出發模態框的彈出，如下圖所示

接下來我們來定義模態框的具體樣式，如下圖所示，通過呼叫modal樣式來宣告模態框。注意模態框的內容將會放在modal-content樣式裡

然後我們就定義模態框的標題，正文和底部內容，如下圖所示，它們的樣式分別是modal-header，modal-body和modal-footer

最後，我們在指令碼標籤script裡通過呼叫modal方法來直接讓模態框彈出，如下圖所示

執行頁面程式以後，如下圖所示的模態框就會呈現在瀏覽器中，它看起來是不是比JavaScript的彈出框更加的漂亮