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

2018年1月17日2022年2月7日

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

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

今回はそのBootstrapの現時点（2020年3月）最新版の「Bootstrap 4.4.1」を導入するための設定方法を紹介します。

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

Bootstrap 4の公式サイト

「Bootstrap 4」の設定方法

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

head要素に設定を追加

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

1. viewportのmetaタグ設定

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

1. スタイルシート参照の追加

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

footer要素に設定を追加

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

1. jQuery参照の追加

1. Popper.js参照の追加

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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
            </head>
            <body>
                <h1>Hello, Bootstrap 4!</h1>

                <!-- jQuery縲￣opper.js縲。ootstrap JS -->
                <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
            </body>
        </html>