ブートストラップのインストールは非常に簡単です。この記事は私の研究の要約であり、将来の問い合わせや学習に便利です。同時に、私はあなたを助けたいと思っています。
1。bootstrapをダウンロードします
http://getbootstrap.com/からBootstrapの最新バージョンをダウンロードできます。このリンクをクリックすると、次のようなWebページが表示されます。
2つのボタンが表示されます。
Bootstrapをダウンロード： Bootstrapをダウンロードします。このボタンをクリックすると、Bootstrap CSS、JavaScript、およびFontの事前コンパイルされた圧縮バージョンをダウンロードできます。ドキュメントと元のソースコードファイルは含まれていません。
ダウンロードソース：ソースコードをダウンロードします。このボタンをクリックすると、最新のブートストラップが少なくなり、JavaScriptソースコードを直接取得できます。
非コンパイルされたソースコードを使用している場合は、再利用可能なCSSファイルを生成するために少ないファイルをコンパイルする必要があります。より少ないファイルをコンパイルするために、BootstrapはTwitterのLess.JSベースのCSSプロンプトであるRecessのみをサポートします。
より良い理解と使いやすさのために、このチュートリアルではブートストラップの事前コンパイルバージョンを使用します。
ファイルはコンパイルされて圧縮されるため、独立した機能開発にこれらの独立したファイルを毎回含める必要はありません。
この調査ノートは最新バージョンです（Bootstrap 3）。
2。ファイル構造
1。プリコンパイルされたブートストラップ
bootstrapのコンパイルされたバージョンをダウンロードしてzipファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます。
上記の画像に示すように、コンパイルされたCSSとJS（Bootstrap。*）、およびコンパイルされた圧縮CSSおよびJS（Bootstrap.min。*）を見ることができます。また、オプションのブートストラップテーマであるGlyphiconsのフォントも含まれています。
2。ブートストラップソースコード
Bootstrapソースコードをダウンロードした場合、ファイル構造は次のようになります。
Less/、JS/およびFont/の下のファイルは、それぞれBootstrap CSS、JS、およびIcon Fontのソースコードです。
dist/フォルダーには、上記のプリコンパイルされたダウンロードセクションにリストされているファイルとフォルダーが含まれています。
docs-assets/、例/、およびすべての *.htmlファイルはブートストラップドキュメントです。
3。HTMLテンプレート
ブートストラップを使用した基本的なHTMLテンプレートは次のようになります。
<！doctype html> <html> <head> <title> bootstrapテンプレート</title> <meta name = "viewport" content = "width =" width、device-width、intially-scale = 1.0 "> <！ - ブートストラップの紹介 - > <リンクhref = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "styleSheet"> <！ - html5 shimおよびrespound.jsは、html5の要素とメディアqueriesを紹介するie8をサポートするためにIE8を有効にするために使用されます。ファイルは効果がありません - > <！ - [if lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <スクリプトsrc = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <！[endif] - > </head> <body> <h1> hello、world！</h1> <！ - jquery（javascriptプラグインを紹介する必要があります） src = "https://code.jquery.com/jquery.js"> </script> <！ - すべてのコンパイルされたプラグインを含む - > <スクリプトsrc = "js/bootstrap.min.js"> </script> </body> </html>
ここでは、jquery.js、bootstrap.min.js 、およびbootstrap.min.cssファイルを見ることができます。
IV。例
それでは、「こんにちは、ワールド！」出力を試してみましょう。ブートストラップの使用：
<！Doctype html> <html> <head> <title> bootstrapインスタンスをオンラインで試してみてください</title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "styleSheet"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/boottrap/3.3.0/js/boottrap.min.js"> world！</h1> </body> </html>
<！ - 新しいブートストラップコアCSSファイル - > <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "styleSheet"> <！ - オプションのブートトラップテーマ（一般的に使用していない） - > <スクリプトsrc = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <！ - jQueryファイル。必ず紹介してください - > <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <！ - 最新のブートストラップコアJavaScriptファイル - > <スクリプトsrc = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事のすべての内容です。すべての人の学習に役立ち、ブートストラップのインストール環境を正しく構築することに役立つことを願っています。