Bootstrap学习笔记--插件之Carousel插件轮播图片，模态插件，提示插件，滚动监听插件，Affix插件
轮播插件：
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>实现图片轮播：
源码：
<html lang="en">
<head>
<title>Bootstrap Exampletitle>
<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">
<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>
<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>
<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">Previousspan>
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">Nextspan>
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="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<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>Chaniah3>
<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>Chaniah3>
<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>Flowersh3>
<p>Beatiful flowers in Kolymbari, Crete.p>
div>
div>
div>
<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">Previousspan>
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">Nextspan>
a>
div>
div>
模态插件：
有三部分组成：
1. “触发器”部分：要触发模式窗口，您需要使用按钮或链接
2. “Modal”部分
3. “Modal内容”部分
单击按钮顶部弹出模式窗口
<html lang="en">
<head>
<title>Bootstrap Exampletitle>
<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 Exampleh2>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modalbutton>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×button>
<h4 class="modal-title">Modal Headerh4>
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">Closebutton>
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“风格模式（边框，背景颜色等）。这里面