はじめてみましょう

Bootstrapとは?

BootstrapはWeb開発のための無料のフロントエンドフレームワークです。
Bootstrapには、タイポグラフィ、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセルなどのJavaScriptテンプレートとオプションのJavaScriptプラグイン用のHTMLおよびCSSベースのデザインテンプレートが含まれています。
Bootstrapを使用すると、レスポンシブデザインを簡単に作成することができます。

レスポンシブデザインとは?
レスポンシブなWebデザインとは、スマートフォンから大型デスクトップにいたるまで、すべてのデバイスで自動的に見栄えを調整するWebサイトを作成することです。

なぜBootstrapを使うのか?

使いやすい： HTMLとCSSの基礎知識があれば誰でもBootstrapを使うことができます。
応答性の高い機能： 携帯電話、タブレット、デスクトップに対応するBootstrapのレスポンシブCSS。
モバイルファーストアプローチ： Bootstrap3では、モバイルファーストスタイルはコアフレームワークの一部です。
ブラウザの互換性： Bootstrapは、最新のブラウザ（Chrome、Firefox、Internet Explorer、Safari、Opera）と互換性があります。

Bootstrapの入手方法

2つの方法があります。

公式ページよりダウンロードします。
ダウンロードせずにCDNからインクルードします。

このサイトはCDNインクルードの方法を採っています。

Bootstrap CDN

Bootstrapをダウンロードしてホストしたくない場合は、CDN（コンテンツ配信ネットワーク）から組み込むことができます。
MaxCDNは、BootstrapのCSSとJavaScriptのCDNサポートを提供します。 jQueryもインクルードする必要があります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap CDNを使用する利点：
多くのユーザーは、別のサイトにアクセスしたときに既にMaxCDNからBootstrapをダウンロードしています。
その結果、サイトにアクセスしたときにキャッシュからロードされ、ロード時間が短縮されます。
また、ほとんどのCDNは、ユーザーがファイルを要求すると、そのファイルが最も近いサーバーから提供されるようになり、読み込み時間も短縮されます。

Bootstrapで最初のページを作りましょう

1. HTML5のドキュメントタイプ設定

lang属性と正しい文字セットとともに、ページの先頭に常にHTML5のdoctypeを含めます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2. モバイルファースト設定

Bootstrap3はモバイルデバイスに対応するように設計されています。モバイルファーストスタイルは、コアフレームワークの一部です。
レンダリングとズームを適切に行うために、 <head> 要素の中に次の <meta> タグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 部分は、ページの幅をデバイスの画面幅に合わせるように設定します（デバイスによって異なります）。
initial-scale=1 の部分は、ページがブラウザによって最初に読み込まれたときの初期ズームレベルを設定します。

3. コンテナ設定

Bootstrapはサイトの内容をラップする要素が必要です。
選択できるコンテナクラスは2つあります。

.container クラスは、固定幅のコンテナです。
.container-fluid クラスは、ビューポートの幅全体にまたがる幅の広いコンテナを提供します。

注：コンテナはネスト可能ではありません（別のコンテナ内にコンテナを置くことはできません）。

containerの余白

.container を使用した場合の余白はデフォルトで以下のようになっています。

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
 
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
 
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

気になる方は適時独自CSSで書き換えましょう。

containerの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>はじめてのBootstrap</h1>
  <p>こんにちは、世界。</p> 
</div>

</body>
</html>

container-fluidの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>はじめてのBootstrap</h1>
  <p>こんにちは、世界。</p> 
</div>

</body>
</html>