首页 > > 网页制作 > css >

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

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

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>