Bootstrap基本插件学习笔记之Popover提示框(19)


Posted in Javascript onDecember 08, 2016

Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)? 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>Popover提示弹出框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>Popover提示弹出框</h1>
 </div>
 <div>
 <button type="button" class="btn btn-default" data-toggle="popover"
 data-placement="left" title="popover left" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-primary" data-toggle="popover"
 data-placement="right" title="popover right" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-danger" data-toggle="popover"
 data-placement="top" title="popover top" data-content="测试">左边的按钮</button>
 <button type="button" class="btn btn-warning" data-toggle="popover"
 data-placement="bottom" title="popover bottom" data-content="测试">左边的按钮</button>
 </div>

</div>
<script>
 $(function () {
 $("[data-toggle='popover']").popover();
 })
</script>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之Popover提示框(19)

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
JavaScript手机振动API
Jun 11 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
express启用https使用小记
May 21 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 #Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 #Javascript
You might like
PHP输出时间差函数代码
2013/01/28 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
python抓取百度首页的方法
2015/05/19 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
办公室前台岗位职责
2014/01/04 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2016年校长新年寄语
2015/08/17 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS