【Bootstrap框架】——JS插件（JS plug-in）

妖狐艹你老母 2022-06-08 11:19 190阅读 0赞

共有12个插件函数，与jQueryUI提供的插件函数的地位是一致的，功能也有一定的重合；但是Bootstrap提供的这些插件为了精准的控制样式，代码写起来有些繁琐进而限制了这些插件的广泛使用性。

--------------------

## 调用插件的方式 ##

1.编写JS方式调用：$(‘xxx’).插件函数();  
如：`$('.btn.danger').button('toggle').addClass('fat')`  
2.声明data-\*扩展属性来调用插件函数  
如：`<a data-toggle="dropdown"></a>`

--------------------

<table> 
 <tbody> 
  <tr> 
   <td><b>1.jQuery插件函数——过渡效果</b></td> 
  </tr> 
 </tbody> 
</table>

> transition.js

<table> 
 <tbody> 
  <tr> 
   <td><b>2.jQuery插件函数——下拉菜单</b></td> 
  </tr> 
 </tbody> 
</table>

> data-toggle=”dropdown”

<table> 
 <tbody> 
  <tr> 
   <td><b>3.jQuery插件函数——警告框</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>4.jQuery插件函数——标签页</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>5.jQuery插件函数——弹出提示框</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>6.jQuery插件函数——折叠效果</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>7.jQuery插件函数——轮播广告</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>8.jQuery插件函数——附加导航</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>9.jQuery插件函数——滚动监听</b></td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关前端开发框架、js插件、工具等

一、前端开发工具 1、animation：animation-timing-function的cubic-bezier函数：自定义速度模式的工具网站地址：[http:

雨点打透心脏的1/2处/ 2022年09月24日 06:29/ 0 赞/ 176 阅读

相关 Bootstrap学习js插件篇之轮播

案例下面展示的就是此插件和相关组件制作的轮播案例。 ![Center][] <div id="carousel-example-generic" class

曾经终败给现在/ 2022年08月27日 04:48/ 0 赞/ 228 阅读

相关 4.9Bootstrap学习js插件篇之折叠

关于对为支持折叠功能的组件，例如accordions和导航，赋予基本样式和灵活的支持。插件依赖折叠插件依赖[过渡效果插件][Link 1]。案例

野性酷女/ 2022年08月27日 04:43/ 0 赞/ 229 阅读

相关 4.8Bootstrap学习js插件篇之按钮

案例按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。状态通过添加`data-loading-text="正在加载..."`可

r囧r小猫/ 2022年08月27日 04:42/ 0 赞/ 197 阅读

相关 Bootstrap学习js插件篇之提示框

案例受到Jason Frame开发的jQuery.tipsy插件的启发，我们才把这个工具提示插件做的更好，而且此插件不依赖图片，只是使用CSS3来实现动画效果，并使用d

￡神魔★判官ぃ/ 2022年08月27日 03:58/ 0 赞/ 237 阅读

相关 8、js插件之MagicZoom.js放大镜插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

傷城~/ 2022年06月15日 06:49/ 0 赞/ 338 阅读

相关【Bootstrap框架】——JS插件（JS plug-in）

共有12个插件函数，与jQueryUI提供的插件函数的地位是一致的，功能也有一定的重合；但是Bootstrap提供的这些插件为了精准的控制样式，代码写起来有些繁琐进而限制了这些

妖狐艹你老母/ 2022年06月08日 11:19/ 0 赞/ 191 阅读

相关使用不了Bootstrap的JS插件的原因

昨天想使用Bootstrap的模态框插件，但是却用不了，接着花了2个小时还是没弄出来，结果发现是导入bootstrap.min.js错误，应该是js中的，而我是从css中导入的

川长思鸟来/ 2022年05月23日 08:14/ 0 赞/ 328 阅读

相关 Bootstrap 轮播（Carousel）插件——记录js技能

最近在做官网，需要在`banner`图部分添加一个轮播图，之前代码是用`bootstrap`的轮播插件，我已经很久没有接触过`bootstrap`了，所以很不熟悉这个了……

ゞ浴缸里的玫瑰/ 2021年09月07日 20:36/ 0 赞/ 521 阅读

相关 bootstrap插件学习-bootstrap.modal.js

先从`bootstrap.modal.js`的结构看起。 function($){ var Modal = function(){ } /

怼烎@/ 2021年06月26日 16:06/ 0 赞/ 572 阅读