如何应用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
- 阅读 ( 708 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章