Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似，提供了一个扩展的视图，用户只需要把鼠标指针悬停到元素上面即可。弹出框的内容完全由Bootstrap Data API来填充。
用法
弹出框插件根据需要生成内容或标记，默认情况下把弹出框(Popover)放在它们触发元素的后面，您可以有两种方法来启动弹出框
1、通过data属性：如需要添加一个弹出框，只需要向锚或按钮添加一个data-toggle="popover"即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:100px 100px 50px">
<button type="button" class="btn btn-default" data-toggle="popover"data-placement="left"data-content="左则popover中的一些内容"title="popover title">左则的popover</button>
<button type="button" class="btn btn-success"data-toggle="popover"data-placement="right"data-content="右则popover中的一些内容"title="popover title">右则popover中的一些内容</button>
<button type="button" class="btn btn-primary"data-toggle="popover"data-placement="top"data-content="顶部popover中的一些内容"title="popover title">顶部popover中的一些内容</button>
<button type="button"class="btn btn-info"data-toggle="popover"data-placement="bottom"data-content="底部popover中的一些内容"title="popover title">底部popover中的一些内容</button>
</div>
<script>
$("button[data-toggle='popover']").popover();
</script>
</body>
</html>
Bootstrap 弹出框(Popover)插件的更多相关文章
- 第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- Bootstrap历练实例：弹出框(popover)事件
事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...
- 弹出框 popover.js
弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...
- bootstrap弹出框
要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...
- Bootstrap弹出框(modal)垂直居中
最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- Bootstrap的js插件之弹出框(popover)
data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...
- bootstrap 弹出框（Popover）插件 修改title等属性选项值
<button type="button" class="btn btn-default ht-btn" data-toggle="popove ...
- Bootstrap 弹出框和警告框插件
一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...
随机推荐
- BUYING FEED
Problem F: F BUYING FEED Description Farmer John needs to travel to town to pick up K (1 <= K < ...
- Ehab and subtraction(思维题)
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- POJ 2068 NIm (dp博弈，每个人都有特定的取最大值）
题目大意: 有2n个人,从0开始编号,按编号奇偶分为两队,循环轮流取一堆有m个石子的石堆,偶数队先手,每个人至少取1个,至多取w[i]个,取走最后一个石子的队伍输.问偶数队是否能赢. 分析: 题目数据 ...
- MD5WLBUtil
import java.io.UnsupportedEncodingException; import java.security.NoSuchAlgorithmException; import j ...
- sparkSQL元数据缓存不同步 beeline连接的表结构与hive不一致
之前遇到过的坑,通过beeline连接spark thirft server,当在Hive进行表结构修改,如replace/add/change columns后,表结构没有变化,还是旧的表结构,导致 ...
- svn地址迁移
关于svn设置如下: 1. 点击如果所示[Relocate]: 2. 会弹出两个框:一个让你输入用户名密码:一个是svn地址: 3. 先把svn地址改一下,然后输入用户名密码,点确定.就ok啦!
- python 多继承（新式类） 四
转载自:http://blog.sina.com.cn/s/blog_45ac0d0a01018488.html mro即method resolution order,主要用于在多继承时判断调的属性 ...
- ElasticSearch安装(以Docker的方式）
拉取docker镜像: docker pull docker.elastic.co/elasticsearch/elasticsearch:6.1.1 命令行方式启动 测试环境 :docker ...
- 使用Docx.dll插入图片在Centos 7 上报错：system.DllNotFound:libgdiplus.so
熬了N天,终于把WORD 文档打开替换.插入图片完好,部署,本机测试没有问题 可是一放到服务器(Centos 7) 就提示下面的错误: 度娘一下: https://www.cnblogs.com/xi ...
- （已解决）Arduino mega2560 R3插在电脑上没有反应
OK,话不多说.网上找了一些资料,感觉都说的不够清晰.自己琢磨了下,有了一个简单粗暴的方法. 步骤1:插上Arduino mega2560板子.没有反应. 步骤2:我的电脑-管理-设备管 ...