bootstrap兼容ie6+

由于项目需要,既要使用bootstrap的栅格化,也要用其中的组件,还要兼容ie6+。刚开始。我以为bootstrap只兼容ie8以上,后来调研了一番,发现bootstrap其实也可以兼容ie6+,但是需要用bt 2开头的版本。下面介绍下用法。

1.首先还是看效果(ie7为例)


1920下.png
860下.png

2.说明

  • 栅格
      bootstrap3中:
          栅格是col-lg-* col-md-* col-sm-* col-xs-*,不同设备所占栅格数可控;
      bootstrap2中:
          栅格是span*,同一个元素无法指定在不同设备上占不同的栅格数,
          这点比较可惜(也可能是我自己没有查到相关资料,希望知道的给我留言,谢谢~);
    
  - 字体图标也可以用,但是不是iconfont了,而是background+background-position;
  -  由于IE7-8不支持border-radius,因此.img-rounded和 .img-circle无法正常使用,这个设计时就要注意了;
  -  其他的大多数用法和bootstrap3都差不多,具体用的时候查[官方文档](http://v2.bootcss.com/)就好了;

3.为了解决兼容性问题,页面中额外需要引入其他文件

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 2.0</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
<![endif]-->

</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" style="background: #f00;height: 200px;">
<span class="icon-glass"></span><span class="icon-music"></span>
</div>
<div class="span10" style="background: #fed;height: 200px;">
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>


#####我还只是临时调研了一下,还没有在实际项目中用bootstrap2,具体的问题还得以后实践了才知道。***希望已经实践过得,能把坑直接指出来给我,感激不尽!***
<br>
如果需要额外引入的文件,省的网上到处找,可以下这个demo,里面有。[狠戳这里~](http://pan.baidu.com/s/1i5wExNJ)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,735评论 3 184
  • 教程整理自慕课网(原文部分错误在这篇文章得到修改,本文版本Bootstrap3.3.7)。 框架简介 Bootst...
    小小奶狗阅读 7,344评论 0 5
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,000评论 0 1
  • 中秋那天去堂姐家,堂姐给我一个很大很大的芒果。 我一直都不知道如何处理它,直到现在芒果快熟透了,我才下定决心把它吃...
    巧23阅读 2,990评论 0 1