轮播 bootstrap_Twitter Bootstrap 101：轮播

最新推荐文章于 2025-12-26 18:13:00 发布

翻译最新推荐文章于 2025-12-26 18:13:00 发布 · 201 阅读

文章标签：

#java #python #github #机器学习 #计算机视觉

本文详细介绍了如何使用Twitter Bootstrap创建轮播图，包括必要的标记、JavaScript初始化和自定义设置，帮助读者轻松掌握轮播图的制作。

轮播 bootstrap

Twitter Bootstrap的许多方便功能之一是令人愉悦的滑动轮播，可显示图像和内容！设置并不困难。它需要一些结构化标记，Bootstrap jQuery插件和几行JavaScript来初始化它。让我向您展示如何完成！

截屏

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

对于那些喜欢黑白教程的人，让我们来看一下：

轮播标记
轮播JavaScript
调整轮播设置
提供您自己的内容和标题

第1步：轮播标记

Bootstrap轮播需要具有特定类别的特定标记模式。

轮播和轮播内

<!--  Carousel - consult the Twitter Bootstrap docs at 
      http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->

提供标记后，我们需要初始化轮播JavaScript，以在该轮播上进行工作。

步骤2：轮播JavaScript

让我们首先确保将必要JavaScript连接到此页面。您会在页面底部附近的body标签附近找到JavaScript链接。

jQuery的

链接jQuery的最好，最受推荐的方法是链接到CDN托管的版本。这样可以加快下载速度，并且可能已经缓存在用户的浏览器中。

但是，当然有一个后备功能会很好，这样，如果CDN托管的版本出现问题，用户就可以从您自己的站点文件中本地获取它。这正是HTML5 Boilerplate的好人所推荐的，它看起来像这样：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

请注意，第一行显示的是Google的托管版本。第二行使用JavaScript来检查第一行是否已完成工作。如果没有，它将自动生成指向您自己的jQuery托管副本的链接，该副本已包含在您自己的站点文件中（如我在此处所示）。

Bootstrap的jQuery插件

链接jQuery之后，我们需要Bootstrap的jQuery插件。我已经包含了所有Bootstrap插件的完整编译和缩小版本。因此，我的链接如下所示：

<script src="js/bootstrap.min.js"></script>

初始化轮播

提供jQuery加Bootstrap的插件后，我们只需初始化Carousel插件即可在我们的轮播上进行工作。

<script>
  $(document).ready(function(){
    $('.carousel').carousel();
  });
</script>

用简单的英语来说，这意味着： 一旦HTML文档准备就绪，用"carousel"类标识元素，然后指示carousel插件对其执行操作 。

刷新并检查

标记就绪后，并且正确提供了JavaScript，您应该可以刷新浏览器并查看结果。每次旋转图像需要五秒钟。确保您的鼠标没有悬停在幻灯片上，因为这会暂停其计时器。

步骤3：根据需要调整设置

您可以添加参数以调整轮播滑动行为之间的时间。

例如，您可以将计时更改为2秒（2,000毫秒）间隔，如下所示：

<script>
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 2000
    });
  });
</script>

第4步：您自己的内容和标题

在上面第1步的标记中，我使用了Placehold.it图像。请注意，1200像素宽的图像足够大，可以拉伸标准Bootstrap响应站点的最大最大宽度。我之所以使用1200x480px的比例，仅仅是因为它在视觉上令我愉悦-至少在我的大型显示器上！

此时，您可以自由：

选择所需的图像（轮播可以处理任意数量的图像）。
将它们编辑为所需的尺寸（保持一致）。
如果需要，可以将图像包装在链接中（就像我在演示中所做的那样）。
提供所需的字幕。

结果

永远记住，当您尝试并调整它们时， Twitter Bootstrap的出色文档是您的朋友。并且，如果您可以使用其他帮助，则很多人可以在Twitter Bootstrap Google Group中找到帮助。

看一下最终结果。

翻译自: https://webdesign.tutsplus.com/articles/twitter-bootstrap-101-the-carousel--webdesign-7442

轮播 bootstrap