如何應用Bootstrap的模態框

工具/材料

Sublime Text

操作方法

首先在HTML5頁面中添加壓縮好後的樣式文件，如下圖所示，在大多數的項目中一般都會運用壓縮版的CSS文件

然後在頁面中繼續添加，如下圖所示，這個文件中定義好了很多常用的腳本效果

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

接下來我們來定義模態框的具體樣式，如下圖所示，通過調用modal樣式來聲明模態框。注意模態框的內容將會放在modal-content樣式裏

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

最後，我們在腳本標籤script裏通過調用modal方法來直接讓模態框彈出，如下圖所示

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