Bootstrap学习笔记--插件之Carousel插件轮播图片，模态插件，提示插件，滚动监听插件，Affix插件

2022-04-17 23:51:00

轮播插件：

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">&times;</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像素时。

码农公寓

轮播插件：

模态插件：

模态大小

提示插件：data-toggle="tooltip"将该 属性添加到元素

Popover插件:

定位弹出：

滚动监听（Scrollspy）插件：（只做简单介绍）

Affix插件：（简单理解）

显示了如何创建一个水平粘贴的导航菜单：

相关文章

提示插件：`data-toggle="tooltip"`将该属性添加到元素