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

Bootstrap页面布局24 - BS旋转木马功能

时间:2014-08-04 01:49:36      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   io   2014   cti   

代码:

<div class=‘container-fluid‘>
    <h3 class=‘page-header‘>Bootstrap 旋转木马</h3>
    
    <div class=‘carousel slide‘ id=‘carousel1‘>
        <div class=‘carousel-inner‘>
            <div class=‘item active‘>
            <img src=‘http://placehold.it/1246x360/FFEB79&text=W3Cschoool1‘ />
            <div class=‘carousel-caption‘>
            <h4>W3Cschoool菜鸟教程</h4>
            <p>一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。1</p>
            </div>
            </div>
            
            
            <div class=‘item‘>
            <img src=‘http://placehold.it/1246x360/FF6600&text=W3Cschoool2‘ />
            <div class=‘carousel-caption‘>
            <h4>W3Cschoool菜鸟教程</h4>
            <p>一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。2</p>
            </div>
            </div>
            
            
            <div class=‘item‘>
            <img src=‘http://placehold.it/1246x360/00EB79&text=W3Cschoool3‘ />
            <div class=‘carousel-caption‘>
            <h4>W3Cschoool菜鸟教程</h4>
            <p>一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。3</p>
            </div>
            </div>
        </div>
        <a href=‘#carousel1‘ data-slide=‘prev‘ class=‘left carousel-control‘><font style=‘font-weight:bold;font-size:40px;‘>☆</font></a>
        <a href=‘#carousel1‘ data-slide=‘next‘ class=‘right carousel-control‘><font style=‘font-weight:bold;font-size:40px;‘>★</font></a>
    </div>
</div>

代码块经过测试,放心使用

如图:

bubuko.com,布布扣

 

bubuko.com,布布扣

Bootstrap页面布局24 - BS旋转木马功能,布布扣,bubuko.com

Bootstrap页面布局24 - BS旋转木马功能

标签:style   blog   http   color   使用   io   2014   cti   

原文地址:http://www.cnblogs.com/Zell-Dinch/p/3889104.html

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