ブートストラップ-環境設定

Bootstrapのセットアップと使用開始は非常に簡単です。この章では、Bootstrapをダウンロードしてセットアップする方法について説明します。また、Bootstrapファイル構造について説明し、例を使用してその使用方法を示します。

ブートストラップをダウンロード

Bootstrapの最新バージョンはhttps://getbootstrap.com/からダウンロードできます。このリンクをクリックすると、次のような画面が表示されます-

ここでは、2つのボタンを見ることができます-

Bootstrap のダウンロード-これをクリックすると、Bootstrap CSS、JavaScript、およびフォントのプリコンパイルおよび縮小バージョンをダウンロードできます。ドキュメントまたは元のソースコードファイルは含まれていません。
Download Source -これをクリックすると、最新のBootstrap LESSおよびJavaScriptソースコードをGitHubから直接取得できます。

'_Bootstrapの未コンパイルのソースコードを使用する場合は、LESSファイルをコンパイルして使用可能なCSSファイルを作成する必要があります。 LESSファイルをCSSにコンパイルするために、Bootstrapは公式にhttps://twitter.github.io/recess/[Recess]のみをサポートしています。これは、http：//lesscss.org/[less.js]に基づくTwitterのCSSヒントです。_

理解を深めて使いやすくするために、チュートリアル全体でプリコンパイルされたバージョンのBootstrapを使用します。ファイルはコンパイルおよび縮小されるので、個々の機能用に個別のファイルを含めるたびに気にする必要はありません。このチュートリアルを書いている時点で、最新バージョン（ブートストラップ3）がダウンロードされました。

ファイル構造

プリコンパイルされたブートストラップ

コンパイルされたバージョンのBootstrapがダウンロードされたら、ZIPファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます-

コンパイルされたブートストラップファイル構造

ご覧のとおり、コンパイルされたCSSとJS（bootstrap。）、およびコンパイルされ縮小されたCSSとJS（bootstrap.min。）があります。 Glyphiconsのフォントは、オプションのBootstrapテーマであるため含まれています。

ブートストラップソースコード

あなたがブートストラップのソースコードをダウンロードしている場合、ファイル構造は次のようになります-

ブートストラップソースコード構造

less/、_ js/_、および_fonts/_の下のファイルは、それぞれBootstrap CSS、JS、およびアイコンフォントのソースコードです。
dist/_フォルダーには、上記のプリコンパイル済みダウンロードセクションにリストされているすべてのものが含まれています。 _docs-assets/、_ examples/、およびすべての' l_ファイルはBootstrapのドキュメントです。

HTMLテンプレート

Bootstrapを使用した基本的なHTMLテンプレートは次のようになります-

<!DOCTYPE html>
<html>

   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file://-->

      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

   </head>

   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>

      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>

   </body>
</html>

ここで、ブートストラップされたテンプレートに通常のHTMファイルを作成するために含まれている jquery.js 、 bootstrap.min.js 、および bootstrap.min.css ファイルを確認できます。 Bootstrapライブラリを含める前に、必ずjQueryライブラリを含めてください。

上記のコードの各要素の詳細については、リンク：/bootstrap/bootstrap_css_overview [Bootstrap CSS Overview]で説明します。

例

次に、上記のテンプレートを使用した例を試してみましょう。私たちのウェブサイト上の以下のサンプルコードボックスの右上隅にあるライブデモオプションを使用して次の例を試してください-

<h1>Hello, world!</h1>

'_後続のすべての章では、サイトhttps://www.lipsum.com/のダミーテキストを使用しました。_

Bootstrap-environment-setup

目次