热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Bootstrap基本插件学习笔记之模态对话框(16)

这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之模态对话框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap自带了很多JQuery插件,给用户做前端开发提供了很大的方便。对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意的是一些插件和CSS组件可能依赖其他插件,所以单独引用的时候,需要弄清楚这种包含关系一并引用;二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js,需要注意的是不能同时引用这2个文件。

Bootstrap自带了很多基本的插件,包括模态对话框、标签切换、Tooltip提示工具等。首先来总结下模态对话框的使用。

0x01基本样式

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。Bootstrap Modals(模态框)是使用定制的JQuery插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。
下面是一个基本样式:




 
 
 
 

几点说明:

(1)使用模态窗口,需要有某种触发器,可以使用按钮或链接。这里我们使用的是按钮。
(2)data-target="#myModal" 是想要在页面上加载的模态框的目标。
(3)在模态框中需要注意两点:一是.modal,用来把

的内容识别为模态框;二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
(4)
author-avatar
常思
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有