初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、その後、段階的に進めていきます。

序文

前のセクションでは、https://www.jb51.net/web/248352.html で主に Bootstrap について簡単に紹介しました。中国のウェブサイト http://www.bootcss.com/ を見ると、現在 2 つのバージョンのドキュメント説明があることがすぐにわかります。2 つのバージョン間の違いはかなり大きいようです。

ただし、Visual Studio 2013 のアップデートから判断すると、Microsoft は VS に Bootstrap3 の新しいバージョンを追加したため、特に言うことはありませんし、Bootstrap3 の学習について心配する必要もありません。

BootStrapをダウンロード

公式サイトのドキュメントは非常に詳細かつシンプルで、ダウンロードする方法も複数あります。私たち開発者にとって、最も簡単な方法は、コンパイルされ圧縮された CSS ファイルと JavaScript ファイル（フォントファイルも含まれますが、ドキュメントとソースコードファイルは含まれません）を直接ダウンロードすることです。解凍したパッケージを開くと、css、fonts、js の 3 つのフォルダーが含まれていることがわかります。

3つのフォルダ内のファイルを表示できます

これは最も基本的な Bootstrap の構成です。つまり、任意の Web プロジェクトで直接使用できる非圧縮ファイルです。縮小された (bootstrap.min.*) および縮小されていない (bootstrap.*) CSS および JS ファイルを提供します。フォントアイコンファイルは Glyphicons から取得されます。

bower.json ファイルには、Bootstrap がサポートする jQuery のバージョンがリストされています。

依存する jQuery ライブラリのバージョンが 1.9.0 以上であることがわかります。

次に、http://jquery.com/ にアクセスします。

最新バージョン2.03をダウンロードします

IEからhttp://code.jquery.com/jquery-2.0.3.min.jsに直接アクセスできます。

Bootstrap フォルダの下の js フォルダに保存します。

注意: すべての Bootstrap プラグインには jQuery が必要です。正式なプロジェクトでは、サイズが小さい（コメントとスペースが削除されている）圧縮バージョンを使用することをお勧めします。

ウェブサイトで Bootstrap を使用する

シンプルな基本テンプレートを作成しました


コードをコピー
コードは次のとおりです。

 <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim および Respond.js IE8 の HTML5 要素とメディア クエリのサポート --> <!-- 警告: Respond.js は、file:// 経由でページを表示すると動作しません --> <!--[if lt IE 9]>
 <script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
 <script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
 <![endif]--> </head> <body> <h1>こんにちは、世界！</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1. まず、BootstrapのスタイルファイルをWebページとして参照することができます


コードをコピー
コードは次のとおりです。
 <link href="css/bootstrap.min.css" rel="スタイルシート" media="screen">

2. Bootstrapアーキテクチャが提供するJavaScriptプラグインを使用する必要がある場合は、アーキテクチャのjsファイルをWebページにリンクする必要があります。前述のように、JavaScriptプラグインはjQueryライブラリに依存しているため、もちろんjQueryライブラリファイルもリンクして参照する必要があります。


コードをコピー
コードは次のとおりです。
 <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script>

3. ビューポート <meta> タグ。ほとんどのモバイルデバイスでの表示を変更して、適切な描画とタッチスクリーンのスケーリングを確保できます。


コードをコピー
コードは次のとおりです。
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

4. HTML5 では新しいタグをいくつか使用しますが、IE9 より前のブラウザではこれらのタグはサポートされておらず、これらのタグにスタイルを追加できません。この問題を解決するには、参照ファイルを次のようにリンクする必要があります。


コードをコピー
コードは次のとおりです。

 <!--[IE 9の場合]>
 <script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
 <script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
 <![endif]-->

つまり、ユーザーの IE ブラウザのバージョンが IE9 未満の場合、これら 2 つの js ファイルライブラリが読み込まれ、これらの新しいタグが使用でき、これらのタグにスタイルを追加できるようになります。

このように、最もシンプルな Hello World! ページが表示されます。