下面先来搭建传送带,传送带会循环展示我们作品的4张特写图片。

Bootstrap传送带的标记结构可以在其文档页面找到,URL为:http://getbootstrap.com/javascript/#carousel

可以按照示例中的结构设置其中的元素。以下代码就是传送带的所有标记,包含各个部分,首先是进度指示器:

<div id="homepage-feature" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#homepage-feature" data-slide-to="0"
      class="active"></li>
    <li data-target="#homepage-feature" data-slide-to="1"></li>
    <li data-target="#homepage-feature" data-slide-to="2"></li>
    <li data-target="#homepage-feature" data-slide-to="3"></li>
  </ol>

整个传送带是一个带ID属性(id="homepage-feature")的div标签,其carousel类用于把Bootstrap的传送带CSS应用到这个元素,为指示器、传送带项和前一张及后一张控件添加样式。

进度指示器的data-target属性必须使用传送带的ID homepage-feature。有了这个属性,JavaScript插件才能为活动的传送带项添加active类。在此我们预先为第一个指示器添加了active类。然后,类的切换就由JavaScript控制了。它会删除第一个指示器的这个类,再添加到后续指示器,如此循环。

此外,还要注意data-slide-to的值从0开始,与JavaScript和其他编程语言一样。记住:从0开始,不是从1开始。

指示器后面,是类为carousel-inner的元素。这个元素是所有传送带项(item),也就是所有图片。

carousel-inner元素内部是传送带项,是一组div标签,每个都带着class="item"。把第一项修改成包含itemactive两个类,使其一开始就可见。

此时的标记结构如下所示:

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
  </div>
  <div class="item">
    <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
  </div>
  <div class="item">
    <img src="img/bso.jpg" alt="Bartlesville Symphony Homepage">
  </div>
  <div class="item">
    <img src="img/alittlecode.jpg" alt="aLittleCode.com Homepage">
  </div>
</div><!-- /.carousel-inner -->

传送带项之后,还需要添加传送带控件,用于在传送带左、右两侧显示前一个和后一个按钮。你会发现其中有类对应着Glyphicon字体图标。在控件后面,我们再用一个结束div标签关闭整个传送带。

<!-- Controls -->
  <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#homepage-feature" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div><!-- /#homepage-feature.carousel -->

 每个传送带控件(carousel-controls)的href属性必须是最外围传送带元素的ID值(#homepage-feature)。

添加以上代码之后,请保存并刷新浏览器。Bootstrap的样式和JavaScript都应该生效,页面中的图片应该变身成为滚动的传送带!

默认情况下,传送带的幻灯片每5秒切换一次。为了充分展示我们的作品,可以改成8秒。

1. 打开js/main.js

2. 添加以下代码。这里先用jQuery方法检测相应的页面元素是否存在,如果存在则将传送带的间隔时间初始化为8000毫秒。

$( document ).ready(function() {
  $('.carousel').carousel({
    interval: 8000
  });
});

3. 保存并刷新。你会看到间隔时间加长到了8秒。

相关的选项可以参考Bootstrap传送带的文档:http://getbootstrap.com/javascript/#carousel

关于定制传送带及其指示器和图标的样式,本章后面再讨论。我们接下来继续看如何利用Bootstrap默认的样式,为传送带下面的内容块设置响应式网格。

30:00