轮播插件：
Carousel插件： 轮播插件。
是一个通过元素循环的组件，如旋转木马（幻灯片）
插件可以单独包含（使用Bootstrap“carousel.js”文件），或者一次全部使用（使用“bootstrap.js”或“bootstrap.min.js”）。
注意：
在Internet Explorer 9及更早版本中不被正确支持（因为它们使用CSS3转换和动画来实现幻灯片效果
举例：
<script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>实现图片轮播：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="3.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
效果图：
最外面的<div>：
传送带要求使用id="myCarousel"传送带控件的id（在这种情况下）才能正常工作。
的class="carousel" 规定，这<div>包含传送带。
该.slide 课程添加了一个CSS过渡和动画效果，这使得项目在显示新项目时可以滑动。如果你不想要这个效果，请省略这个类。
该data-ride="carousel" 属性告诉Bootstrap在页面加载时立即开始为轮播制作动画。
“指标”部分：
指标是每张幻灯片底部的小点（表示转盘中有多少张幻灯片，以及用户当前正在查看哪张幻灯片）。
这些指标在具有等级的有序列表中指定.carousel-indicators。
该data-target属性指向传送带的ID。
data-slide-to当点击特定的点时，该属性指定要去哪个幻灯片。
“幻灯片包装”部分：
幻灯片在<div>课堂上指定.carousel-inner。
每个幻灯片的内容都是<div>用class 来定义的.item。这可以是文字或图像。
该.active课程需要添加到其中一张幻灯片中。否则，传送带将不可见。
“左右控件”部分：
此代码添加了“左”和“右”按钮，允许用户手动在幻灯片之间来回切换。
该data-slide属性接受关键字，"prev"或"next"相对于其当前位置改变幻灯片位置。
添加<div class="carousel-caption">在<div class="item">
还可以给图片添加标题和说明文字哦
源码：
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="3.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>效果图：
模态插件：
是显示在当前页面顶部的对话框/弹出窗口
有三部分组成：
1. “触发器”部分：要触发模式窗口，您需要使用按钮或链接
2. “Modal”部分
3. “Modal内容”部分
举个栗子：
单击按钮顶部弹出模式窗口
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
分析：
“触发器”部分：
要触发模式窗口，您需要使用按钮或链接。
然后包含两个data- *属性：
data-toggle="modal" 打开模式窗口
data-target="#myModal" 指向模态的id
“Modal”部分：
<div>模态的父级必须具有与用于触发模态的数据目标属性（“myModal”）的值相同的ID。
本.modal类标识的内容<div>为模式，并带来聚焦到它。
这个.fade类增加了一种淡入淡出模式的过渡效果。如果你不想要这个效果，请删除这个类。
该属性role="dialog"改善了使用屏幕阅读器的人的可访问性
的.modal-dialog类设置的模态的适当的宽度和幅度。
“Modal内容”部分：
在<div>与class="modal-content“风格模式（边框，背景颜色等）。这里面<div>，添加模式的标题，正文和页脚。
在.modal-header类用于定义样式的模态的头。在<button>头内有一个data-dismiss="modal"，如果你点击它，其封闭模式的属性。的.close类样式的关闭按钮，和.modal-title类样式以适当的行高的报头。
在.modal-body类用于定义样式的模态的身体。在这里添加任何HTML标记; 段落，图片，视频等
在.modal-footer类用于定义样式为模态的脚注。请注意，此区域默认情况下是右对齐的。模态大小
通过添加.modal-sm 小模态的类或.modal-lg大模态的类来 更改模态的大小。
将大小类添加到<div>具有class 的元素.modal-dialog：
小模式窗口：
<div class="modal-dialog modal-sm">
大模式窗口：
<div class="modal-dialog modal-lg">
提示插件：data-toggle="tooltip"将该 属性添加到元素
提示插件是用户将鼠标指针移到元素上时出现的小型弹出框：
使用该title属性来指定应在工具提示内显示的文本 tooltip()指定可以弹出小黑框框的元素
注意：默认情况下，工具提示将出现在元素的顶部。
举个栗子：
<div class="container">
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>当你鼠标有移动到该超链接位置时，就会在连接上方弹出一个黑色小框框显示 Hooray!
提示框位置： data-placement属性可以在元素的顶部，底部，左侧或右侧设置工具提示的位置
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>“auto”的data-placement属性，这会让浏览器决定工具提示的位置。
Popover插件:
Popover插件与工具提示类似;
它是一个弹出框，当用户点击一个元素时出现。区别在于popover可以包含更多内容。
再次单击元素时，弹出窗口会关闭，单击其他地方无效
Popovers必须用jQuery初始化：选择指定的元素并调用popover（）方法。
源码：
<div class="container">
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>title表示标题 data-content表示内容
效果图：
定位弹出：
默认情况下，弹出窗口将显示在元素的右侧 data-placement属性来设置元素顶部，底部，左侧或右侧的弹出位置
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>注意：还可以使用值为“auto”的data-placement属性，这将允许浏览器确定弹出窗口的位置。
data-trigger="focus"
默认情况下，当您再次单击元素时，弹出窗口会关闭。
但是，您可以使用data-trigger="focus"在单元外部单击时关闭弹出窗口
举例：
<div class="container">
<a href="#" data-toggle="popover" title="Popover Header" data-trigger="focus" data-content="Some content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>data-trigger=“hover”
在将鼠标指针移到元素上时显示弹出窗口
离开时 退出弹出窗口
举例：
<div class="container">
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>滚动监听（Scrollspy）插件：（只做简单介绍）
具体参考：https://www.quanzhanketang.com/bootstrap/bootstrap_scrollspy.html
即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
向您想要监听的元素（通常是 body）添加 data-spy=”scroll”。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
模板：
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>
</div>
...
</body>举例：
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">11111111</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">2222222222</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="navbarDrop1">
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
<li><a href="#ejb" tabindex="-1">ejb</a></li>
<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<h4 id="ios">iOS</h4>
<p>aaaaaa
</p>
<h4 id="svn">SVN</h4>
<p>bbbbbbbbbbbb
</p>
<h4 id="jmeter">jMeter</h4>
<p>ccccccccccccccc
</p>
<h4 id="ejb">EJB</h4>
<p>ddddddddddddddd
</p>
<h4 id="spring">Spring</h4>
<p>eeeeeee
</p>
<p>ffffffff
</p>
</div>
</body>添加data-spy="scroll"到应该用作可滚动区域的<body>元素（通常这是元素）。
然后添加该data-target属性的id或导航栏的类名称（.navbar）的值。这是为了确保导航栏与可滚动区域连接。
请注意，可滚动元素必须与导航栏列表项（<div id="section1">匹配<a href="#section1">）内的链接的ID 相匹配。
可选data-offset属性指定在计算滚动位置时从顶部偏移的像素数。当你感觉到在跳转到可滚动元素时，导航栏内的链接过早或过早地改变活动状态时，这很有用。默认值是10像素。效果图：
Affix插件：（简单理解）
具体的：https://www.quanzhanketang.com/bootstrap/bootstrap_affix.html
允许将元素粘贴（锁定）到页面上的某个区域。这通常与导航菜单或社交图标按钮一起使用，以便在页面上下滚动时使其“粘”在特定区域。
显示了如何创建一个水平粘贴的导航菜单：
如图 下拉网页 导航栏还存在
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">源码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
显示如何创建垂直粘贴的导航菜单：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<nav class="col-sm-3">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<div class="col-sm-9">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</div>
</div>
</body>
</html>
示例解释
添加data-spy="affix"到你想添加的元素。
或者，添加该data-offset-top|bottom属性以计算滚动的位置。
怎么运行的
词缀插件切换三者类：.affix，.affix-top，和 .affix-bottom。每个班级代表一个特定的州。您必须添加CSS属性来处理实际职位，除了position:fixed 在.affix课程中。
该插件添加.affix-top或.affix-bottom类以指示该元素位于其最上方或最下方的位置。此时不需要使用CSS定位。
通过粘贴元素滚动会触发实际粘贴 - 这是插件用类（集合）代替.affix-top或.affix-bottom类的地方 。此时，您必须添加CSS 或属性以在页面中放置加贴的元素。.affixposition:fixedtopbottom
如果定义了底部偏移量，则滚动它将替换.affix 该类.affix-bottom。由于偏移是可选的，因此设置偏移需要您设置适当的CSS。在这种情况下，position:absolute必要时添加。
在上面的第一个示例中，.affix当我们从顶部滚动197个像素时，Affix插件将类（position：fixed）添加到<nav>元素。如果你打开这个例子，你也会看到我们top为这个.affix类添加了一个值为0 的CSS 属性。这是为了确保导航栏始终保持在页面的顶部，当我们从顶部滚动197像素时。
