最近簡単なWebページを作成する必要があります。
フロントエンドエクスペリエンスの欠如を考慮して、迅速に生産するために、プロジェクトは単なるツールであり、プロジェクトの要件がないため、WebフレームワークとしてBootstrapを選択しました。
ブートストラップをゼロから学ぶために書くことの当初の意図：
bootstrapドキュメントを長い間読んだ後、公式（http://v3.bootcss.com/getting-started/）と非公式（http://www.runoob.com/bootstrap/bootstrap-tutorial.html）を含むだけでなく、他の人によって書かれたシンプルな紹介ブログ（http://www.cnblogs.com/fnng/p/44460 47.html）、およびZhihuのBootstrapへのコメント（https://www.zhihu.com/question/35237472、https://ww.zhhih feltion/question/questionブートストラップは非常に便利なフレームワークである必要があり、学ぶことは難しくありません。これは高速生産のためのツールですが、その柔軟性では、開発者が好きなようにプレイするには十分ではありません。さらに、フロントエンドにはあまりにも多くのものがあります。明確な学習目標とルートがない場合は、無限の詳細に簡単に陥り、対応する出力がない場合があり、イライラすることがあります。したがって、私は自分自身をレビューして初心者の大半を始めることができるように、学習パスを記録することにしました。
ブートストラップの最も単純なテンプレートから始めましょう。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> bootstrap 101テンプレート</title> <！ - bootstrap-> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <！ - html5 shim and respons.js html5要素のサポートとメディアの場合： <！ - [lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </scrip> <Src = "// cdn.bootcss.com/respond.js/1.4.2.2/respond.min.js"> </head> <body> <h1>こんにちは、世界！ </h1> <！ - jquery（ブートストラップのJavaScriptプラグインに必要） - > <スクリプトsrc = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <！ src = "js/bootstrap.min.js"> </script> </body> </html>
1つずつ見てみましょう（説明に＃を使用します）：
<！Doctype HTML> ＃これはHTML5ページであることを意味します
<html lang = "zh-cn"> #langは「言語」を意味します。これはHTMLタグの属性です。この属性は、検索エンジンに私のページが中国語のページであることを伝えています。これは、検索エンジンが含めるのに便利であり、ページディスプレイに影響を与えません。 「Zh-CN」はISO標準の執筆方法であり、これは中国語を意味します。 「Zh」は、「Zhongwen」の最初の2文字です（ブラウザに英語のインターフェイスであることを伝えたい場合は、lang = "en"および「en」は「英語」の最初の2文字に対応し、「CN」は国コードです。 （http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html）
<Meta charset = "utf-8"> #METAタグは、HTMLファイルを解析するためにブラウザを容易にするタグです。 Charset属性は、このHTMLファイルのエンコード方法がUTF-8であることをブラウザに伝えます。
<Meta http-equiv = "x-ua-compatible" content = "ie = edge"> ＃http-equiv属性は、このHTMLで規定されている互換性やその他の詳細が何であるかをブラウザに伝えます。 （//www.vevb.com/web/70787.html） IEブラウザの特定のバージョンのレンダリング方法をシミュレートするためのブラウザを指定するために使用されます。 （インターネット上の一部の記事では、X-UA互換はIE8の特別なマーカーであると実際に言っています。これは単に誤解を招くものです！）
＃なぜこれをするのですか？ Microsoftの以前のIE（IE6、IE7）はW3C標準に準拠していなかったため、一部のWebサイトのコードはW3C標準ではなく古いIE標準を使用しています。 IE8から始めて、MicrosoftはW3C標準を採用しています。
#SOSSOこの属性値を使用して、ブラウザのレンダリング方法を強制することができます。 Content = "IE6"を設定すると、ユーザーはIE8以降のブラウザに通常IE6標準の下にHTML Webページを表示することもできます。
＃content = "ie = edge"は、サポートできるIE標準の最新バージョンでブラウザにレンダリングさせます。なぜこれをするのですか？一部のユーザーのブラウザーは「互換性モード」に設定される場合があるため、古いIE標準に基づいてHTMLファイルをレンダリングし、W3C標準HTMLコードに遭遇するとエラーが発生します。したがって、私のコードがW3C標準であり、古いIE標準のサポートを考慮していない場合、ブラウザでサポートできるIEレンダリングの最新バージョンを強制すると、「互換性モード」によって引き起こされる表示エラーを回避できます。 （つまり、ユーザーは、ブラウザのレンダリングモードを手動で変更する必要はありません）<Meta name = "Viewport" content = "width = device-width、intiality-scale = 1"> #viewportディスプレイウィンドウの関連する設定を指定します。ここで、コンテンツの幅は表示幅を指定し、初期スケールは初期スケーリング比を指定します。 （他の機能について：ユーザーがスケーリングできるかどうか、最大スケーリング比、最小スケーリング比などを参照してください。http：//my.oschina.net/liangrockman/blog/380727）
<！ - [lt ie 9]>
<スクリプトsrc = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </scrip>
<Script src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script>
<！[endif] - >
＃ここでは条件付きコメント判断があります。 IEバージョンがIE9よりも小さい場合、SCRPIT SRCは上記のCDNリソースを取得します。
<スクリプトsrc = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<スクリプトsrc = "js/bootstrap.min.js"> </script>
＃ここにjqueryとbootstrapをリンクするJSファイルがあります。端に配置されて、Webページの読み込みをスピードアップします。つまり、最初にWebページのコンテンツを表示してからJSファイルをロードします。ヘッドタグなどの前に配置すると、インターネットの速度が良くない場合、JSファイルの読み込みに詰まり続け、Webページのコンテンツを迅速に表示できず、ユーザーエクスペリエンスに影響します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial