http://www.imounted.com

                                                                  【极速快三appapp】bootstrap4如何设置弹出框-Bootstrap教程

                                                                  弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。

                                                                  如何创建弹出框(推荐学习:Bootstrap视频教程)

                                                                  通过向元素添加 data-toggle="popover" 来来创建弹出框。

                                                                  title属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容:

                                                                  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>,;

                                                                  注意: 弹出框要写 jQuery的初始化代码里: 然后在指定的元素上调用popover()方法。

                                                                  以下实例可以在文档的任何地方使用弹出框:

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

                                                                  完整代码:

                                                                  默认情况下,弹出框在再次点击指定元素后就会关闭,你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框。

                                                                  <!DOCTYPE html><html><head>  <title>Bootstrap 实例</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script></head><body><(div class="container">  <h3>弹出框实例&]lt;/h3> <br>  <a href=)"#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a></div><script>$(document).ready(function(){    $('[data-toggle="popover"]').popover();   });</script></body>[;</html>

                                                                  更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

                                                                  以上就是bootstrap4如何设置弹出框的详细内容,更多请关注php中文网其它相关文章!

                                                                1. 微信
                                                                2. 分享php中文网最新课程二维码相关标签:bootstrap4
                                                                3. 本文原创发布php中文网
                                                                4. 郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:bootstrap是什么意思啊-Bootstrap教程
                                                                  下一篇:没有了