Bootstrap作品展示站点实战项目2(2)

<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标签关闭整个传送带。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdszd.html