Bootstrap插件预览-蒲公英云

Bootstrap插件预览

桃扇骨 2022-08-23 08:57 474阅读 0赞

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