Bootstrap -- 插件: 提示工具、弹出框、 警告框…

2018-12-17 10:47:23来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

1. 提示工具(Tooltip)插件:根据需求生成内容和标记。

使用提示工具:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</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>
    <script>
        $(function () { $("[data-toggle='tooltip']").tooltip(); });
    </script>
</head>
<body> 
    <div align="center" style="margin-top:100px;">
        <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a><br/><br/>
        <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a><br/><br/>
        <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a><br/><br/>
        <a href="#" data-toggle="tooltip" data-placement="bottom"title="底部的 Tooltip">底部的 Tooltip</a><br/><br/>
        <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>
    </div>
</body>
</html>
View Code

样式效果:

 

2.弹出框(Popover)插件:根据需求生成内容和标记。

使用弹出框:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</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>
    <script>
        $(function (){
            $("[data-toggle='popover']").popover();
        });
    </script>
</head>
<body>     
    <div class="container" style="padding: 200px 200px 200px;" >
        <button type="button" class="btn btn-default" title="弹出消息"
                data-container="body" data-toggle="popover" data-placement="left"
                data-content="左侧的弹出框 中的一些内容">
            左侧的弹出框
        </button>
        <button type="button" class="btn btn-primary" title="弹出消息"
                data-container="body" data-toggle="popover" data-placement="top"
                data-content="顶部的弹出框 中的一些内容">
            顶部的弹出框
        </button>
        <button type="button" class="btn btn-success" title="弹出消息"
                data-container="body" data-toggle="popover" data-placement="bottom"
                data-content="底部的弹出框 中的一些内容">
            底部的弹出框
        </button>
        <button type="button" class="btn btn-warning" title="弹出消息"
                data-container="body" data-toggle="popover" data-placement="right"
                data-content="右侧的弹出框 中的一些内容">
            右侧的弹出框
        </button>
    </div>
</body>
</html>
View Code

样式效果:

 

 3. 警告框(Alert)消息:大多是用来向终端用户显示诸如警告或确认消息的信息。

 使用警告框消息:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</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>
    <script>
        $(function(){
            $(".close").click(function(){
                $("#myAlert1").alert('close');
                $("#myAlert2").alert('close');
            });
        });
    </script>
</head>
<body>     
    <h3>警告框</h3>
    <div id="myAlert1" class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert">成功消息</a>
        <strong>成功!</strong>程序运行正常。
    </div>
    <div id="myAlert2" class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">警告消息</a>
        <strong>警告!</strong>程序运行异常。
    </div>
</body>
</html>
View Code

 样式效果:

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:浏览器兼容性问题——IE不支持却很实用的CSS属性(一)

下一篇:idea vue.js插件安装