Bootstrapのサンプルが動かない！？

2018年12月26日2022年9月11日

当ページのリンクには広告が含まれている場合があります。

お疲れ様です！久々の投稿ですね。
この間Bootstrapを触る機会があったのですが、その際にしょうもない理由でハマってしまいました。
せっかくなので、自分を戒めるためにも記事にしてみようと思います。

Bootstrapとは？

簡単に言いますと、HTML・CSS・JavaScriptで構成されたWeb用のフレームワークです。
Wikipediaでは以下のように説明されています。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

詳しくは公式ページを参照ください。

サンプルが動かない？！

以下のようなサンプルを触って、いわゆるアコーディオンメニューの動作を確認しようとしましたが、どうもうまくいきません。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <title>アコーディオンテスト</title>
</head>
<body>
    <p>
        <a class="btn" data-toggle="collapse" href="#collapseTest" role="button" aria-expanded="false" aria-controls="collapseTest">
            href要素でアコーディオンメニュー！
        </a>
        <button class="btn" type="button" data-toggle="collapse" data-target="#collapseTest" aria-expanded="false" aria-controls="collapseTest">
            button要素でアコーディオンメニュー！
        </button>
    </p>
    <div class="collapse" id="collapseTest">
        <div class="content">
            隠れていたコンテンツが表示されます。
        </div>
    </div>
</body>

どうしたものかとあちこちのサイトを確認して回ったのですが、わからずじまいでどうしようかと諦めかけたその時、足りない要素があることに気づきました！
こちらのlink要素が足りなかったのです！！！