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插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
写下你的评论吧 !推荐阅读
本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]蜡笔小新 2024-11-20 17:21:26 Bootstrap 的轮播图(Carousel)组件提供了一种简单而灵活的方法,用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示,还兼容嵌入式框架、视频等多媒体内容。 ... [详细]蜡笔小新 2024-11-20 11:50:55 页面加载进度条是提升用户体验的重要工具,通过在页面头部显示一个加载状态,并在页面完全加载后隐藏,可以有效减少用户的等待焦虑。本文将详细介绍如何使用 jQuery 实现这一功能。 ... [详细]蜡笔小新 2024-11-18 20:00:09 本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件,包括自动触发插件的方法、插件的引用方式以及具体的实例。 ... [详细]蜡笔小新 2024-11-15 12:24:25 回顾两年前春节期间的一个个人项目,该项目原本计划参加竞赛,但最终作为练习项目完成。独自完成了从编码到UI设计的全部工作,尽管代码量不大,但仍有一定的参考价值。本文将详细介绍该项目的背景、功能及技术实现。 ... [详细]蜡笔小新 2024-11-20 18:42:22 《思考致富》是由美国著名成功学大师拿破仑·希尔撰写的一部重要著作,该书基于希尔长达20年的深入研究和访谈,探讨了个人成功的核心要素。书中不仅揭示了成功的关键,还提供了一系列实用的方法和策略。 ... [详细]蜡笔小新 2024-11-20 16:42:07 本文将详细介绍如何在二进制和十六进制之间进行准确的转换,并提供实际的代码示例来帮助理解这一过程。 ... [详细]蜡笔小新 2024-11-20 16:01:54 本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]蜡笔小新 2024-11-20 10:05:15 本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ... [详细]蜡笔小新 2024-11-20 09:46:39 本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]蜡笔小新 2024-11-19 12:43:15 本文介绍了 jQuery 的基本使用方法,包括文档就绪函数和常用的鼠标事件处理,以及各种选择器的详细说明。 ... [详细]蜡笔小新 2024-11-17 11:22:23 本文通过一个具体的案例,展示了如何使用 Python 爬虫技术从京东网站爬取手机的价格和参数。最近发布的 iPhone X 虽然价格昂贵,但不妨碍我们探索其他高性价比的国产手机。 ... [详细]蜡笔小新 2024-11-17 06:52:22 本文描述了在使用Bootstrap时遇到的一个常见问题:页面显示为空白。通过详细分析和解决方法,帮助开发者快速定位并解决问题。 ... [详细]蜡笔小新 2024-11-17 04:32:42 常思这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1Data Guard Service 相关介绍
- 2以只读方式打开PHYSICAL STANDBY数据库,进行测试,然后还原
- 3授权scott用户可以开启执行
- 4sysman密码过期导致oem无法使用
- 5ORA-19809: limit exceeded for recovery files(超出了恢复文件数的限制)
- 6DataGuard备库无法OPEN报ORA-10458:ORA-01152:ORA-01110
- 7在ASM磁盘组间迁移数据文件
- 8Oracle 10g r2上switch over主备库的过程演示
- 9数据库从其他存储系统迁移到ASM
- 10客户端使用SCNAIP连接11G RAC数据库报错ORA-12545解决
- 11Oracle shell调用SQL操作DB
- 12Oracle启用自动归档模式
- 13Oracle面向对象编程OOP
- 14PLSQL无法连Oracle 11g接数据库--问题解决
- 15Oracle Join Methods
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有