bootstrap carousel轮转图的使用

时间:14-09-13 栏目:Bootstrap 作者:zongyan86 评论:0 点击: 14,351 次

之前我们已经学习了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开发分享



声明: 本文由( zongyan86 )原创编译,转载请保留链接: bootstrap carousel轮转图的使用

bootstrap carousel轮转图的使用:等您坐沙发呢!

发表评论



热搜关键词: easyui   开发   web开发
广告虚位以待

读者排行

关注我们