Bootstrap 核心 JS 插件详解：轮播、标签、滚动与下拉菜单
作者：清欢时间：2026-10-30 10:29:59浏览：251
本文总结Bootstrap中常用的六个jQuery插件，包括图片轮播、标签切换、滚动监听、下拉列表、模态框及提示框。详细解析各插件的引入依赖（如jquery.min.js、transition.js）及核心配置方法，结合代码示例说明如何实现导航联动与交互效果，帮助开发者快速掌握Bootstrap前端组件开发。
Bootstrap JS插件概览与文件结构
完成Bootstrap的下载与安装后，开发者可在D:\Program Files\nodejs\node_modules\bootstrap\js目录下找到12个独立的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。
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放 -->
<div data-ride="carousel" class="carousel slide" id="carousel-332839">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-332839">
</li>
<li data-slide-to="1" data-target="#carousel-332839">
</li>
<li data-slide-to="2" data-target="#carousel-332839">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="Carousel Bootstrap First" src="images/Chrysanthemum.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="Carousel Bootstrap Second" src="images/Desert.jpg"/>
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="Carousel Bootstrap Third" src="images/Hydrangeas.jpg">
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div> <a class="left carousel-control" href="#carousel-332839" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-332839" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
（二）标签切换tab.js 实现标签切换功能需引入jquery.min.js与tab.js，同样可通过引入transition.js来增强页面切换的过渡效果。
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="tabbable" id="tabs-440751">
<ul class="nav nav-tabs">
<li class="active">
<a href="#panel-1" data-toggle="tab">Section 1</a>
</li>
<li>
<a href="#panel-2" data-toggle="tab">Section 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-1">
<p>
I'm in Section 1.
</p>
</div>
<div class="tab-pane" id="panel-2">
<p>
I'm in Section 2.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
（三）滚动监听scrollspy.js和下拉列表dropdown.js 结合滚动监听与下拉列表功能，可构建具备下拉菜单且支持滚动定位的导航条。本例需配置特定样式，具体CSS代码如下：
.a,.b{
height: 500px;
width: 100%;
}
.b{
background-color: white;
}
.a{
background-color: black;
}
实现上述功能需引入jquery.min.js、dropdown.js以及scrollspy.js。
<body data-spy="scroll" data-target="#navbarExample">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="navbarExample" class="navbar navbar-default navbar-fixed-top" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#1">Link</a>
</li>
<li>
<a href="#2">Link</a>
</li>
<li class="dropdown">
<a href="#3" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">
Submit
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#4">Link</a>
</li>
<li class="dropdown">
<a href="#5" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<!-- 局部滚动条监听时使用
<div class="col-md-12 scrollspy-example" data-spy="scroll" data-target="#navbarExample"> -->
<div class="col-md-12">
<div class="a" id="1"></div>
<div class="b" id="2"></div>
<div class="a" id="3"></div>
<div class="b" id="4"></div>
<div class="a" id="5"></div>
</div>
</div>
</div>
</body>
</html>
模态框与提示框插件配置
（四）模态框弹出层modal.js 使用模态框插件需引入jquery.min.js与modal.js，如需展示过渡动画，可引入transition.js。
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a id="modal-732948" href="#modal-container-732948" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div class="modal fade in" id="modal-container-732948" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
（五）提示框tooltip.js 使用提示框插件需引入jquery.min.js与tooltip.js，若需添加过渡效果，可引入transition.js。
值得注意的是，Tooltip插件不同于其他纯CSS实现的组件，它必须通过jQuery进行激活才能正常工作。
$(function () { $("[data-toggle='tooltip']").tooltip(); });
<body class="container" style="padding: 100px;" >
<a href="#" class="tooltip-test" data-toggle="tooltip"
title="默认的 Tooltip">默认的 Tooltip</a> <br/>
<a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="top"
title="顶部的 Tooltip">顶部的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">底部的 Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="right"
title="右侧的 Tooltip">右侧的 Tooltip</a> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="默认的 Tooltip">默认的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>
</body>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
若需深入学习，可参考以下链接，本站另附3个精选专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
本文内容已整理至《Bootstrap插件使用教程》，欢迎查阅学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
作者最新文章
JS转整数出现NaN怎么办？常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz：主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15