工具/材料

Sublime Text

操作方法

• 01

  首先在HTML5頁(yè)面中添加壓縮好后的bootstrap.min.css樣式文件，如下圖所示，在大多數(shù)的項(xiàng)目中一般都會(huì)運(yùn)用壓縮版的CSS文件

  
• 02

  然后在頁(yè)面中繼續(xù)添加bootstrap.min.js，如下圖所示，這個(gè)文件中定義好了很多常用的腳本效果

  
• 03

  然后我們?cè)赽ody區(qū)域定義button按鈕，點(diǎn)擊這個(gè)按鈕可以出發(fā)模態(tài)框的彈出，如下圖所示

  
• 04

  接下來(lái)我們來(lái)定義模態(tài)框的具體樣式，如下圖所示，通過(guò)調(diào)用modal樣式來(lái)聲明模態(tài)框。注意模態(tài)框的內(nèi)容將會(huì)放在modal-content樣式里

  
• 05

  然后我們就定義模態(tài)框的標(biāo)題，正文和底部?jī)?nèi)容，如下圖所示，它們的樣式分別是modal-header，modal-body和modal-footer

  
• 06

  最后，我們?cè)谀_本標(biāo)簽script里通過(guò)調(diào)用modal方法來(lái)直接讓模態(tài)框彈出，如下圖所示

  
• 07

  運(yùn)行頁(yè)面程序以后，如下圖所示的模態(tài)框就會(huì)呈現(xiàn)在瀏覽器中，它看起來(lái)是不是比JavaScript的彈出框更加的漂亮