ie6+_html/css_WEB-ITnose と互換性のあるブートストラップ-htmlチュートリアル-php.cn

ie6+_html/css_WEB-ITnose と互換性のあるブートストラップ

WBOY

リリース： 2016-06-21 08:51:33

オリジナル

1237 人が閲覧しました

プロジェクトのニーズにより、ブートストラップのラスタライズとそのコンポーネントを使用する必要があり、ie6+ と互換性がある必要があります。始まったばかりです。ブートストラップは ie8 以降のみと互換性があると思っていましたが、調べてみると、ブートストラップは実際には ie6+ にも互換性があることがわかりました。ただし、BT 2 以降のバージョンを使用する必要があります。以下に使い方を紹介します。

1. まず効果を見てみましょう (ie7 を例にします)

1920 回.png

860 回.png

2. 説明

ラスター

  bootstrap3中:      栅格是col-lg-* col-md-* col-sm-* col-xs-*，不同设备所占栅格数可控；  bootstrap2中:      栅格是span*，同一个元素无法指定在不同设备上占不同的栅格数，      这点比较可惜（也可能是我自己没有查到相关资料，希望知道的给我留言，谢谢~）；

ログイン後にコピー

フォントアイコンも使用できますが、アイコンフォントではなく、背景+背景です-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 は実際のプロジェクトで使用されなくなります。具体的な問題は実践して初めてわかります。 実践後に落とし穴を直接指摘していただければ幸いです!

追加のインポートファイルが必要で、オンラインで簡単に見つけられる場合は、ダウンロードできます。このデモは含まれています。ここをクリックしてください~