Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

类似Page Header, Breadcrumbs, Dropdowns等，都是Bootstrap的组件，是静态的。如果涉及到交互，Bootstrap提供了插件。这些插件包括：

○ 过渡效果： bootstrap-transition.js○ 模态对话框：bootstrap-modal.js○ 下拉项：bootstrap-dropdown.js......

这些插件可以单独引入到页面。而在bootstrap.js或bootstrap.min.js文件中已经包含了所有的插件。

本篇主要包括：

■ 如何使用Bootstrap插件■ Collapse■ Accordion■ Modal■ Tab■ Tooltip■ Alert■ Carousel

□ 如何使用Bootstrap插件

1、通过调用属性API

<a href="#" class="btn" data-toggle="dropdown"></a>

另外，data-toggle属性需要搭配data-target一起使用。data-target也是Bootstrap的专用属性，用来指定控制对象，它的属性值是一个jQuery选择符。比如：

<button data-toggle="modal" data-target="#id" class="btn"></button>
<div id="id" class="modal hide fade"></div>

如果想禁用属性API

$('body').off('.data-api');

如果想禁用某个属性API，比如禁用alert的属性API

$('body').off('.alert.data-api');

2、通过调用javascript的API

显示下拉菜单

$('.btn').dropdown();

显示模态对话框

$('.btn').click(function(){
    $('#id').modal({
        backdrop: false,
        keyboard: false
    });
})

Bootstrap的插件方法参数也可以是特定意义的字符串。比如：

$('#id').modal('hide');

使用Constructor属性来访问插件

var temp = $.fn.modal.Constructor

使用data方法访问插件

$('[rel = modal]').data('modal')

如果Boostrap与其它UI框架发生命名冲突，可以调用noConflict方法来获取插件

var bootstrapmodal = $.fn.modal.noConflict();

□ Collapse

点击按钮或链接等，显示或隐藏某个区域，比如div。

            <div class="row">
                <ul class="nav nav-pills navbar-default">
<PRe style="font-size: 11px; font-family: consolas,'Courier New',courier,monospace; width: 100%; marg