bootstrap carousel轮转图的使用

之前我们已经学习了bootstrap的一些知识，如

1.bootstrap model弹出框的使用 

2.bootstrap tab的使用

3.bootstrap navbar导航条的使用

这节课，我们来一起学习下 bootstrap carousel轮转图 的使用。

效果图：

http://www.kuaipao8.com/work/

HTML：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators小圆圈 -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></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>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides 具体内容-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
        </div>

        <!-- Controls 上一页，下一页-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">上一页</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">下一页</span>
        </a>
    </div>

重要点：

1.外层div要有个id，如

id="carousel-example-generic"

来告诉小圆圈及上一页下一页，控制按钮。

小圆圈设置好：

data-target="#carousel-example-generic"

上一页，下一页控制按钮设置好

href="#carousel-example-generic"

2.

data-slide-to="0"

这个属性，代表着从0开始，有5个就，复制5个，一次1，2，3，4，5，对应内容的5个页面。 

3.

第一个内容，要加上active属性。补充img的src，alt属性。在对应的carousel-caption加入相应的内容或按钮等。 

 <div class="item active">
                <img src="..." alt="...">
                <div class="carousel-caption">
                    ...
                </div>
 </div>

4.如果轮转图刚好放到上一节 导航栏 的下面，可能需要自己定义一些样式，让轮转图变得好看点。

如：

 .carousel
        {
            height: 500px;
            background-color: #000;
        }

            .carousel .item
            {
                height: 500px;//固定高度
                background-color: #000;
            }

            .carousel img
            {
                width: 100%;//图片自适应
            }

 

web开发分享