【Bootstrap5】モーダルの導入方法【CDN】
Bootstrap5でモーダルを導入をする方法について記載します。
一番楽なCDN方式です。
まずは下記の公式サイトを参照。
「jsDelivr 経由の CDN」の項目を確認します。
Bootstrapを導入する一番簡単な方法は、
上記のjsDeliver経由のCDNのリンクをコピーして、自分のプロジェクトに貼り付ければOKです。
（cssは、headタグの中、jsはbodyタグの中)
こんなかんじ↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- <title>モーダル学習</title>EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Hello World</h1>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-</html>MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
はい、これでBootstrapの導入はできたので、あとは公式サイトのモーダルの項目を確認。使いたいモーダルの様式をみつけて、コピペしましょう。
(↑Bootstrap5 モーダルとかでぐぐれば一発ででますぜ）
例えば、こんなかんじでコピーボタン押下すれば、モーダル表示のためのソースがコピペできます。
あとは、もう適宜はりつけて使いましょう。
<!DOCTYPE html><html lang="ja"><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><title>モーダル学習</title></head><body><!-- Button trigger modal --><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Launch static backdrop modal</button><!-- Modal --><div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Modal title</h5></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Understood</button></div></div></div></div></body><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script></html>
これでモーダル導入できるぞ～。
おまけ
ITの世界って情報の移り変わりが本当に早いですね。
なんてことを業界2年目ですが感じています。
ぺーぺーの初学者の時はバージョンとか言うてそんな変わらんだろ、と思っていた節があるのですが、まぁバージョンの違いで動かないってこともあるよね、というのが分かってきたかなとは思います。
