PHP程序员小白到大牛集训(12期免息)
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    bootstrap中有弹出层吗

    原创2022-06-16 15:57:00757 关注公众号:每天精选资源文章推送

    bootstrap中有弹出层;可以利用Popover插件来实现弹出层,该插件可以根据要求生成指定的内容和标记,将生成的内容放置在指定元素触发的弹出框中,启用弹出框的语法为“元素对象.popover(options)”。

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

    bootstrap中有弹出层吗

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

    如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

    用法

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

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

    <a href="#" data-toggle="popover" title="Example popover">
        请悬停在我的上面
    </a>

    通过 JavaScript:通过 JavaScript 启用弹出框(popover):

    $('#identifier').popover(options)

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

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

    示例如下:

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

    输出结果:

    08.png

    相关推荐:bootstrap教程

    以上就是bootstrap中有弹出层吗的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:bootstrap
  • 相关文章

    相关视频


    专题推荐