$("#myalert").alert('close') //第一个警告框备关闭了，或者将#myalert换成#myalert1时，第二个警告框将关闭 $('#myalert1').on('closed.bs.alert', function () { alert("close"); --当点击关闭按钮后，执行alert事件 })
八、按钮组件
注意：
1：切换按钮的状态（禁用还是打开的）--这个用到autocomplete="off"来实现
2：将多个按钮形成工具条等
3：通过设置data-loading-text="loading....."来设置加载的状态
<!-- 按钮 --> <button type="button" data-loading-text="loading...." autocomplete="off" >loading state </button> <button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">single toggle </button> <!-- button组 --> <div data-toggle="buttons"> <label> <input type="checkbox" autocomplete="off" checked>home </label> <label> <input type="checkbox" autocomplete="off" >message </label> <label> <input type="checkbox" autocomplete="off" >profile </label> </div>
如果希望在点击button后，更改其内容，添加data-complete-text=“xxxx”即可，同时添加javascript代码如下：
复制代码 代码如下:
<!-- 点击触发后，将内容进行更改data-complete-text表示为完成后的内容 -->
<button type="button" data-complete-text="finish" autocomplete="off">点击后内容自动更改</button><script> $('.mybtn').on('click', function () { $(this).button('complete') // 内容将变为finish })</script>
设置点击button切换状态，并设置切换状态时的时间，可在javascript里面添加如下代码：
<script> $('#myButton').on('click', function (e) { var btn = $(this).button('loading'); setTimeout(function(e){ btn.button('reset');//设置恢复原始状态 },3000) })</script>
九、折叠框组件
注意：使用data-toggle="collapse" 看下代码：
<a role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href</a> <div> <div> hello ,this is test! </div> </div>
另外可结合面板组来进行使用，如下所示：
<!-- 面板组 --> <div role="tablist"> <!-- 第一个面板 --> <div> <div role="tab"> <h4> <a data-toggle="collapse" data-parent="#mypanel" href="#collapseone">home</a> </h4> </div> <!-- 内容--> <div role="tabpanel"> <div> 关于我 你好啊 碎碎念 </div> </div> </div> <!-- 第二个面板 --> </div>
通过点击home来控制内容部分，是设置它的href="#collapseone"即内容所对应的id。
关于事件，跟前面使用的类似，这些组件，进行的时间用法都类似，如下
<script type="text/javascript"> $('#mypanel').on('hidden.bs.collapse', function () { alert("2222"); }) </script>
十、carsousel滑动组件
注意：使用data-ride="carousel" ,比如像我们通常制作的轮播图等。先看下我制作的轮播图代码：
<div> ---注意data-target的目标 <div data-ride="carousel" > <ol> --indicators表示滑动指示，即从哪一张滑到哪一张 <li data-target="#carousel1" data-slide-to="0"></li>--从第一张开始滑动 <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <!-- 呈现内容 --> <div role="listbox"> <div> <img src="https://www.jb51.net/bg.jpeg"> <div> --carousel-caption承载添加的文字等 <h3>绿色阳光</h3> <p>阳光心情，你我同行</p> </div> </div> <div> <img src="https://www.jb51.net/timg.jpg"> </div> <div> <img src="https://www.jb51.net/article/xx.jpg"> </div> </div> <!-- 左右两个标签--> <a href="#carousel1" role="button" data-slide="pre"> <span aria-hidden="true"></span> <span>previous</span> </a> <a href="#carousel1" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>next</span> </a> </div> </div>
效果如下：
