码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap轮播Carousel样式的应用

时间:2015-09-17 01:04:09      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

   <h3>bootstrap轮播效果</h3>
    <div id="myCarousel" class="carousel slide" style="width:300px;">
        <!--轮播指南-->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!--轮播项目-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="Images/mediaobject/c1.jpg" alt="first slide 1" />
            </div>
            <div class="item">
                <img src="Images/mediaobject/c2.jpg" alt=" seconde slide 2" />
            </div>
            <div class="item">
                <img src="Images/mediaobject/c1.jpg" alt="three slide 3" />
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class=" carousel-control right" href="#myCarousel" data-slide="next">&rsquo;</a>
    </div>

  效果图:

技术分享

Bootstrap轮播Carousel样式的应用

标签:

原文地址:http://www.cnblogs.com/professional-NET/p/4815047.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!