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),modal-header 是为模态窗口的头部定义样式的类。
(5)class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。
(6)data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
(7)class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
(8)class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
(9)data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。0x02 JS方式加载
除了上面通过属性方式加载外,还可以通过JS方式加载模态对话框,下面是一个用户登录界面的简单实现:
上面的例子包含了JS加载modal的过程,也包括了设置模态对话框宽度、响应事件等内容。modal方法结合一些参数来实现特殊效果:
(1)把内容作为模态框激活。接受一个可选的选项对象:
$("#myModal").modal({ keyboard:true, })(2)状态切换
$("#myModal").modal('toggle') //手动打开模态框。 $("#myModal").modal('hide') //手动隐藏模态框。0x03 事件
Bootstrap模态对话框还定义了事件,通过“钩子”的方式调用:
(1)show.bs.modal
在调用 show 方法后触发:$('#myModal').on('show.bs.modal', function () { // 执行一些动作... })(2)shown.bs.modal
当模态框对用户可见时触发(将等待 CSS 过渡效果完成):$('#myModal').on('shown.bs.modal', function () { // 执行一些动作... })(3)hide.bs.modal
当调用 hide 实例方法时触发:$('#myModal').on('hide.bs.modal', function () { // 执行一些动作... })(4)hidden.bs.modal
当模态框完全对用户隐藏时触发:$('#myModal').on('hidden.bs.modal', function () { // 执行一些动作... })上面用户登录的例子中事件部分代码:
$("#myModal").on("hidden.bs.modal",function () { alert('test'); })当模态框完全对用户隐藏时,就会调用执行这段JS代码。
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
写下你的评论吧 !推荐阅读
本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]蜡笔小新 2023-12-11 12:06:41 本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]蜡笔小新 2023-12-11 09:19:45 随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]蜡笔小新 2023-12-10 20:05:15 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]蜡笔小新 2023-12-09 17:59:12 本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]蜡笔小新 2023-12-09 09:17:00 2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]蜡笔小新 2023-10-17 19:54:54 :nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。然后,我写了如下h ... [详细]蜡笔小新 2023-10-17 17:10:18 本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]蜡笔小新 2023-12-14 15:52:03 本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]蜡笔小新 2023-12-14 14:37:52 本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]蜡笔小新 2023-12-13 13:58:25 例如控件ID为user.id使用$(#user.id)不能得到正确的结果必须使用\\转义即$(#user\\.id)转载于:https:www.cnblogs.comrch ... [详细]蜡笔小新 2023-12-12 12:22:11 本文主要分析了Netty源代码中服务器端启动的过程,包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用,深入理解Netty服务器端的启动过程。同时,还介绍了LoggingHandler的作用和使用方法,帮助读者更好地理解Netty源代码。 ... [详细]蜡笔小新 2023-12-10 15:42:28 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]蜡笔小新 2023-12-09 17:40:33 常思这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1vue-resource请求本地json文件
- 2调用网络时报错name weight already exists
- 3Photoshop工具栏的使用
- 4php自动部署笔记,php自动化部署工具
- 5使用PreviousPage获取源页信息
- 6linux内核网络钩子函数使用,Linux内核IOCTL网络控制框架实现实例分析
- 7从给定的后序
- 8记一次线上环境的内存溢出(java.lang.OutOfMemoryError)
- 9java io体系_java.IO层次体系结构
- 10MySQL备份与恢复-mysqldump备份与恢复
- 11“双十一”过后,你的数据库还好吗?
- 12c# – 如何在XAML中访问ListBox的DataTemplate(但不是Binding)中的TextBlock?
- 13解决IDEA配置tomcat启动报错问题_Tomcat
- 14linux中export导出数据文件,export与路径、文件内容、执行指令
- 15pandas数据处理常用函数demo之创建/行列操作/查看/文件操作
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有