ブートストラップ-環境のセットアップ

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

Bootstrapをダウンロードする

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

ここに2つのボタンがあります-

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

Bootstrapのコンパイルされていないソースコードを使用する場合は、LESSファイルをコンパイルして使用可能なCSSファイルを生成する必要があります。LESSファイルをCSSにコンパイルするために、Bootstrapは公式にRecessのみをサポートします。これはless.jsに基づくTwitterのCSSヒントです。

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

ファイル構造

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

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

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

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

Bootstrapソースコードをダウンロードした場合、ファイル構造は次のようになります-

less /、js /、およびfonts /の下のファイルは、Bootstrap CSS、JS、およびアイコンフォント（それぞれ）のソースコードです。
DIST /フォルダには、上記のコンパイル済みのダウンロードセクションに記載されているすべてのものを含んでいます。
docs-assets /、examples /、およびすべての* .htmlファイルは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>

ここであなたは見ることができます jquery.js、 bootstrap.min.js そして bootstrap.min.cssブートストラップされたテンプレートに通常のHTMファイルを作成するために含まれているファイル。Bootstrapライブラリを含める前に、必ずjQueryライブラリを含めてください。

上記のコードの各要素の詳細については、「ブートストラップCSSの概要」の章で説明します。

例

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

<h1>Hello, world!</h1>

以降のすべての章では、サイトからのダミーテキストを使用しました https://www.lipsum.com/。