【初心者向け】Bootstrap4を導入/設定する3つの方法を解説

今回はBootstrap4を導入する3つの方法を解説します。CDNを使用する方法、ダウンロードする方法、gem/npmなどでインストールする方法の3つを詳しく説明します。

この記事を読むことで、Bootstrap4が使える環境を簡単に整えることができます。

Bootstrap4とは、twitter社が開発したフロントエンドの部品や機能を揃えたライブラリです。つまりCSSやJavascriptで書かれたファイルの集合です。

これを使うことで、自分で0から作成しなくてもボタンやフォーム、テーブルなどの部品や、タブ切り替え、モーダルウィンドウなどの機能を簡単に実装できます。

それでは3種類の導入方法を説明していきます。

目次

  1. CDNを使用したBootstrap4の導入方法
  2. ファイルをダウンロードしてBootstrap4を導入する方法
  3. パッケージ管理ツールでBootstrap4を導入する方法

1.CDNを使用したBootstrap4の導入方法

まずは、一番手軽なCDN(コンテントデリバリーネットワーク)を使用した導入方法を紹介します。

CDNとは、ファイルを高速に配信する仕組みで、これによってBootstrapのCSSやjavascriptのファイルを受信することができます。

まずは、Bootstrapのホームページにいきます。

Bootstrapホームページ

赤く丸をしたGet Startedを押します。

次のページで下にスクロールして、starter templateをコピーします。

これを使用したいhtmlファイルに貼り付けることで使用できます。

貼り付けて、hello worldが以下のように表示されていれば完成です。

ちなみにBootstrapのCSSだけ使用したい場合は、Quick Startの下にあるCSSのlinkタグのみをコピーして、headタグの中に貼り付けると使用できます。

以上がCDNを使用した導入方法です。

2.ファイルをダウンロードしてBootstrap4を導入する方法

ダウンロードして使用する場合、まずホームページからBootstrapのファイル群をダウンロードします。

Bootstrapホームページ

ホームページからダウンロードボタンをクリックします。

Complied CSS and JS の下にあるDownloadボタンでzipファイルをダウンロードします。

ダウンロードしたファイルを解凍すると、cssフォルダとjsフォルダがあります。この中にあるファイルをhtmlファイルで読み込むことで使用できるようになります。

今回はこのようなフォルダ構成でいれてみました。

BootstrapではjQueryというjavascriptのライブラリを利用しているのでそちらもダウンロードします。

jQueryホームページ

jQueryのダウンロード方法は以下で詳しく解説しています。

初心者向け!jqueryのダウンロード方法。できない理由も解説

今回は、jQueryからダウンロードしたjquery-3.4.1.min.jsは、jsフォルダの中にいれています。

そうしたら、index.jsで以下のようにコーディングします。

scriptの順番に気をつけてください。jquery-3.4.1.min.jsを先に読み込まないと、bootstrapがjQueryで書かれているためうまく動作しません

<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <link rel='stylesheet' href='./css/bootstrap.min.css'>
  <title>Document</title>
</head>
<body>
  <h1>Hello world</h1>
  
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>

これで導入は完了です。htmlファイルを開いて、hello worldの表示を確認しましょう。

このように表示されていて、コンソールにもエラーがなければ導入は終わりです。

パッケージ管理ツールでBootstrap4を導入する方法

最後にnpmやyarn、gemなどパッケージ管理のツールでインストールする方法を説明します。

npmを使用してインストールする場合は、以下のコマンドでインストールします。

npm install bootstrap

yarnでは、以下のコマンドです。

yarn add bootstrap

gemでは以下のコマンドです。gemfileに以下のコードを追加して、bundleします。

gem 'bootstrap', '~> 4.3.1'

railsに導入する方法は以下の記事で解説しています。

【初心者向け】Bootstrap4をRailsに導入を3ステップで解説

以上で、解説を終わります。Bootstrapを導入して、開発を効率よく進めましょう。