如何應用Bootstrap的模態框
在制作頁面的時候，實現彈出框一般會用JavaScript內置的方案。但是JavaScript內置的彈出框非常的丑陋，如果想實現漂亮的樣式，就需要運用Bootstrap里面的模態框了。下面小編給大家分享如何應用Bootstrap的模態框。
東西/材料
Sublime Text
操作方式
-
01
起首在HTML5頁面中添加壓縮好后的bootstrap.min.css樣式文件，如下圖所示，在年夜大都的項目中一般城市運用壓縮版的CSS文件
-
02
然后在頁面中繼續添加bootstrap.min.js，如下圖所示，這個文件中界說好了良多常用的劇本結果
-
03
然后我們在body區域界說button按鈕，點擊這個按鈕可以出發模態框的彈出，如下圖所示
-
04
接下來我們來界說模態框的具體樣式，如下圖所示，經由過程挪用modal樣式來聲明模態框。注重模態框的內容將會放在modal-content樣式里
-
05
然后我們就界說模態框的題目，正文和底部內容，如下圖所示，它們的樣式別離是modal-header，modal-body和modal-footer
-
06
最后，我們在劇本標簽script里經由過程挪用modal方式來直接讓模態框彈出，如下圖所示
-
07
運行頁面法式今后，如下圖所示的模態框就會呈此刻瀏覽器中，它看起來是不是比JavaScript的彈出框加倍的標致
- End
- 發表于 2018-03-05 00:00
- 閱讀 ( 707 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章