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. 树状数组 || POJ 2352 Stars

    Astronomers often examine star maps where stars are represented by points on a plane and each star h ...

  2. 《3+1团队》【Alpha】Scrum meeting 4

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  3. HDU1116（欧拉路径+并查集）

    题意: 给出一些字符串,有这两个字符串,如果第一个字符串的最后一个字母和第二个字符串的第一个字母是一样的,则这两个字符串是可以连接在一起的. 问给出的这些字符串能否串成一个环或者一整个链. 思路: 将 ...

  4. mysql恢复数据

    1.崩溃恢复: 突然断电.宕机,导致mysql无法正常启动: (1) 关闭数据库. (2) Vim /etc/my.cnf  添加:innodb_force_recovery=1   默认为0. 1( ...

  5. idea Error:(65, 27) java: 未结束的字符串文字

    今天在使用IDEA的时候,出现了这个错误,原因项目文件编码不一致导致的,解决方法是: 将项目的文件编码全改成一致(UTF-8),如下图所示:

  6. 条款20：宁以pass-by-reference-to-const替换pass-by-value(Prefer pass-by-reference-to-const to pass-by-value)

    NOTE: 1.尽量以pass-by-reference-to-const 替换pass-by-value.前者通常比较高效,并可避免切割问题(slicing problem). 2.以上规则并不适用 ...

  7. 生成优惠券，并将优惠券存入Mysql

    #coding:utf-8 import random import string import MySQLdb def gen_charint(filename, width =4, num=5): ...

  8. 剑指Offer（书）：数值的整数次方

    题目:给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 分析: * 要注意以下几点:* 1.幂为负数时,base不能为0,不然求的时候是对 ...

  9. 算法导论 第九章 中位数和顺序统计量(python)

    第i个顺序统计量:该集合中第i小的元素(建集合排序后第i位 当然算法可以不排序) 中位数:集合中的中点元素 下中位数 上中位数 9.1最大值和最小值 单独的max或min每个都要扫一遍 n-1次比较 ...

  10. Android开发——Accessibility机制实现模拟点击（微信自动抢红包实现）

    1. 何为Accessibility机制 许多Android使用者因为各种情况导致他们要以不同的方式与手机交互.对于那些由于视力.听力或其它身体原因导致不能方便使用Android智能手机的用户,And ...