Bootstrap5を読み込む為の方法を徹底解説

更新 : 2024/05/02

カテゴリー : Bootstrap, プログラミング・Web

by : It is R

Bootstrapは、Webサイトを制作するときに使うフレームワークです。
例えば、レイアウトを整えたり、ボタンを作ったりということが、あらかじめ用意されたクラスを割り振っていくことで、簡単にできてしまいます。

今回は、WebサイトでBootstrap5を読み込む方法を紹介します。

CDNを利用して、Bootstrapを使う方法
Bootstrapを公式サイトからダウンロードして使う方法
パッケージマネージャを使ったダウンロードの方法
まとめ

CDNを利用して、Bootstrapを使う方法

CDNを利用することで、Bootstrapをダウンロードすることなく始めることができます。

まずは以下の<link>タグを、<head></head>の間に入力します。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

次に以下のコードを、</body>の直前に入力します。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

HTML 全体で、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <title>Bootstrapの使い方</title>
</head>
<body>
    <div class="alert alert-primary" role="alert">
        アラートです
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

また、今回読み込んだ、JSファイル（bootstrap.bundle.min.js）は、PopperというJSライブラリを含んでいます。

もしPopperを別に読み込ませたいのであれば、「bootstrap.min.js」の方を読み込み、さらにその前でPopperを読み込む必要があります。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

Bootstrapを公式サイトからダウンロードして使う方法

つづいて、Bootstrapを公式サイトからダウンロードして使う方法を紹介します。

Bootstrap公式サイト（https://getbootstrap.com/）

上記サイトにアクセスし、「Download」をクリックします。

すると次のような画面が表示されますので、「Download」をクリックします。

これでダウンロードが開始されます。

ダウンロードしたものを解凍すると、「bootstrap-[バージョン]-dist」というフォルダが作られます。
（[バージョン]は、そのバージョンの数字になっています）

記事執筆時点の最新版は5.2.3なので、今回の場合は「bootstrap-5.2.3-dist」となります。
たとえば、この「bootstrap-5.2.3-dist」をindex.htmlファイルと同じ階層に置いた場合、次のようにして呼び出します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrapの使い方</title>
</head>
<body>
    <div class="alert alert-primary" role="alert">
        アラートです
    </div>
    <script src="bootstrap-5.2.3-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>