まろりかモンスター

パソコンだいすき♡ 雑記ブログです!

Bootstrap 4を導入するための設定方法【2018年最新版】

Bootstrapのロゴ

BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。

また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブデザインもとてもやりやすいです。

今回はそのBootstrapの現時点(2018年4月)最新版の「Bootstrap 4.0.0」を導入するための設定方法を紹介します。

私自身も「Bootstrap 4.0.0」を利用しています。

ちなみに公式サイトは以下になります。

Bootstrap 4の公式サイト

「Bootstrap 4」の設定方法

今回紹介するのは、HTMLのhead要素とfooter要素にコードを追加する簡単な方法です。

head要素に設定を追加

まずはHTMLのhead要素に計2行を追加します。

  1. viewportのmetaタグ設定
  2. ※この設定は必須ではなく、設定しなくても動きます。
    ※すでにviewportのmetaタグ設定されている場合は必要に応じ設定をまとめてください。

  3. スタイルシート参照の追加
  4. ※既にスタイルシートを読み込んでいる場合は、それよりも前の位置に追加してください。

footer要素に設定を追加

続いて、HTMLのfooter要素に計3行を追加します。
Bootstrap 4の多く構成要素はJavaScriptを利用しているため、それを有効にするために追加が必要となります。

  1. jQuery参照の追加

  2. Popper.js参照の追加

  3. BootstrapのJavaScriptプラグイン参照の追加

設定したHTMLのサンプル

HTMLの全体の中で表現すると以下のようになります。


        File: bootstrap-4.html
        ----------------------

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

                <!-- viewport meta -->
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                <!-- Bootstrap CSS -->
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

            </head>
            <body>
                <h1>Hello, Bootstrap 4!</h1>

                <!-- jQuery、Popper.js、Bootstrap JS -->
                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            </body>
        </html>
        

ファイルをダウンロードして使用する場合

Bootstrap 4のファイルを直接ダウンロードして使用する方法もありますが、 そちらの方法が良い方は公式サイトに記載されているので参照ください。
ダウンロード形式が良い方は以下からダウンロードできます。

Bootstrap 4のダウンロードページ

「Bootstrapをカスタマイズしたい」や「読み込み速度をできるだけ速くしたい」といった人以外は、私が紹介したhead要素とfooter要素に追加する方法で良いです。

「Bootstrap 4」の使い方

Bootstrapは使い慣れるとすごく便利ですが始めは使い方を徐々に覚えていく必要があります。

Bootstrap 4の公式ドキュメントを見ても、どこを勉強した方が良いかは書いてません。

以下の記事でBootstrapを使い始める人向けにまずは覚えたほうが良いことを書いたので覗いてみてください。

www.marorika.com

まとめ

現時点(2018年4月)最新版の「Bootstrap 4.0.0」を導入するための設定方法をご紹介しました。

Bootstrap 4を導入すればサイトや記事の作成が格段に作成しやすくなります。
導入する際の参考になればうれしいです。

なお、はてなブログにBootstrap 4を設定する記事も書いているので、はてなブログをご利用の人は以下もご覧になってみてください。

www.marorika.com