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. 小菜鸟之oracle触发器

    1.触发器说明 触发器是一种在事件发生时隐式地自动执行的PL/SQL块,不能接受参数,不能被显式调用 2.触发器类型 根据触发器所创建的语句及所影响的对象的不同,将触发器分为以下3类 (1)DML触发 ...

  2. servlet获取checkbox的值出现选中的值为on。问题所在。。。

    <form action="/Http/request06" method="post"> 用户名:<input type="tex ...

  3. HDU 3461 思维+并查集

    Code Lock 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3461 Problem Description A lock you use has ...

  4. python之并发编程(概念篇)

    一.进程 1.什么是进程 进程是正在进行的一个过程或者一个任务.而负责执行任务的则是cpu. 2.进程与程序的区别 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程 ...

  5. Java手写简单Linkedlist一(包括增加,插入,查找,toString,remove功能)

    @Java300 学习总结 一.自定义节点 LinkList底层为双向链表.特点为查询效率低,但增删效率高,线程不安全. 链表数据储存在节点,且每个节点有指向上个和下个节点的指针. 创建ggLinke ...

  6. Inno Setup CreateProcess 失败:代码 740(Inno Setup打包的程序提升为管理员权限)

    原文参考 https://www.cnblogs.com/SnailProgramer/p/4243666.html http://blog.csdn.net/x356982611/article/d ...

  7. MyEclipse10.0 采用插件方式安装 SVN

    一.到官方上下载svn1.8.3,下载后的文件名叫site-1.8.3.zip 地址:http://subclipse.tigris.org/servlets/ProjectDocumentList? ...

  8. C# 批量设置窗体中控件状态的方法

    在开发中常遇到当点击某个按钮的时候,禁用文本框或按钮的的状态,以防止误操作,下面的代码是我已批量设置指定控件中的按钮状态的代码,同理可以延伸出很多操作. /// <summary> /// ...

  9. MVC授权不通过之后不执行任何自定义ActionFilter

    如下一个Action [Authorize] [F1]//自定义过滤器,继承自ActionFilter public ActionResult Index() { return View(); } 如 ...

  10. Java Web-servlet、HTTP in servlet和捎带的Java绘图学习

    Java Web-servlet.HTTP in servlet和捎带的Java绘图学习 server applet:运行在服务器端的小程序 动态项目的动态内容的java类依赖于服务器才能运行,由to ...