1. HEAD 标签之间引入CSS:<link href="../../../public/css/bootstrap.min.css" rel="stylesheet">
  2. BODY标签最末端引入JS:<script src="../../../public/js/jquery.min.js "></script>

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

  3. 在2的基础上再插入两端JS代码:

    <script>

$(function () {

$('[data-toggle="popover"]').popover()

});

</script>

<script>

$(function(){

$('[rel=popover]').popover({

html : true,

content: function() {

return $('#popover_content_wrapper').html();

}

});

});

</script>

  1. 放置一段DIV,这段DIV的作用是显示红色文字:

    <div id="popover_content_wrapper" style="display: none">

<div>

<span style="color:red">Hello</span>

</div>

</div>

  1. 引入将要使用弹出窗口的HTML元素

    <li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">

弹出红色字体

</li>

  1. 效果如下:

    原文章来源 stackoverflow.com

    Bootstrap popover 文档 http://v3.bootcss.com/javascript/#popovers

Bootstrap Popover(弹出框)弹出自定义格式代码的更多相关文章

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

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

  2. alert弹出框 弹出窗口 ----sweetAlert

    推荐一款好用的alert,下面地址是demo,很直观的看到效果,wap可以使用 http://www.dglives.com/demo/sweetalert-master/example/   < ...

  3. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  4. Bootstrap 弹出框和警告框插件

    一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...

  5. 移动web:Tips消息弹出框

    在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...

  6. WindowsPhone模拟简易Toast弹出框

    Coding4Fun这个开源控件中有ToastPrompt这个弹出框组件,但是由于Coding4Fun太庞大,如果只用到ToastPrompt这个控件的话,整个引用不太值当的.于是自己写了一个差不多的 ...

  7. 弹出框中选项卡的运用(easyUI)

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...

  8. javascript弹出框打印某个数值时,弹出NaN?(not a number)

    一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...

  9. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

随机推荐

  1. 龙芯 飞腾 intel的 OpenBenchMarking数据

    1. 今天从openbenchmarking 里面进行了简单的查找. 数据主要为: 机器配置: LS3A3000的数据为: 来源: https://openbenchmarking.org/resul ...

  2. Windows32或64位下载安装配置Spark

    [学习笔记] Windows 32或64位下载安装配置Spark:1)下载地址:http://spark.apache.org/downloads.html 马克-to-win @ 马克java社区: ...

  3. 第十三章 ZYNQ-MIZ701 TIMER定时器中断

      上篇文章实现了了PS接受来自PL的中断,本片文章将在ZYNQ的纯PS里实现私有定时器中断.每隔一秒中断一次,在中断函数里计数加1,通过串口打印输出. 本文所使用的开发板是Miz701 PC 开发环 ...

  4. 关于DB2的使用(DB2数据命令)

           公司所用的数据库有金仓和DB2 首先要用命令窗口直接打开db2需要在cmd中输入:db2cmd 1:启动DB2数据库:db2start 2:连接数据库:db2 connect to  数 ...

  5. Abp 聚合测试

    Abp 官网开始的教程例子,是IRpositoty<entity> 直接出现在应用层.但是如果是一个聚合根也会这样吗?  那么聚合根是访问仓储的最小单元,要通过聚合根来操作业务,就是实体, ...

  6. net core体系-Xamarin-2概要(lignshi)

    通过本套课程的学习,各位学员能够对Xamarin有一个比较清楚的认识,掌握Xamarin常用功能的使用方法,能够比较熟练的使用Xamarin进行App(移动应用)的开发,能够比较轻松.快速地投入项目当 ...

  7. YoloV3 训练崩溃

    经过排查  发现是这里出了问题 然后发现是标注文件里有 x=0 y=0  这样的数据,46_Jockey_Jockey_46_576.txt ,  那么肯定是标注文件出了问题!! 删除该标注文件即可. ...

  8. 0基础学习web技术

    说实话0基础学习前端挺难的,当然也没有是技术是容易学习的 我只是想分享一下我的学习经历: 分为以下几点: 1:学习html和css ,学习完成之后可以模仿各大网站的静态网页 2:学习原生js基础,jq ...

  9. C#面向对象(抽象类、接口、构造函数、重载、静态方法和静态成员)

    1.抽象类    抽象类关键词   abstract   (抽象)  override    (重写) 在父集中用   abstract 表示抽象类,抽象方法,在子集中用  override 改写 抽 ...

  10. Mac上使用sunlogin向日葵软件远程控制电脑

    1 安装软件 控制端和客户端都安装 https://sunlogin.oray.com/personal/download/ 2 再两台电脑上都安装好客户端和控制端后,打开控制端软件 可以看到自己登录 ...