Bootstrap 插件

1.Bootstrap插件概述

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

  使用方法有两种：

  (1)使用JS方式调用

       $('div').modal( );

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

      

data-toggle="modal">

1、JS插件 —— Collapse

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

       触发元素

      

              内容

      

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

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

  (2)响应式导航条

 

2.下拉插件

  1)JS方式调用：

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

  2)data-*方式调用：

       data-toggle="dropdown">

 

3、警告框

  2)data-*方式调用：

      

              data-dismiss="alert">×

              文字内容

      

 

4、折叠效果

  2)data-*方式调用：

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

      

target" class="collapse">

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

5、 模态框

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

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

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

 

modal-login" class="modal">

 

   

 

     

        data-dismiss="modal">×

        头部

     

     

主体

     

尾部

   

 

6、工具提示(tooltip)

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

 

7、弹出框(popover)

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

 

 

8、轮播广告(Carousel)

  Carousel：旋转木马、轮播广告

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