search

Home >Web Front-end >HTML Tutorial >bootstrap兼容ie6+_html/css_WEB-ITnose

bootstrap兼容ie6+_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:51:331232browse

由于项目需要，既要使用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,里面有。狠戳这里~

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS的低权重原则-避免滥用子选择器_html/css_WEB-ITnoseNext article：iOS的布局体系-浮动布局MyFloatLayout_html/css_WEB-ITnose

Related articles

See more