<!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. EL(Expression Language)和JSTL标签(JSP Standard Tag Library)

    一.EL表达式: Expression Language提供了在 JSP 脚本编制元素范围外(例如:脚本标签)使用运行时表达式的功能.脚本编制元素是指页面中能够用于在JSP 文件中嵌入 Java代码的 ...

  2. Vue 封装js 并 引用

    /封装模块化文件 新建的.js文件 var storage = { set(key, value) { localStorage.setItem(key, JSON.stringify(value)) ...

  3. mysql数据库优化（四）-项目实战

    在flask项目中,防止随着时间的流逝,数据库数据越来越多,导致接口访问数据库速度变慢.所以自己填充数据进行测试及 mysql优化 1.插入数据: 通过脚本,使用多进程,每100次提交数据 impor ...

  4. Python全栈开发记录_第三篇（linux（ubuntu）的操作）

    该篇幅主要记录linux的操作,常见就不记录了,主要记录一些不太常用.难用或者自己忘记了的点. 看到https://www.cnblogs.com/resn/p/5800922.html这篇幅讲解的不 ...

  5. linux上用route添加/删除路由

    1. 查看 route -n 2. 添加 route add -net 9.123.0.0 netmask 255.255.0.0 gw 9.123.0.1 3. 删除 route del -net ...

  6. spring jdbc学习1

    1.queryForObject - 其中的 RowMapper 指定如何去映射结果集的行, 常用的实现类为 BeanPropertyRowMapper - 使用 SQL 中列的别名完成列名和类的属性 ...

  7. JavaScript学习-1

    本章目录: --------①数据类型. --------②定义变量. --------③类型转换. --------④运算符. --------⑤比较符. --------⑥if语句. ------ ...

  8. javascript权威指南第1章Js概述js语言核心

    <html> <head> <script> function Point(x,y){ this.x=x; this.y=y; } ,); console.log( ...

  9. 2.Yum仓库优化

    1.[初始yum源备份]-[yum更换为国内源]-[添加epel扩展源] #!/bin/bash mkdir /etc/yum.repos.d/backup/ mv /etc/yum.repos.d/ ...

  10. RGB ECT 4BIT 压缩后质量远高于RGB ETC2 4BIT

    今天突然发现这个.原来以为ETC2在任何方面都强于ETC,没想到...用了RGB ETC2 4BIT 压缩的贴图看起来有点糊,改用RGB ECT 4BIT后竟然非常清晰,而且大小与RGB ECT2 4 ...