$("#myalert").alert('close') //第一个警告框备关闭了，或者将#myalert换成#myalert1时，第二个警告框将关闭 $('#myalert1').on('closed.bs.alert', function () { alert("close"); --当点击关闭按钮后，执行alert事件 })

八：按钮组件

      注意：

      1：切换按钮的状态（禁用还是打开的）--这个用到autocomplete="off"来实现

      2：将多个按钮形成工具条等

      3：通过设置data-loading-text="loading....."来设置加载的状态

loading state single toggle home message profile

 如果希望在点击button后，更改其内容，添加data-complete-text=“xxxx”即可，同时添加javascript代码如下：

点击后内容自动更改

设置点击button切换状态，并设置切换状态时的时间，可在javascript里面添加如下代码：

<script>
$('#myButton').on('click', function (e) { var btn = $(this).button('loading'); setTimeout(function(e){ btn.button('reset');//设置恢复原始状态 },3000) })
</script>

九：折叠框组件

      注意：使用data-toggle="collapse" 看下代码：

Link with href
hello ,this is test!

另外可结合面板组来进行使用，如下所示：

home 关于我 你好啊 碎碎念

通过点击home来控制内容部分，是设置它的href="#collapseone"即内容所对应的id。

关于事件，跟前面使用的类似，这些组件，进行的时间用法都类似，如下

<script type="text/javascript"> $('#mypanel').on('hidden.bs.collapse', function () { alert("2222"); })
</script>

十：carsousel滑动组件

      注意：使用data-ride="carousel" ,比如像我们通常制作的轮播图等。先看下我制作的轮播图代码：

表示滑动指示，即从哪一张滑到哪一张 绿色阳光阳光心情，你我同行previousnext

效果如下：

     关于滑动的快慢，你可以直接在div中添加data-interval="2000" 设置2秒切换，但这种方法出现问题就是

当你刷新浏览器的时候，必须手动的去点一下左右按钮，然后才能实现切换，最好的办法是在javascript里进行设置。如下代码所示

<script type="text/javascript"> $(".carousel").carousel({ interval:2000; }) </script>

十一：Affix组件

       注意：使用position:fixed进行定位，利用data-spy="affix" 结合data-offset来实现监听，当发生某一事件时，进行偏移。贴码看下列子：

111111111122222222233333333333334444444444455555555566666666667777777777771111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 11111111112222222223333333333333444444444445555555556666666666777777777777 $().affix({ offset:{ } }) $().affix({ offset:{bottom:200 }---当鼠标滚到最下面时，该div会自动偏移到距离底部200px的地方 })

    js组件差不多到此结束，学习bootstrap这个框架也差不多结束了，下一篇终结篇，打算自己专门用bootstrap设计一个页面制作出来，跟大家

分享。如果你也正在学习bootstrap框架，欢迎交流学习哈！

作者：向婷风

 出处：

 如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者

本人同意 转载文章之后必须在 文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。