BootStrap 工具提示弹出框警告框

最新推荐文章于 2024-07-20 15:49:14 发布

xunbaogang

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量4.8k

点赞数

分类专栏： # BootStrap

本文链接：https://blog.csdn.net/xunbaogang/article/details/51984938

版权

BootStrap 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

工具提示

<body style="margin: 100px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
</body>
<script type="text/javascript">
$('button').tooltip();
</script>

弹出框

为任意元素添加一小块浮层，就像 iPad 上一样，用于存放非主要信息。

弹出框的标题和内容的长度都是零的话将永远不会被显示出来。

初始化

由于性能的原因，工具提示和弹出框的 data 编程接口（data api）是必须要手动初始化的。

<body style="margin: 100px;">
    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>
</body>

<script type="text/javascript">
   $('button').popover();
</script>

警告框

通过此插件可以为警告信息添加点击并消失的功能。

    <div class="alert alert-warning fade in">
        <button class="close" data-dismiss="alert"><span>×</span></button>
       <p>您的浏览器不支持</p>
    </div>