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=" ...
随机推荐
- 树状数组 洛谷P3616 富金森林公园
P3616 富金森林公园 题目描述 博艾的富金森林公园里有一个长长的富金山脉,山脉是由一块块巨石并列构成的,编号从1到N.每一个巨石有一个海拔高度.而这个山脉又在一个盆地中,盆地里可能会积水,积水也有 ...
- 利用canvas实现倒计时功能
wxml代码:<view class=“page-body”><view class=“page-body-wrapper”><canvas canvas-id=“can ...
- 【ACM】Binary String Matching
Binary String Matching 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 Given two strings A and B, whose alp ...
- html 页面跳转方式
网页的跳转在很多时候都非常的有用,下面的是两个简单的例子.仅供参考. 一.用<meta>里直接写刷新语句:5秒后跳转到百度 <html> <head> <me ...
- 022 Generate Parentheses 生成括号
给 n 对括号,写一个函数生成所有合适的括号组合.比如,给定 n = 3,一个结果为:[ "((()))", "(()())", "(())() ...
- 台州OJ 3709: Number Maze （数组越界不报RE，报WA坑爹）
http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3709 You are playing on ...
- python3+Appium自动化01-Appium环境搭建
环境依赖 Node.js Appium Appium-desktop Appium-doctor Appium-Python-Client Python JDK Android SDK 安装Node. ...
- linux 编程笔记1 crusher for linux
1.反显示字符crusher #include <stdio.h> int main (int argc, char *argv[]) { printf("\033[7m mor ...
- 在Controller方法执行之前进行捕获请求，进行类型的转换
@ExceptionHandler(TypeMismatchException.class) public ModelAndView ParseException(Excetion ex,HttpSe ...
- Vue系列：关于侵权前言
因为一开始学习 Vue 的时候,秉持的是"好记性不如烂笔头"的思想,所以这些知识点都是当时查阅然后选择性摘录下来的. 当时并没有很刻意去记录原文出处(现在我知错了..),所以..如 ...