快好知 kuaihz

如何应用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的弹出框更加的漂亮

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:模态  模态词条  Bootstrap  Bootstrap词条  应用  应用词条  如何  如何词条  
技术

 如何将CAD文件导入到PS中?

操作方法01:CAD的文件是不能直接导入PS的,首先要把他转化成图片格式。这里我们要用到虚拟打印。图案以正方形为例。02:打开软件后,选择文件下面的打印,或者直...(展开)

技术

 javaweb的学习路线

操作方法01:如果你是互联网界的小白零基础,那就要从java的面向对象和基础语法尅是学起,然后熟悉其常用工具,如编写代码软件、设计软件等!02:如果你之前那从事...(展开)