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=" ...
随机推荐
- 谈缓存数据库在web开发中的重要性
1.开局先抛出如下问题: ①当关系型数据库存放的数据量很大时,每次查询耗时明显变长,那么如何解决该问题? ②当业务要求单用户登录(即同一个账户有一个用户登录后,第二个用户再登录该账户要么挤出之前的登录 ...
- eclipse对于虚拟内存的溢出处理
第一个配置:-Xms1024m -Xmx2048m 第二个配置: 第二个配置:-XX:MaxPermSize=1024m 第三个配置就是eclipse安装包中的eclipse.ini文件 -Xms51 ...
- 由奇葩cookie导致服务器500来认识cookie
问题:cookie中文会导致服务器报500错误. 一:cookie的特点 1.以键值对的形式出现的,比如:a=b;b=c 2.中文的值需要转义 cookie的例子 <!DOCTYPE html& ...
- webpack配置Jquery全局包及全局包插件
一:在配置文件配置: plugins: [ //将来以template为模版,生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWe ...
- codeforces C. Vasya And The Mushrooms (思维+模拟）
题意:给定一个2*n的矩形方格,每个格子有一个权值,从(0,0)开始出发,要求遍历完整个网格(不能重复走一个格子),求最大权值和,(权值和是按照step*w累加,step步数从0开始). 转载: 题解 ...
- Testlink安装后配置修改
1.1. config.inc.php 1.1.1. 日志路径配置 /** * @var string Path to store logs - *for security reasons (see ...
- 20-----定位 （Position）
定位 定位有三种: 1.相对定位 2.绝对定位 3.固定定位 这三种定位,每一种都暗藏玄机,所以我们要一一单讲. 相对定位 相对定位:相对于自己原来的位置定位 现象和使用: 1.如果对当前元素仅仅设置 ...
- 在Scala IDEA for Eclipse或IDEA里程序编译实现与在Spark Shell下的对比（其实就是那么一回事）
不多说,直接上干货! 比如,我这里拿主成分分析(PCA). 1.主成分分析(PCA)的概念介绍 主成分分析(PCA) 是一种对数据进行旋转变换的统计学方法,其本质是在线性空间中进行一个基变换,使得变换 ...
- idea没有绑远程地址，如何提交到github的空项目
一 有同事问我怎么提交到github的空项目....这么简单.... 二 1.创建本地的git仓库 选择自己的项目 创建成功 2.添加代码,选中左边的文件,add 3.提交 5.定义远程仓库,不定义的 ...
- mybatis + log4j2 问题 java.lang.NoClassDefFoundError: org/apache/logging/log4j/spi/AbstractLoggerWrapper
root cause java.lang.NoClassDefFoundError: org/apache/logging/log4j/spi/AbstractLoggerWrapper 网上资料比较 ...