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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
javascript 回调函数详解
Nov 11 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python实现画图工具
2020/08/27 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
小学教研工作制度
2014/01/15 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
为什么不建议在go项目中使用init()
2021/04/12 Golang
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server