Bootstrap 插件 Bootstrap

1.Bootstrap插件概述
Bootstrap一共提供了十几个插件函数，可以单个引入，也可以一次性全部引入(bootstrap.js)
使用方法有两种：
(1)使用JS方式调用
$('div').modal( );
(2)使用data-*方式调用 —— 推荐写法
data-toggle="modal">

1、JS插件 —— Collapse

折叠效果，本身使用很简单：
触发元素

内容

折叠效果有两个使用场景：
(1)手风琴：折叠效果插件 + 面板组
(2)响应式导航条

2.下拉插件

1)JS方式调用：
$('.dropdowna').dropdown( );
2)data-*方式调用：
data-toggle="dropdown">

3、警告框

2)data-*方式调用：

data-dismiss="alert">×
文字内容

4、折叠效果

2)data-*方式调用：
data-toggle="collapse" href="https://www.it610.com/article/target">触发元素
target" class="collapse">

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

5、模态框

modal：模态对话框，在父窗口中打开了一个子窗口，只要子窗口不关闭，则父窗口无法获得输入焦点——该子窗口就称为“模态子窗口”。浏览器中默认： window.alert()/confirm()/prompt() 都是模态子窗口，但无法定制。
一般项目中，使用DIV模拟出模态子窗口的效果：
data-toggle="modal" href="https://www.it610.com/article/#modal-login">弹出模态对话框

modal-login" class="modal">

data-dismiss="modal">×
头部

主体
尾部