Bootstrapとは
BootstrapはHTML、CSS、およびJSを使用して開発するためのオープンソースのツールキットです。Sassの変数とミックスイン、レスポンシブグリッドシステム、豊富なビルド済みコンポーネント、およびjQuery上に構築された強力なプラグインを使用して、アイデアをすばやくプロトタイプ作成したり、アプリケーション全体を構築したりできます。
BootstrapはTwitter社が開発したフロントエンドフレームワークです。通常Webサイトのデザインはイチから自作する必要がありましたが、Bootstrapを使用するとあらかじめよく使われるスタイルが定義されているので、ルールに沿えばデザインが苦手でも見栄えするWebサイトを作成することができます。
またモバイル向けにレイアウトが開発されているので、複雑な設定をすることなくパソコン以外のデバイスからも整ったサイトが閲覧が可能、１つのWebデザインでPC、スマートフォン、タブレットで閲覧＝レスポンシブデザインに対応しています。 2019年10月現在、v4.3が最新版です。サポートされているブラウザはこちらです。IE8-9で閲覧する場合はv3.4.1を使用しますが、通常は最新のものを使用しましょう。
準備
まずはBootstrapをダウンロードします。トップページの「Download」ボタンをクリックしダウンロードページを表示します。Bootstorapを使用するには複数の方法がありますが、代表的なのは zipファイルをダウンロードし、ローカルに保存 BootstrapCDNを使用し、コンパイル済みのソースをネットワーク越しに参照（CDNに関しては検索してください）
npm、yarn、RubyGems、Composer、NuGetのパッケージマネージャからも取得可能です。
今回はzipファイルをダウンロードする方法でいきます。
ダウンロードしたzipファイルを解凍すると2つのフォルダがあります。
- bootstrap
- css
- js
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hello, world! とだけ表示されたかとおもいます。地味ですが。
大事なのは、HTML5のDOCTYPE宣言の記述（
<!doctype html>）、スタイルシートの呼び出し、jQueryとBootstrapのjsを呼ぶ順番です。これだけで、Bootstrapを使用できます。
とても簡単ですね！
次回はBootstrapに既にデザインされたパーツを作成してみたいと思います。