关于bootstrap栅格系统不兼容IE6,7,8

相信用过bootstrap的朋友们都知道，bootstrap的栅格系统可以自适应pc端到手机端，可以解决原生响应式的一大麻烦，不需要写几套css来适应不同的屏幕分辨率，但是bootstrap作为一个框架，也有很多的弊端，比如：

1.bootstrap的栅格系统不兼容IE6,7,8.

不要着急，自有妙招，在头部引入以下两个js，在服务器下运行就可以解决这个问题了。

<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>

2.bootstrap的轮播图不能自动轮播。

a)如遇到以上情况可以在你的代码处加上 data-interval="2000"，给它一个轮播的时间

如：<div id="carousel-genric" class="carousel slide" data-ride="carousel" data-interval="2000">

b)解决方法二：可以手动初始化

代码如下：$('.carousel').carousel();

3.bootstrap的轮播图在手机端不能滑动，移动端的轮播图普遍来说都可以手动滑，解决方法有3种如下：

a）jQuery Mobile (http://jquerymobile.com/download/)

[javascript]  view plain  copy

 

 

1. $("#carousel-generic").swipeleft(function() {  
2.     $(this).carousel('next');  
3. });  
4.   
5. $("#carousel-generic").swiperight(function() {  
6.     $(this).carousel('prev');  
7. });  

 b）TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)

[javascript]  view plain  copy

 

 

1. $("#carousel-generic").swipe({  
2.     swipeLeft: function() { $(this).carousel('next'); },  
3.     swipeRight: function() { $(this).carousel('prev'); },  
4. });  

 c）hammer.js (http://eightmedia.github.io/hammer.js/) + 

jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)

[javascript]  view plain  copy

 

 

1. $('#carousel-generic').hammer().on('swipeleft', function(){  
2.     $(this).carousel('next');  
3. });  
4.   
5. $('#carousel-generic').hammer().on('swiperight', function(){  
6.     $(this).carousel('prev');  
7. });  

总结如上，总的来说 bootstrap在做响应式方面，比较方便快捷，但是也存在很多弊端。