欢迎来到福编程网,本站提供各种互联网专业知识!

Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)

发布时间:2016-07-14 作者:u013511989 来源:转载
这篇文章主要为大家详细介绍了Bootstrap最常用的JS插件,包括图片轮播carousel.js、标签切换tab.js、滚动监听scrollspy.js等,感兴趣的小伙伴们可以参考一下

在Bootstrap下载与安装后,可以在D:Program Filesnodejsnode_modulesbootstrapjs中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:Program Filesnodejsnode_modulesbootstrapdistjs中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件。

在这12个jQuery插件中,最常用的有图片轮播carousel.js、标签切换tab.js、滚动监听scrollspy.js、下拉列表dropdown.js、模块框弹出层modal.js提示框tooltip.js

(一)图片轮播carousel.js

图片轮播可以根据需要在css中设置图片大小,位置等。

图片轮播需要引入jquery.min.js、carousel.js,也可以引入transition.js添加过渡效果。

(二)标签切换tab.js

标签切换需要引入jquery.min.js、tab.js,也可以引入transition.js添加过渡效果。

I'm in Section 1.

I'm in Section 2.

(三)滚动监听scrollspy.js和下拉列表dropdown.js

将滚动监听和下拉列表结合起来 制作 拥有下拉列表的可以滚动监听的导航条。

需要设置样式,本例的样式为:

.a,.b{
 height: 500px;
 width: 100%;
}
.b{
 background-color: white;
}
.a{
 background-color: black;
}

需要引入jquery.min.js、dropdown.js、scrollspy.js。

 
 


 

(四)模块框弹出层modal.js

需要引入jquery.min.js、modal.js,也可以引入transition.js添加过渡效果。

Launch demo modal

(五)提示框tooltip.js

需要引入jquery.min.js、tooltip.js,也可以引入transition.js添加过渡效果。

另外,Tooltip插件不像其他插件那样,它不是纯 CSS 插件。如需使用该插件,必须使用 jquery 激活它。

$(function () { $("[data-toggle='tooltip']").tooltip(); });
 
  默认的 Tooltip  

左侧的 Tooltip

顶部的 Tooltip

底部的 Tooltip

右侧的 Tooltip

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐