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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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
搜索引擎技术核心揭密
2006/10/09 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
详解Python进程间通信之命名管道
2017/08/28 Python
python实现textrank关键词提取
2018/06/22 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python重要函数eval多种用法解析
2020/01/14 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
销售类个人求职信范文
2013/09/25 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
中班开学寄语
2014/04/04 职场文书
大学生演讲稿
2014/04/25 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
python实现简易名片管理系统
2021/04/11 Python
Python Pandas知识点之缺失值处理详解
2021/05/11 Python