bootstrap兼容ie6+_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-21 08:51:331232검색
由于项目需要，既要使用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都差不多，具体用的时候查官方文档就好了；
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" /> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <!--[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> <!--[if lte IE 6]> <script type="text/javascript" src="js/bootstrap-ie.js"></script> <![endif]--> </body></html>我还只是临时调研了一下，还没有在实际项目中用bootstrap2，具体的问题还得以后实践了才知道。 希望已经实践过得，能把坑直接指出来给我，感激不尽!
如果需要额外引入的文件，省的网上到处找，可以下这个demo,里面有。狠戳这里~
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.