bootstrap弹出框

约定不等于承诺〃 2022-08-23 14:00 390阅读 0赞

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件:

jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

bootstrap-tooltip.js

bootstrap-popover.js

bootstrap.css

我试过不引入bootstrap-tooltip.js和bootstrap-popover.js这两个js文件.但是效果不是很好.当鼠标移入进去的时候不能即时的弹出提示层(而是必须点击按钮才行).这显然不是我们要的效果.

以下是我做的实例代码:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
        <title>bootstrap弹出框</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
        <script  src="bootstrap/js/jquery.1.9.1.js"></script>
        <script  src="bootstrap/js/bootstrap-tooltip.js"></script>
        <script  src="bootstrap/js/bootstrap-popover.js"></script>
        
    </head>    
    
    <body>
        <div class="container">
        <h2>
            我是弹出框的实例
        </h2>
        <div class="well">
            <a href="#" id="example" class="btn btn-danger"
             rel="popover" data-content="我是弹出框显示内容" data-original-title="我是标题">点我,我是弹出框</a>
        </div>
        
        </div>
    
    </body>
    <script type="text/javascript">
    $(function ()
    { $("#example").popover();
    });
    </script>
    </html>

值得注意的是下面这段js代码是我们必须要引入的(id可以换成自己起的):

在测试过程中也遇到了一些问题.比如弹出层的样式不是自己想要的效果:

![130914382347374.jpg][]

这显然不是我们想要的结果,我们要的效果"我是弹出框显示内容"应该要比标题小的.于是我先看了下bootstrap-popover.js文件,发现这部分代码用的样式是.popover-content.于是我又去bootstrap.css中查找该class

.popover-content {
      padding: 9px 14px;
    //这里是我修改过的 如果修改默认的尺寸为14
      font-size: 10px;
    }

修改后的效果如图:

![130917541405091.jpg][]

这样弹出框的实例就完成了.希望对大家有帮助.

[ContractedBlock.gif]: http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220823/56db2af4e623429d9f9d3b63e00f03c9.png
[130914382347374.jpg]: /images/20220823/10d0e358778d4be7b48b075cea248c36.png
[130917541405091.jpg]: /images/20220823/ca0027229154450fbdcce756e2ab6982.png