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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1">
  7.     <title>饭盒儿——发现身边不一样的世界</title>
  8.     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  9.     <script src="js/jquery-2.1.3.min.js"></script>
  10.     <script src="js/bootstrap.min.js"></script>
  11.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  12.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13.     <!--[if lt IE 9]>
  14.     <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  15.     <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  16.     <![endif]-->
  17.     <style>
  18.  
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="container">
  23.         <h3>popover.js演示样例</h3>
  24.         <a href="#" type="button" class="btn btn-default js-popover" data-toggle="popover" title="广州恒大" data-content="唯一一支获得过亚冠冠军的中超俱乐部" data-placement="bottom" data-trigger="focus">
  25.             支持广州恒大
  26.         </a>
  27.     </div>
  28.     <script>
  29.         $(".js-popover").popover();
  30. //        $(".js-popover").popover("show");
  31.     </script>
  32.  
  33. </body>
  34. </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. JS打包与代码分割

    参考来源:https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 后面的代码:https://github.com/94713 ...

  2. Python中的类（2）

    一.使用类和实例 我们先编写一个学生的类,它存储了有关学生的信息,还有一个整合学生信息的方法: student.py class Student(): def __init__(self,name,a ...

  3. 【HDU 2028】Lowest Common Multiple Plus

    Problem Description 求n个数的最小公倍数. Input 输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数. Output 为每组测试数据输出它们的最小公倍数 ...

  4. 【BZOJ 1084】 [SCOI2005]最大子矩阵（DP）

    题链 http://www.lydsy.com/JudgeOnline/problem.php?id=1084 Description 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩 ...

  5. Python数据结构--搜索树

    ''' 二叉搜索树(BST)是一棵树,其所有节点都遵循下述属性 - 节点的左子树的键小于或等于其父节点的键. 节点的右子树的键大于其父节点的键. 因此,BST将其所有子树分成两部分; 左边的子树和右边 ...

  6. NOI模拟赛(3.15) sequence(序列)

    Description 小A有N个正整数,紧接着,他打算依次在黑板上写下这N个数.对于每一个数,他可以决定将这个数写在当前数列的最左边或最右边.现在他想知道,他写下的数列的可能的最长严格上升子序列(可 ...

  7. js总结（三）：面向对象，prototype ,oo模拟

    http://aralejs.org/class/docs/competitors.html http://javascript.crockford.com/prototypal.html proto ...

  8. selenium 3+python3.6+firefox的windows详细环境搭建以及小demo

    最近也是学习了下selenium和python,就记录了下在自己工作机上环境的搭建过程以及小demo 1,安装python3.6.1 我是去官网直接下载当前最新版的python3.6.1 官网网址为h ...

  9. Leetcode 273.整数转换英文表示

    整数转换英文表示 将非负整数转换为其对应的英文表示.可以保证给定输入小于 231 - 1 . 示例 1: 输入: 123 输出: "One Hundred Twenty Three" ...

  10. PHP include和require 区别

    require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...