本网站只能被运行在支持JavaScript脚本的环境中

第9章 图像与图像轮播

本节概述

本节介绍如何在Bootstrap中使用图像及如何使用图像轮播设计组件。

图像

在Web系统中,为了显示商品或产品信息,如果使用图像的话将会使商品或产品形象更加直观。接下来首先介绍如何在Bootstrap中使用图像。

使用图像

在Bootstrap中使用图像时,可以为img元素使用下表所示的class值。另外,可以通过“img-responsive”class使图像具有自适应效果。

样式 class属性值
圆角图 img-rounded
圆形图 img-circle
缩略图 img-thumbnail
<img src="sl.jpg" class="img-rounded img-responsive">
<img src="images/sl.jpg" class="img-circle img-responsive">
<img src="images/sl.jpg" class="img-thumbnail img-responsive">

对图像添加说明

<div class="media">
    <!-- 1.图像 -->
    <a class="media-left" href="#">
        <img class="media-object" src="images/html5.jpg">
    </a>
    <!-- 2.图像说明 -->
    <div class="media-body">
        <h4 class="media-heading">《HTML 5与CSS 3权威指南》</h4>
        <p>《HTML 5与CSS 3权威指南》书籍说明</p>
    </div>
</div>
<hr />
<div class="media">
    <!-- 1.图像 -->
    <div class="media-body">
        <h4 class="media-heading">《Sencha Touch权威指南》</h4>
        <p>《Sencha Touch权威指南》书籍说明</p>
    </div>
    <!-- 2.图像说明 -->
    <a class="media-right" href="#">
        <img class="media-object" src="images/sencha.jpg">
    </a>
</div>

1.放置图像

将用于放置图像说明的div容器元素的class属性值指定为“media-body”。当需要放置标题时将用于放置标题的元素的class属性值指定为“media-heading”。

2.放置图像说明

在放置图像时,将div元素的class属性值指定为“media”。然后将用于放置图像的img元素的class属性值指定为“media-object”。当需要将图像放置在左边时,将图像的容器a元素的class属性值指定为“media-left”,当需要将图像放置在右边时,将图像的容器a元素的class属性值指定为“media-right”。

列表形式的图像

当需要显示商品一览等列表形式的图像时,需要将ul元素的class属性值为“media-list”,同时将图像放置在class属性值为“media”的li元素中。

<ul class="media-list">
    <li class="media">
        <a class="media-left" href="#">
            <img class="media-object" src="images/html5.jpg">
        </a>
        <div class="media-body">
            <h4 class="media-heading">《HTML 5与CSS 3权威指南》</h4>
            <p>《HTML 5与CSS 3权威指南》书籍说明</p>
        </div>
    </li>
    <li class="media">
        <a class="media-left" href="#">
            <img class="media-object" src="images/sencha.jpg">
        </a>
        <div class="media-body">
            <h4 class="media-heading">《Sencha Touch权威指南》</h4>
            <p>《Sencha Touch权威指南》书籍说明</p>
        </div>
    </li>
</ul>

缩略图

缩略图为当需要显示许多图像时经过缩小处理后的图像。当需要在移动设备中显示大量图像时,为了减轻负荷,需要制作缩略图。当使用缩略图时,将用于放置图像的a元素的class属性值设置为“thumbnail”。

当放置缩略图时,可以使用Bootstrap的栅格系统。

<div class="row">
    <div class="col-md-2">
        <a href="#" class="thumbnail">
            <img src="images/html5.jpg">
        </a>
    </div>
    <div class="col-md-2">
        <a href="#" class="thumbnail">
            <img src="images/sencha.jpg">
        </a>
    </div>
    ...
</div>

图像轮播组件

为了轮流显示多幅图像,可以使用图像轮播组件。

基本使用方法

图像轮播组件为一种多幅图像自动滑动切换、两边放置有切换按钮的组件。

<!-- 1.图像轮播组件 -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- 2.切换图像列表 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="1"></li>
        <li data-target="#carousel-example" data-slide-to="2"></li>
        <li data-target="#carousel-example" data-slide-to="3"></li>
        <li data-target="#carousel-example" data-slide-to="4"></li>
     </ol>

    <!-- 3.图像内容 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/1.jpg">
            <div class="carousel-caption">
                <h3>标题一</h3>
                <p>文字说明一</p>
            </div>
        </div>
        <div class="item">
            <img src="images/2.jpg">
            <div class="carousel-caption">
                <h3>标题二</h3>
                <p>文字说明二</p>
            </div>
        </div>
        <div class="item">
            <img src="images/3.jpg">
            <div class="carousel-caption">
                <h3>标题三</h3>
                <p>文字说明三</p>
            </div>
        </div>
        <div class="item">
            <img src="images/4.jpg">
            <div class="carousel-caption">
                <h3>标题四</h3>
                <p>文字说明四</p>
            </div>
        </div>
        <div class="item">
            <img src="images/5.jpg">
            <div class="carousel-caption">
                <h3>标题五</h3>
                <p>文字说明五</p>
            </div>
        </div>
    </div>

    <!-- 4.左右箭头按钮 -->
    <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

1.放置图像轮播组件

当需要使用图像轮播组件时,需要将div元素的class属性值设置为“carousel”及“slide”。

2.切换图像列表

为了切换图像,需要使用图像列表。将ol元素的class属性设置为“carousel-indicators”。例如,当放置5幅图像时,需要在ol元素内放置5个li元素,同时从0开始依序设置li元素的data-slide-to属性值。

3.图像内容

为了指定图像内容,需要将div容器元素的class属性值设置为“carousel-inner”。将图像内容放置在class属性值为“item”的div元素中,将图像放置在img元素中,如果需要指定图像说明,将图像说明放置在class属性值为“carousel-caption”的div元素中。

4.左右箭头按钮

为了在图像轮播组件中放置箭头按钮,需要使用class属性值为“left”与“carousel-control”的a元素与class属性值为“right”与“carousel-control”的a元素 。同时指定这两个元素的data-slide属性值,左边的为“prev”,右边的为“next”。同时,为了让用户看清箭头,在span元素中放置图标按钮。

设置图像轮播组件的选项

可以使用图像轮播组件的data-interval属性来设置每幅图像的显示时间,属性值为毫秒单位,例如data-interval="5000"代表每幅图像显示5秒。

另外,可以通过将图像轮播组件的data-wrap属性值设置为true的方法设置循环显示所有图像,当不想循环显示时,可以将data-wrap属性值设置为false。

<div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="5000" data-wrap="false">