<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 弹出框（Popover）插件</title>

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="padding: 100px 50px 10px;" >

    <button type="button" class="btn btn-default" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="left"

            data-content="左侧的 Popover 中的一些内容">

        左侧的 Popover

    </button>

    <button type="button" class="btn btn-primary" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="top"

            data-content="顶部的 Popover 中的一些内容">

        顶部的 Popover

    </button>

    <button type="button" class="btn btn-success" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="bottom"

            data-content="底部的 Popover 中的一些内容">

        底部的 Popover

    </button>

    <button type="button" class="btn btn-warning" title="Popover title"

            data-container="body" data-toggle="popover" data-placement="right"

            data-content="右侧的 Popover 中的一些内容">

        右侧的 Popover

    </button>

</div>

<script>

$(function () {

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

});

</script>

</body>

</html>

Bootstrap方法为页面添加一个弹出框的更多相关文章

  1. JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. 仿腾讯微博的一个弹出框 v0.1 beta

    仿腾讯微博的一个弹出框 v0.1 beta   代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...

  3. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  4. HTML页面使用layer弹出框输入数据

    javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...

  5. bootstrap插件bootbox参数和自定义弹出框宽度设置

    插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...

  6. bootstrap的编辑标记 angularjs input 弹出框

    .html <div> {{instance.description}} <span class="glyphicon glyphicon-pencil btn-link& ...

  7. 当页面中(比如弹出框SelectPage)没有textbox等控件如何按Esc关闭

    1.在网页上添加一个空白的ASPxTextBox控件 <dxe:ASPxTextBox ID="txt_Name" Width="1" runat=&qu ...

  8. Windows Phone 8.1基础教程（1） 页面导航、弹出框

    1. 跳转到其他页面 Frame.Navigate(typeof(页面),参数); 2. 后退回历史页面 Frame.GoBack(); 3. 回跳时判断 if(e.NavigationMode == ...

  9. vue.js 利用组件之间通讯，写一个弹出框例子

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

随机推荐

  1. 保存数据到Excel中

    调用的方法传值 Export(dt, "Cal_Report_" + DateTime.Now.ToString("yyyyMMddhhmmss") + &qu ...

  2. Tomcat、TongWeb5.0、TongWeb6.0部署solr

    将solr,solr-4.7.2复制到某一路径下,比如F盘根目录. 1.tomcat中进行配置,配置如下: <Context docBase="F:/solr" reload ...

  3. 05python下

    循环loop 有限循环 ,次数限制 无限循环=死循环 continue 结束本次循环,继续下一次循环 break 跳出整个当前的循环 forwhilebreak continue 数据类型 整数 字符 ...

  4. py目录

    Python开发[第二篇]:初识Python Python开发[第三篇]:Python基本数据类型 Python开发[第四篇]:Python基础之函数   &&[4.1]算法递归 冒泡 ...

  5. __str__ 和 __repr

    #1 默认类里面默认提供的__str__方法,是返回类的内存地址class foo: def __init__(self): pass #2 修改类里面默认提供的__str__方法class fun: ...

  6. threading.local()源码分析

    前段时间写了个多线程的程序,了解到Python中有个与众不同的thread.local()方法,可以创建一个全局对象,各个线程可以用这个全局对象保存各自的局部变量,而在使用时不受其他线程的影响.于是抽 ...

  7. 如何学习DeepLearning

    多年来,科学家们为了搞清楚神经网络的运行机制,进行了无数次实验.但关于神经网络的内在运行方式,目前还没有系统性的理论,没有具体的路线可以指引你获得更好的性能.简单地下载开源工具包直接使用并不能跑出很棒 ...

  8. MySQL中Checkpoint技术

    个人读书笔记,详情参考<MySQL技术内幕 Innodb存储引擎> 1,checkpoint产生的背景数据库在发生增删查改操作的时候,都是先在buffer pool中完成的,为了提高事物操 ...

  9. eclipse配置Servlet连接Mysql要注意的几个地方

    用Servlet即把jdbc那套放到继承于HttpServlet的派生类之内,那段代码很简单 protected void doPost(HttpServletRequest request, Htt ...

  10. python出现编码问题的原因及编码问题的解决

    1,为什么出现编码问题? 一般出现编码问题主要有四个方面: 一,解释器默认的编码和自己文件头编码是否一致 二,操作系统的语言设置问题 三,Terminal使用的编码问题 所有出现乱码的原因都可以归结为 ...