• 技术文章 >web前端 >前端问答

    bootstrap怎么实现右侧悬浮框

    长期闲置长期闲置2022-05-06 11:34:22原创291

    在bootstrap中,可利用popover插件实现右侧悬浮框,该插件用于提供一个扩展视图,设置元素中的“data-placement”属性就可以设置悬浮框的显示方向,语法为“<元素 ...data-placement="right">”。

    本教程操作环境:Windows10系统、bootstrap3.3.7版、DELL G3电脑

    bootstrap怎么实现右侧悬浮框

    Bootstrap 弹出框(Popover)插件

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。

    用法

    弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。您可以有以下两种方式添加弹出框(popover):

    <a href="#" data-toggle="popover" title="Example popover">
        请悬停在我的上面
    </a>
    $('#identifier').popover(options)

    弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):

    $(function () { $("[data-toggle='popover']").popover(); });

    下面的实例演示了通过 data 属性使用弹出框(Popover)插件的用法。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 弹出框(Popover)插件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-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-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>

    输出结果:

    09.png

    相关推荐:bootstrap教程

    以上就是bootstrap怎么实现右侧悬浮框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:es6数组怎么去掉重复并且重新排序 下一篇:aria在bootstrap里是啥意思
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• bootstrap实现响应式布局的原理是什么• vue与bootstrap使用有冲突吗• bootstrap和less是什么关系• bootstrap最多可以分多少列• bootstrap中介效应要看p值吗
    1/1

    PHP中文网