ホームページ >ウェブフロントエンド >htmlチュートリアル >ie6+_html/css_WEB-ITnose と互換性のあるブートストラップ
ie6+_html/css_WEB-ITnose と互換性のあるブートストラップ
- WBOYオリジナル
- 2016-06-21 08:51:331229ブラウズ
プロジェクトのニーズにより、ブートストラップのラスタライズとそのコンポーネントを使用する必要があり、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 は実際のプロジェクトで使用されなくなります。具体的な問題は実践して初めてわかります。 実践後に落とし穴を直接指摘していただければ幸いです!
追加のインポート ファイルが必要で、オンラインで簡単に見つけられる場合は、ダウンロードできます。このデモは含まれています。ここをクリックしてください~
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。