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=" ...
随机推荐
- POJ1043 What's In A Name?
题目来源:http://poj.org/problem?id=1043 题目大意: 一个犯罪团伙有n个成员,每人有一个唯一的字符串作为id,每人还有一个唯一的字符串作为name.该团伙有一个hideo ...
- 原生DOM操作方法小结
1.0 DOM结构 父节点 兄弟节点 当前节点 属性节点 子节点 兄弟节点 一般任意一个节点我们都会从父节点,子节点,以及兄弟节点的角度去考察.节点一般我们只需关注元素节点,属性节点及文本节点即可 ...
- CSS（二）关于position
position有五种取值 前排说一个问题,2017-10-8日更新: transform会影响定位,导致fixed降级为absolute.无论是transform:translate(),scale ...
- dos for循环
in (phone.txt) do ( 127.0.0.1 > tmp_file ) ) do ( 127.0.0.1 > tmp_file )
- jquery——选项卡
下面是闭包做选项卡: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- mysql主从复制之同步部分库表
这里以mariadb为例,和mysql一样的配置 系统:centos7 主服务器:192.168.0.1:3305(两台服务器都做过时间同步) 从服务器:192.168.0.2:3306(两台服务器都 ...
- linux下拼接字符串的代码
DATA_DIR=/home/liupan/.navinsight/gm result="" for i in $(ls -a $DATA_DIR) do if [ $i != & ...
- Hystrix核心基础 - 滑动窗口创建过程及demo
前言 RxJava可能有些小伙伴没有听过是什么东西,可能是因为大家平时在做业务需求的时候对异步编程了解得比较少,而RxJava就是这么一个响应式编程框架,RxJava在安卓上面用得非常多,做安卓的朋友 ...
- Git把旧仓库的分支拉到新仓库中
背景:项目新建了个git仓库(B仓库),放改版的新项目,现在运维所有项目构建都是在一个Jenkins里构建,然后拉镜像到相应服务器里,为了不让运维每次构建不同项目需要改git仓库地址,需要把原来项目仓 ...
- 提高PHP编程效率的20个要点
用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则 不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中 ...