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

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到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




精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

本文已被整理到了《Bootstrap插件使用教程》,欢迎大家学习阅读。

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

你可能感兴趣的:(Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等))