发布于 2015-08-29 07:58:53 | 303 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


原始的轮播组件,并不支持滑动滚屏:

代码如下:

    <span style="white-space:pre">    </span><div class="row">  
            <div id="carousel-generic" class="carousel slide"  
                data-ride="carousel">  
                <ol class="carousel-indicators">  
                    <li data-target="#carousel-generic" data-slide-to="0"  
                        class="active"></li>  
                    <li data-target="#carousel-generic" data-slide-to="1"></li>  
                    <li data-target="#carousel-generic" data-slide-to="2"></li>  
                </ol>  
      
                <div class="carousel-inner" style="text-align: center">  
                    <div class="item active">  
                        <img alt="First slide" src="img/slide/1.png"></img>  
                    </div>  
                    <div class="item">  
                        <img alt="Second slide" src="img/slide/2.png"></img>  
                    </div>  
                    <div class="item">  
                        <img alt="Third slide" src="img/slide/3.png"></img>  
                    </div>  
                </div>  
      
                <a class="left carousel-control" href="#carousel-generic"  
                    data-slide="prev"> <span  
                    class="glyphicon glyphicon-chevron-left"></span>  
                </a> <a class="right carousel-control" href="#carousel-generic"  
                    data-slide="next"> <span  
                    class="glyphicon glyphicon-chevron-right"></span>  
                </a>  
            </div>  
        </div>  

上面的方式,可以通过点击左右两边的箭头触发切换,但无法滑动切换。当然,自动切换还是可以的。

解决上述问题,方法其实也较多,比较方便的是使用hammer。

在此之前,需要下载hammer.min.jsjquery.hammer.js.。

代码如下:

<--! js顺序 -->  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/bootstrap.min.js"></script>  
<script type="text/javascript" src="js/hammer/hammer.min.js"></script>  
<script type="text/javascript" src="js/hammer/jquery.hammer.js"></script> 
//有需求的可以把左右箭头注释掉  
$('#carousel-generic').hammer().on('swipeleft', function(){  
    $(this).carousel('next');  
});  
$('#carousel-generic').hammer().on('swiperight', function(){  
    $(this).carousel('prev');  
}); 


相关阅读 :
bootstrap的carousel支持滑动滚屏示例
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
利用BootStrap的Carousel.js实现轮播图动画效果
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
bootstrap的Icon图表的示例代码
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的方法
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
全面解析Bootstrap中Carousel轮播的使用方法
全系IE支持Bootstrap的解决方法
Bootstrap的图片轮播示例代码
bootstrap实现的自适应页面简单应用示例
学习使用bootstrap的modal和carousel
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务