• 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>

  • 相关阅读:
    es集群的调优2
    es集群中kibana和es集群的高可用设置
    es集群中参数参数discovery.zen.minimum_master_nodes深度解析
    哔哩哔哩适合后端编程人员的elasticsearch快速实战教程学习总结
    Vue2-基本语句
    SpringBoot-ElasticSearch初使用
    Java-SSO单点登录的3种方式【待完善】
    Java-学习日记(函数式编程与@ControllerAdvice)
    SpringBoot-内置Tomcat启动原理
    Java-学习日记(Atomic,Volatile)
  • 原文地址:https://www.cnblogs.com/melao2006/p/5005928.html
Copyright © 2020-2023  润新知