最近、私は優れたフロントエンドフレームワークであるBootstrapを使用しています。このフレームワークは非常に強力です。フレームワークには、ドロップダウンメニュー、ボタングループ、ボタンドロップダウンメニュー、ナビゲーション、ナビゲーションバー、パン粉、ページング、タイプセット、サムネイル、警告ダイアログボックス、進行状況バー、メディアオブジェクトなどが含まれます。ブートストラップは事前に定義されています。 Webページを作成するときは、内部のCSSを直接呼び出す必要があります。
ブートストラップはレスポンシブレイアウトです。ワイドスクリーンコンピューター、通常のコンピューター、タブレット、携帯電話で非常に優れたレイアウトエクスペリエンスを得ることができます。このレスポンシブレイアウトは、CSS3のメディアクエリ関数を通じて達成され、さまざまな解像度に応じてさまざまなスタイルに一致します。 IE8ブラウザは、この優れたCSS3機能をサポートしていません。 Bootstrapは、IE8の互換性のためにそれを使用する方法を開発文書に書きました。 IE6とIE7と互換性がある場合は、BSIE(bootstrap2)を検索できます。
Bootstrapは、IE8のChrome、Firefox、IE11ほど完璧ではありません。一部のコンポーネントは完全に互換性があることは保証されていませんが、それでもハッキングする必要があります。
1。HTML5宣言を使用します
<!doctype html>ここにはスペースはありません<HTML>
注:<!doctype html public " - // w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
2.メタタグを追加します
表示するこのページのIEバージョンを確認してください
<Meta http-equiv = "x-ua-compatible" content = "ie = edge、chrome = 1" /> <meta http-equiv = "x-ua-compatible" content = "ie = 9" />
注:BootstrapはIE互換モードをサポートしていません。 IEブラウザが最新のレンダリングモードを実行できるようにするために、上記のタグがページに追加されます。 IE =エッジとは、最新のIEカーネルの使用を強制することを意味し、Chrome = 1は、IE6/7/8のブラウザプラグインおよびその他のバージョンがインストールされている場合を意味します。
3.ブートストラップファイルを紹介します
コードコピーは次のとおりです
4. html5shiv.min.jsとresponse.min.jsを紹介します
(完全に)サポートしないブラウザを作成しますhtml5タグ「サポート」にhtml5タグに「サポート」
<! - [if lt ie 9]> <script src = "js/bootstrap/html5shiv.min.js"> </script> <scrip src = "js/bootstrap/respons.min.js"> </script> <![endif] - >
5。JQUERYライブラリの1.xバージョンを追加します
コードコピーは次のとおりです
6. IE8でテストされた場合、プレースホルダーがサポートされていないという問題がわかりました。以下は、IEがプレースホルダーをサポートするソリューションのソリューションです。この記事で引用されたjQueryは、1.12.0テストによって可決されました。最初にjqueryを参照してください。
<script type = "text/javascript" src = "js/bootstrap/jquery-1.12.0.min.js"> </script> <スクリプトsrc = "bootstrap/js/bootstrap.min.js"> </script>
他のjQueryバージョンを使用して紹介することもできます
[code] <script type = "text/javascript" src = "js/bootstrap/jquery.placeholder.js"> </script>
次に、ファイルにコードを追加します
<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 =" width、user-scalable = no、niarty-scale = 1.0、maximing-scale = 1.0、minimul-scale = 1.0 content = "ie = edge、chrome = 1"/> <meta name = "著者" content = "zhy"/> <title> ie8 </title> <link rel = "href =" href = "css/bootstrap/bootstrap.min.css"> <! - [lte ie 9]> <script src = js/boo/boo> min.min <スクリプトsrc = js/bootstrap/html5shiv.min.js "> </script> <![endif] - > <script src =" js/bootstrap/jquery-1.12.0.min.js "> </script> <スクリプトsrc = "js/bootstrap/bootstrap.min.js"> </script> </head> <body> </body> </html>
注記:
1。IEに基づくIEバージョンを決定するためのステートメント
<! - [lte ie 6]> <![endif] - > ie6以下が見える場合<! - [if lte ie 7]> <![endif] - > ie7以下は見える<! - [ie 6]> <![endif] - > ie6バージョンのみが目に見える<! 7]> <![endif] - >
IE7とIE7よりも大きいバージョンが表示されます
LTE:等または等しいものの略語であり、それよりも低いことを意味します。
LT:略語は未満の略語です。つまり、より少ないことを意味します。
GTE:より大きいまたは等しいものの略語であり、これはより大きいまたは等しいことを意味します。
GT:より大きいことを意味します。
! :それは等しくないことを意味し、javascriptの非等しい判断記号と同じ
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。