首頁 > web前端 > html教學 > bootstrap兼容ie6+_html/css_WEB-ITnose

bootstrap兼容ie6+_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 08:51:33
原創
1223 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板