Bootstrap 插件

1.Bootstrap插件概述

  Bootstrap一共提供了十几个插件函数，可以单个引入，也可以一次性全部引入(bootstrap.js)

  使用方法有两种：

  (1)使用JS方式调用

       $('div').modal( );

  (2)使用data-*方式调用 —— 推荐写法

       <div data-toggle="modal">

1、JS插件 —— Collapse

  折叠效果，本身使用很简单：

       <a data-toggle="collapse" href="cid">触发元素</a>

       <div id="cid" class="collapse in">

              内容

       </div>

  折叠效果有两个使用场景：

  (1)手风琴： 折叠效果插件 + 面板组

  (2)响应式导航条

 

2.下拉插件

  1)JS方式调用：

       $('.dropdown  a').dropdown( );

  2)data-*方式调用：

       <a data-toggle="dropdown">

 

3、警告框

  2)data-*方式调用：

       <div class="alert alert-四种颜色">

              <span class="close" data-dismiss="alert">×</span>

              文字内容

       </div>

 

4、折叠效果

  2)data-*方式调用：

       <a data-toggle="collapse" href="target">触发元素</a>

       <div id="target" class="collapse"></div>

Model：  数据模型 Modal：  模态对话框 Module：  模块

5、 模态框

  modal：模态对话框，在父窗口中打开了一个子窗口，只要子窗口不关闭，则父窗口无法获得输入焦点——该子窗口就称为“模态子窗口”。浏览器中默认： window.alert()/confirm()/prompt() 都是模态子窗口，但无法定制。

  一般项目中，使用DIV模拟出模态子窗口的效果：

<a data-toggle="modal" href="#modal-login">弹出模态对话框</a>

 

<div id="modal-login" class="modal"> <!--半透明的遮罩层-->

  <div class="modal-dialog"> <!--尺寸和定位-->

    <div class="modal-content">  <!--背景/边框/倒角/阴影-->

      <div class="modal-header">

        <span class="close" data-dismiss="modal">×</span>

        头部

      </div>

      <div class="modal-body">主体</div>

      <div class="modal-footer">尾部</div>

    </div>

  </div>

</div>

6、工具提示(tooltip)

  提示：不单要用data-*，还要调用js

 

7、弹出框(popover)

  提示：不单要用data-*，还要调用js

 

 

8、轮播广告(Carousel)

  Carousel：旋转木马、轮播广告

  提示：Bootstrap提供的轮播广告结构复杂，只需要记住最外层容器div.carousel，其余内容全部靠Bootlint提示即可。