• Bootstrap 弹出框(Popover)插件


    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可。弹出框的内容完全由Bootstrap Data API来填充。

    用法

    弹出框插件根据需要生成内容或标记,默认情况下把弹出框(Popover)放在它们触发元素的后面,您可以有两种方法来启动弹出框

    1、通过data属性:如需要添加一个弹出框,只需要向锚或按钮添加一个data-toggle="popover"即可。锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div style="padding:100px 100px 50px">
    <button type="button" class="btn btn-default" data-toggle="popover"data-placement="left"data-content="左则popover中的一些内容"title="popover title">左则的popover</button>
    <button type="button" class="btn btn-success"data-toggle="popover"data-placement="right"data-content="右则popover中的一些内容"title="popover title">右则popover中的一些内容</button>
    <button type="button" class="btn btn-primary"data-toggle="popover"data-placement="top"data-content="顶部popover中的一些内容"title="popover title">顶部popover中的一些内容</button>
    <button type="button"class="btn btn-info"data-toggle="popover"data-placement="bottom"data-content="底部popover中的一些内容"title="popover title">底部popover中的一些内容</button>
    </div>
    <script>
    $("button[data-toggle='popover']").popover();
    </script>
    </body>
    </html>

  • 相关阅读:
    Android基本功:Socket
    Javascript模板及其中的数据逻辑分离思想
    MFC,QT与WinForm,WPF简介
    GPIB、USB、PCI、PCI Express和以太网/LAN/LXI
    Office批量授权(VL)版本和激活方法
    Labview 错误1400-打包库封装类时将对类重命名导致
    console.log()
    a标签中href=""的几种用法
    正斜杠"/"与反斜杠""
    提问的艺术
  • 原文地址:https://www.cnblogs.com/melao2006/p/5005928.html
Copyright © 2020-2023  润新知