zoukankan      html  css  js  c++  java
  • Bootstrap 弹出框

    [

    Bootstrap Popover(弹出框)

    描述

    Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。
    在本教程中,您将看到如何使用 Bootstrap Popover,以及如何使用一些可用选项进行定制。

    什么是必需的

    您必须引用 Jquery、Bootstrap CSS 和两个 JavaScript files - 一个用于 Bootstrap Tooltip(工具提示插件),一个用于 Bootstrap Popover(弹出框)。
    用于 Tooltip(工具提示插件)的 JS 文件位于您的 Bootstrap 文件夹中的 js 文件夹下,名为 bootstrap-tooltip.js。用于 Popover(弹出框)的 JS 文件位于您的 Bootstrap 主文件夹中的 js 文件夹下,名为 bootstrap-popover.js。Jquery 位于您的 Bootstrap 主文件夹中的 docs > assets > js 下,名为 jquery.js。或者您可以直接访问 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。
    请确保您在下载 bootstrap-popover.js 之前先下载 bootstrap-tooltip.js。弹出框依赖工具提示插件,因此需要先加载工具提示插件。

    在您的网站中使用 Bootstrap Popover(弹出框)

    实例

    
    <div class="container">
    
        <h2>使用Bootstrap创建弹出框</h2>
    
        <div class="well">
    
            <a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
    
        </div>
    
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
    
    <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
    
    <script>
    
        $(function ()
    
        { $("#example").popover();
    
        });
    
    </script>
    
    

    在线查看实例

    解释

    下面的表格解释了上面的代码。它将帮助您理解如何使用 Bootstrap Popover(弹出框)。

    代码 解释
    id="example" 分配给相关锚的 id,id 的值指向后边要实现 popover(弹出框)的 JavaScript。
    class="btn btn-danger" 创建一个按钮。btn btn-danger 是实例中使用的 class。您可以使用 Bootstrap CSS 中任何其他的 class,或者使用您自己定义的 class。
    data-content="It's so simple to create a tooltip for my website!" data-content 的值显示在 popover(弹出框)的主体中。
    data-original-title="Bootstrap Popover" data-original-title 的值显示为 popover(弹出框)的标题。
    hover for popover 锚文本。
    <script src="https://ajax.googleapis.com/ajax/libs/
    ]
    转载请保留页面地址:https://www.breakyizhan.com/bootstrap/19281.html
  • 相关阅读:
    开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片
    开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址)
    c#实现超实用的<证件照换底色>小工具
    Linux ~ termios 串口编程
    JETSON TK1 ~ 基于eclipse下开发ROS
    JETSON TK1 ~ 控制GPIO
    JETSON TK1~Ubuntu14.04 Armhf源更新
    有意思的代码注释
    RaspBerry Pi3 ~ 内核编译
    C ~ 指针的运算
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13272458.html
Copyright © 2011-2022 走看看