Bootstrap插件预览

本文介绍了Bootstrap自带的12种jQuery插件,详细解释了站点如何引用这些插件的方法,包括单独引用和编译引用。此外还阐述了插件对jQuery的依赖关系、data属性的应用、编程方式的API调用、命名空间冲突的解决方法以及自定义事件的触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Bootstrap自带12种jQuery插件,可以给站点添加更多的互动。
站点引用Bootstrap插件的方式有两种
1.单独引用:使用个别的.js文件,一些插件和css组件依赖其他的插件。如果单独引用插件,请先确保这些插件之间的依赖关系。
2.编译引用:使用bootstrap.js或压缩版的bootstrap.min.js都包含了所有的插件
所有的插件依赖于jQuery,所以必须在插件文件之前引用jQuery。
data属性
解除以data-api为命名空间并绑定在文档上的事件

$(document).off('.data-api')

如果关闭一个特定的插件,只需要在data-api命名空间叫上该插件的名称作为命名空间即可

$(document).off('.alert.data-api')

编程方式的API
Bootstrap插件提供了纯javascript方式的API,所有公开的API都是支持单独或链式调用方式,并且但会其操作的元素集合。

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数,或者一个特定方法的字符串,或者不带任何参数

//初始化为默认的行为
$("#myModal").modal()
//初始化为不支持键盘
$("#myModal").modal({keyboard:false})
//初始化并立即调用show
$("#myModal").modal('show')

避免命名空间冲突
某些时候Bootstrap插件可能需要与其他UI框架一起使用,这种情况下可能发生命名空间冲突。如果发生了,可以通过.noConflict方法恢复其原始值

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                         
$.fn.bootstrapBtn = bootstrapButton 

事件
Bootstrap为大多数插件独特行为提供了自定义事件。
动词不定式:show,时间开始时被触发
过去分词形式:动作执行完毕之后被触发。shown

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值