bootstrap的一些

1.用bootstrap做自适应页面，我一般在@media (max- 992px)做分界线，因为ipad一般宽度是768，我会把这个宽度做成和手机效果一样的界面，而ipad pro的宽度是1024，我会把这个宽度做成和pc效果一样，这样保证ipad不会屏小变形，ipad pro不会屏大留白太多，而且还要根据@media来自定义.col-md-XX的width百分比，否则也会出现屏小变形或者屏大留白太多的情况。

2.使用bootstrap做导航有个pc端和移动端展开二级菜单的问题，pc端习惯mouseover来展开而不是点击，移动端没有鼠标事件必须要触摸才能展开，所以不能把主导航的链接加在a标签里，要在a标签里套span用onclick【用fastclick.min.js解决点击延迟问题】的window.location.href来实现，这样做的好处是：1.在pc端mouseover展开二级菜单，点击主导航跳转页面，2.移动端点击主导航的空白区域展开二级菜单，点击主导航文字跳转页面。

<li class="dropdown">
   <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span onclick="javascript:window.location.href='abc.html'">主导航</span></a>
      <ul class="dropdown-menu">
         <li class="col-md-6 col-sm-6 col-xs-6"><a href="123.html">子导航1</a></li>
         <li class="col-md-6 col-sm-6 col-xs-6"><a href="456.html">子导航2</a></li>
      </ul>
</li>

//鼠标划过就展开子菜单的功能，免得需要点击才能展开
$(function () {
    var con = document.documentElement.clientWidth;
    if(con>992){
        $(".dropdown").mouseover(function () {
            $(this).addClass("open");
        });
        $(".dropdown").mouseleave(function(){
            $(this).removeClass("open");
        })
    }
});

3.bootstrap做轮播图有个弊端，就是必须要设置class="active"和图片的个数与焦点的个数要一致，我觉得加程序会复杂，我会使用swiper来做轮播图，只需要循环输出装图片的div即可，效果在js实例中设置，移动端和pc端支持也很好。关于用一张图片解决移动端屏小pc端屏大的问题：我会把banner图都放在div行内样式背景里【style="background-image"】，还要设置div背景的【background-size: cover;】样式，div中是<a href="#"><img src="sp.gif" /></a>链接和1像素占位图片，循环div就把每张图放在背景中输出了，还要在banner最外层根据@media来设置高度，宽度都是100%，这样根据高度不同图片会等比例缩小，这样是为了解决一张1920*500的图片，在手机375*200的盒子里被挤压变形或者宽度缩小而看不清图片了。

<section class="container bannertp">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 plr0">
            <div class="swiper-container" id="lbba" style="overflow: hidden;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide bantp" style="background-image: url(img/banner1.jpg);"><a href="#"><img src="images/sp.gif" /></a></div>
                    <div class="swiper-slide bantp" style="background-image: url(img/banner2.jpg);"><a href="#"><img src="images/sp.gif" /></a></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
                <div class="swiper-button-next swiper-button-white"></div>
            </div>
        </div>
    </div>
</section>

/*banner*/
.bantp{background-repeat: no-repeat; background-position: center; background-size: cover;}
#lbba .swiper-button-next, #lbba .swiper-button-prev{opacity: 0.6;filter:alpha(opacity=60); margin-left: 30px; margin-right: 30px;}