<div data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol>
整个传送带是一个带ID属性的div标签，其 carousel 类用于把Bootstrap 的传送带CSS应用到这个元素，为指示器、传送带项和前一张及后一张控件添加样式。
进度指示器的 data-target 属性必须使用传送带的 IDcarousel-example-generic 。有了这个属性，JavaScript 插件才能为活动的传送带项添加 active 类。在此我们预先为第一个指示器添加了active类。然后，类的切换就由JavaScript控制了。它会删除第一个指示器的这个类，再添加到后续指示器，如此循环。
此外，还要注意 data-slide-to 的值从0开始，与JavaScript和其他编程语言一样。记住：从0开始，不是从1开始。
指示器后面，是类为 carousel-inner 的元素。这个元素是所有传送带项（item），也就是所有图片。
carousel-inner 元素内部是传送带项，是一组div标签，每个都带有class="item"。把第一项修改成包含item 和active 两个类，使其一开始就可见。
此时的标记结构如下所示：
<!-- Wrapper for slides --> <div role="listbox"> <div> <img src="https://www.jb51.net/img/okwu.jpg" alt="OKWU.edu Homepage"> </div> <div> <img src="https://www.jb51.net/img/okwu-athletics.jpg" alt="OKWU Athletics Homepage"> </div> <div> <img src="https://www.jb51.net/img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation"> </div> <div> <img src="https://www.jb51.net/img/emancipation.jpg" alt="Emancipation Stories"> </div> </div>
传送带项之后，还需要添加传送带控件，用于在传送带左、右两侧显示前一个和后一个按钮。你会发现其中有类对应着 Glyphicon字体图标。在控件后面，我们在用一个结束div标签关闭整个传送带。