BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide">
    <div class="carousel-inner">
    <div class="item active">
    <img src="http://placehold.it/940x360/&text=Picture-1"/>
    <div  class="carousel-caption">
    <h1 style="color:#CCC">标题1</h1><!--文字显示在图片上面&半透明黑色-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    </div>
    </div>
   
   
       <div class="item"> 
    <img src="http://placehold.it/940x360/&text=Picture-2"/>
    <div class="carousel-caption">
    <h1 style="color:#CCC">标题2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
    </div>
    </div>
    
    <div class="item"> 
    <img src="http://placehold.it/940x360/&text=Picture-3"/>
    <div class="carousel-caption">
    <h1 style="color:#CCC">标题3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, .</p>
    </div>
    </div>
    
    <div class="item"> 
    <img src="http://placehold.it/940x360/&text=Picture-4"/>
    <div class="carousel-caption">
    <h1 style="color:#CCC">标题4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
    </div>
    </div>
    </div>
    <a href="#carousel1" data-slide="prev" class="left carousel-control"><</a>
    <a href="#carousel1" data-slide="next" class="right carousel-control">></a>
    </div>

posted @ 2014-04-02 15:32  keiling  阅读(207)  评论(0编辑  收藏  举报