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

最新推荐文章于 2025-03-26 15:28:30 发布

codingCoge

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量1.2k

点赞数 1

分类专栏：网页前端

本文链接：https://blog.youkuaiyun.com/qq_38409944/article/details/80481560

版权

这篇博客详细介绍了Bootstrap的几个核心插件： Carousel插件用于实现轮播图片效果，模态插件展示了模态对话框的创建和大小调整，提示插件和Popover插件提供了不同类型的提示信息，滚动监听(Scrollspy)插件自动更新导航，而Affix插件则实现了元素的固定定位。示例代码和实际效果展示帮助理解每个插件的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播插件：

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

最低0.47元/天解锁文章