data-toggle="popover"——使弹出框可以切换状态；

title——设置弹出框的标题；

data-content——设置弹出框的内容部分；

data-placement——设置弹出框的方位（top、left、right、bottom,默觉得right）；

data-trigger="focus"——设置焦点事件使用户点击空白处即能切换状态；

很多其它细节參考演示样例：

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>饭盒儿——发现身边不一样的世界</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <script src="js/jquery-2.1.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

    </style>

</head>

<body>

    <div class="container">

        <h3>popover.js演示样例</h3>

        <a href="#" type="button" class="btn btn-default js-popover" data-toggle="popover" title="广州恒大" data-content="唯一一支获得过亚冠冠军的中超俱乐部" data-placement="bottom" data-trigger="focus">

            支持广州恒大

        </a>

    </div>

    <script>

        $(".js-popover").popover();

//        $(".js-popover").popover("show");

    </script>

</body>

</html>

Bootstrap的js插件之弹出框(popover)的更多相关文章

  1. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  2. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  3. 弹出框 popover.js

    弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...

  4. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  5. bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form

    bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

  6. layer.js漂亮的弹出框

    它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...

  7. js简单的弹出框有关闭按钮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 前段js的各种弹出框

    artDialog 首页 > 文档与示例 artDialog —— 经典的网页对话框组件,内外皆用心雕琢. 支持普通与 12 方向气泡状对话框 完善的焦点处理,自动焦点附加与回退 支持 ARIA ...

  9. selenium python （十一）alert/confirm/prompt的处理（js中的弹出框）

    webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept ...

随机推荐

  1. 爬虫学习之第一次获取网页内容及BeautifulSoup处理

    from urllib.request import urlopen from urllib.request import HTTPError from bs4 import BeautifulSou ...

  2. 在window下搭建即时即用的hyperledger fabric 的环境

    有版本号的严格按要求,遇到不少坑 1)安装git  版本无要求 2)安装go  1.9   配置环境变量 3)安装Vagrant  1.9.4 4)安装VirtualBox  5.1.28 5)在go ...

  3. m3u8 格式转MP4

    现在很多视频网站采用HLS流媒体的方式来提供视频直播,在HTML源代码中flash的播放地址为 http://xxxxxx/video/movie.m3u8 1.m3u8下载的格式大致如下: #EXT ...

  4. scrapy example

    scrapy example scrapy with pycharm import win32api 出现ImportError: DLL load failed 错误的解决方法 pip instal ...

  5. ios 之sqllite

    iOS sqlite数据库操作.步骤是: 先加入sqlite开发库libsqlite3.dylib, 新建或打开数据库, 创建数据表, 插入数据, 查询数据并打印 1.新建项目sqliteDemo,添 ...

  6. 拖拽功能-jquery

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. bzoj3272 Zgg吃东西

    题目描述: bz 题解: 线段树模拟费用流. 想法和种树有点类似. 每次取区间内权值和最大的一段,然后整体乘$-1$,代表再次选中时会去掉之前的影响. 线段树维护一堆东西…… 小白逛公园双倍快乐.乘$ ...

  8. nginx+tomcat实现简单的负载均衡

    host1:10.0.0.10(部署nginx和tomcat) host2:10.0.0.11(部署tomcat) 平台环境(2主机一样) [root@smp ~]# uname -r3.10.0-8 ...

  9. 文本三剑客之sed

    sed是一个流编辑器(sed是stream editor的缩写),它可以对从标准输入流中得到的数据进行处理,然后把处理以后得到的结果输出到标准输出,而标准输出通常会关联到终端屏幕,因此处理后的结果也会 ...

  10. 生成 Let's Encrypt 免费https证书

    1.打开 SSL For Free 官网:https://www.sslforfree.com/ 2.在输入框内输入你要申请证书的域名,输入完点击 Create Free SSL Certificat ...