Bootstrap入门（三十）JS插件7：警告框

Bootstrap入门（三十）JS插件7：警告框

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

当使用一个.close按钮，它必须是第一个子元素.alert-dismissible，并没有文字内容。

1.实例

首先，引入CSS文件和JS文件

<link href="bootstrap.min.css" rel="stylesheet">

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

创建一个容器div，在里面创建一个承载div，class为alert，样式为alert-info，由于有动态效果，还要有fade in，为了方便使用，添加一个属于他的id

然后再创建一个关闭按钮

最后是文本内容

        <div class="container">
            <div class="alert alert-info fade in" id="myalert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>hello world!</strong>
            </div>
        </div>

效果，点击之后关闭，而且是有一个动态渐变消失的效果

2。嵌入按钮

其实里面还可以承载更多东西，比如button按钮

为了对比，在alert的承载div下面我们在创建一个新的div

添加代码

            <div class="alert alert-info fade in" id="myalert2">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>hello world!</strong>
                <button type="button" class="btn btn-primary">点击关闭</button>
            </div>

效果：

3.添加JS代码

有时候我们是想直接关闭这个警告框

可以添加代码

        <script>
            $("#myalert").alert("close");
        </script>

效果是打开页面之后，第一次创建的警告框消失了，只看到第二个

修改一下代码，用第二个作为实例

            $("#myalert2").on("close.bs.alert",function(e){
                console.log("hello world!");
            })

打开网页后，先右键，检查，然后选择console，在点击关闭按钮之后，console界面出现“hello world！”