ホームページ >ウェブフロントエンド >jsチュートリアル >bootstrap3はIE8ブラウザに対応しました！ _JavaScript スキル
bootstrap3はIE8ブラウザに対応しました！ _JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:02:411939ブラウズ
私は最近、優れたフロントエンド フレームワークであるブートストラップを使用しています。このフレームワークには、ドロップダウン メニュー、ボタン グループ、ボタン ドロップダウン メニュー、ナビゲーション、ナビゲーション バー、ページング、レイアウトが含まれています。 、サムネイル、警告ダイアログ ボックス、プログレス バー、メディア オブジェクトなどのブートストラップは、Web ページを作成するときに、
内の CSS を直接呼び出すだけで済みます。Bootstrap はレスポンシブ レイアウトであり、ワイドスクリーン コンピューター、通常のコンピューター、タブレット、携帯電話で非常に優れたレイアウト エクスペリエンスを得ることができます。この応答性の高いレイアウトは、CSS3 のメディア クエリ機能によって実現され、さまざまな解像度に応じてさまざまなスタイルに一致します。 IE8 ブラウザは、この優れた CSS3 機能をサポートしていません。Bootstrap は、IE6 および IE7 と互換性を持たせるための使用方法を開発ドキュメントに記載しています。BSIE (bootstrap2)
を検索してください。IE8 のブートストラップは Chrome、Firefox、IE11 ほど完璧ではありません。一部のコンポーネントは完全な互換性が保証されていないため、ハッキングする必要があります。
1. HTML5 宣言を使用します
<!DOCTYPE html> 这里不可以有空格 <html>
注: 1ed4bccaae1d4d02870ae24f9e41d3c7
4. html5shiv.min.js と Reply.min.js を導入します
html5 を（完全に）サポートしていないブラウザでも html5 タグを「サポート」できるようにします
<!--[if lt IE 9]> <script src="js/bootstrap/html5shiv.min.js"></script> <script src="js/bootstrap/respond.min.js"></script> <![endif]-->
5. バージョン 1.X Jquery ライブラリを追加します
6. IE8 でテストしたところ、プレースホルダーがサポートされていない問題が見つかりました。この記事で引用した jquery は 1.12.0 で、これを解決する方法です。最初の引用 jquery
<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
他の jquery バージョンを使用してから
を導入することもできます[コード]eff061320b548ac728fbba7adfa7717b2cacc6d41bbb37262a98f745aa00fbf0
次に、ファイル
<script type="text/javascript">
$(function () {
$('input, textarea').placeholder();
});
</script>
コードは次のように要約されます:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta name="author" content="zhy" /> <title>ie8</title> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"> <!--[if lte IE 9]> <script src=js/bootstrap/respond.min.js"></script> <script src=js/bootstrap/html5shiv.min.js"></script> <![endif]--> <script src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> </head> <body> </body> </html>
注:
1. IE での IE バージョンを決定するステートメント
<!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> IE7及其以下版本可见 <!--[if IE 6]> <![endif]--> 只有IE6版本可见 <![if !IE]> <![endif]> 除了IE以外的版本 <!--[if lt IE 8]> <![endif]--> IE8以下的版本可见 <!--[if gte IE 7]> <![endif]-->
IE7 以降のバージョンが表示されます
lte：Less than or equal toの略で、以下という意味です。
lt: Less thanの略で、未満という意味です。
gte：Greater than orequal toの略で、以上という意味です。
gt：Greater thanの略で、「より大きい」という意味です。
!: 等しくないという意味で、JavaScript の不等号判定記号と同じです
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。