bootstrap 插件 计算器_bootstrap 支持的JavaScript插件

一次性导入：

Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js(压缩版本：bootstrap.min.js)。

具体使用如下(或见右侧代码编辑器28-29行)：

特别声明：jQuery版本库也可以加载你本地的jQuery版本。

单独导入：

为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：

☑ 动画过渡(Transitions):对应的插件文件“transition.js”

☑ 模态弹窗(Modal):对应的插件文件“modal.js”

☑ 下拉菜单(Dropdown)：对应的插件文件“dropdown.js”

☑ 滚动侦测(Scrollspy)：对应的插件文件“scrollspy.js”

☑ 选项卡(Tab)：对应的插件文件“tab.js”

☑ 提示框(Tooltips)：对应的插件文件“tooltop.js”

☑ 弹出框(Popover)：对应的插件文件“popover.js”

☑ 警告框(Alert)：对应的插件文件“alert.js”

☑ 按钮(Buttons)：对应的插件文件“button.js”

☑ 折叠/手风琴(Collapse)：对应的插件文件“collapse.js”

☑ 图片轮播Carousel：对应的插件文件“carousel.js”

☑ 自动定位浮标Affix：对应的插件文件“affix.js”

模态弹出框--模态弹出窗的使用(data-参数说明)

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

JavaScript触发的弹出窗代码：

$(function(){

$(".btn").click(function(){

$("#mymodal").modal();

});

});

模态弹出框--JavaScript触发时的参数设置(一)

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

属性设置

模态弹出窗默认支持的自定义属性主要有：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){

$(".btn").click(function(){

$("#mymodal").modal({

keyboard:false

});

});

});

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

参数

使用方法

描述

toggle

$(“#mymodal”).modal(“toggle”)

触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示

show

$(“#mymodal”).modal(“show”)

触发时，显示模态弹出窗

hide

$(“#mymodal”).modal(“hide”)

触发时，关闭模态弹出窗

事件设置：

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

事件类型

描述

show.bs.modal

在show方法调用时立即触发(尚未显示之前)；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性

shown.bs.modal

该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件

hide.bs.modal

在hide方法调用时(但还未关闭隐藏)立即触发

hidden.bs.modal

该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发

调用方法也非常简单：

$('#myModal').on('hidden.bs.modal', function (e) {

// 处理代码...

})

下拉菜单(Dropdown)dropdown.js

(官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js)

W3cplus

• 教程