位置: 编程技术 - 正文
推荐整理分享Bootstrap每天必学之弹出框(Popover)插件(bootstrap怎么学),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:bootstrap怎么学,bootstrap需要学多久,bootstrap要学到什么程度,bootstrap要学到什么程度,bootstrap入门,bootstrap快速入门,bootstrap要学到什么程度,bootstrap入门,内容如对您有帮助,希望把文章链接给更多的朋友!
Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。
弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。
如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
一、用法
弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。您可以有以下两种方式添加弹出框(popover):
通过 data 属性:如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。
通过 JavaScript:通过 JavaScript 启用弹出框(popover):$('#identifier').popover(options)弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):$(function () { $("[data-toggle='popover']").popover(); });
二、实例
弹出框即点击一个元素弹出一个包含标题和内容的容器。
弹出框插件有很多属性来配置提示的显示,具体如下:
通过 JavaScript 执行的方法有四个。
Popover 插件中事件有四种:
标签: bootstrap怎么学
本文链接地址:https://www.jiuchutong.com/biancheng/373530.html 转载请保留说明!友情链接: 武汉网站建设