<!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. 【亲测】在网页上查找接口，Network--XHR，出来的每个Name都是后台的一个接口

  2. Spring Bean生命周期详解

    对象生命周期:创建(实例化----初始化)---使用----销毁,而在Spring中,Bean对象周期当然遵从这一过程,但是Spring提供了许多对外接口,允许开发者对三个过程(实例化.初始化.销毁) ...

  3. ImageDrawer.js图片绘制插件

    ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画 ...

  4. 保持ssh连接长时间不断开的技巧

    我经常用ssh连接服务器,过段时间不用, 需要恢复一下断开的连接, 原因是NAT防火墙喜欢对空闲的会话进行超时处理,以确保它们状态表的干净和内存的低占用率,因为 长时间保持连接, 会长期占用部分系统资 ...

  5. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  6. leetcode152

    class Solution { public: int maxProduct(vector<int>& nums) { if(nums.empty()) ; ) ]; ]; // ...

  7. windows系统下将nginx作为系统服务启动

    1. 准备工作 下载安装nginx,并记住安装目录 官网下载 下载winsw,下载地址 2. winsw设置 将winsw可执行程序复制到nginx安装目录下,并重命名为nginx-service 新 ...

  8. ARC下野指针 EXC_BAD_ACCESS错误

    一般都是多线程造成的,某一个线程在操作一个对象时,另一个线程将此对象释放,此时就有可能造成野指针的问题.一种解决办法是如果都是UI操作则将这些操作都放在主线程去执行. 通常出现此问题的地方都在RAC, ...

  9. type的解释

    在jquery-19.1.1源码中,type,检查对象的类型是:Boolean/Number/String/Function/Array/Date/RegExp/Object/Error中的一种,返回 ...

  10. chrome.debugger

    官网: https://chromedevtools.github.io/devtools-protocol/ https://developer.chrome.com/extensions/debu ...