【Bootstrap】通知・メニュー・ナビ・インジケーターまとめ
メッセージ・通知
🔹 アラート（Alert）| メッセージボックス |
シンプルな枠線でメッセージを強調したい場合に使います。
<div class="alert alert-primary" role="alert">
これは青のアラートボックスです！
</div>
<div class="alert alert-danger" role="alert">
これは赤の警告アラートです！
</div>
🎨 alert-primary（青）
🎨 alert-danger（赤）
🎨 alert-success（緑）
🎨 alert-warning（黄色）
🔹 トースト（Toast）| 通知ポップアップ |
画面の端に表示される通知ポップアップ。写真は画面の右下（×押すと閉じる）
<div class="toast show position-fixed bottom-0 end-0 p-3" role="alert">
<div class="toast-header">
<strong class="me-auto">通知</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
これはトースト通知の例です。
</div>
</div>
✅ toast クラスで作成
✅ position-fixed bottom-0 end-0 で右下固定
🔹 モーダル（Modal）| ポップアップダイアログ |
クリックで開くポップアップウィンドウ（ダイアログ）。
クリックすると
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダルを開く
</button>
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">モーダルタイトル</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
ここに説明文を入れる
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
✅ btn btn-primary のボタンをクリックすると開く
✅ modal-content 内にコンテンツを配置
✅ btn-close で閉じる
メニュー・ナビ
🔹 ドロップダウン（Dropdown）
クリックでメニューを開く枠。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
メニューを開く
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">アクション1</a></li>
<li><a class="dropdown-item" href="#">アクション2</a></li>
</ul>
</div>
✅ dropdown でメニューを作成
✅ dropdown-toggle でクリックイベントを追加
🔹 タブ（Tabs）
切り替え可能なコンテンツ枠。
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#profile">プロフィール</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>ホームのコンテンツ</p>
</div>
<div class="tab-pane fade" id="profile">
<p>プロフィールのコンテンツ</p>
</div>
</div>
✅ nav-tabs でタブを作成
✅ tab-content に切り替えコンテンツを設定
🔹 ステップインジケーター風（Breadcrumb）
現在のページのナビゲーション。
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item"><a href="#">カテゴリ</a></li>
<li class="breadcrumb-item active">現在のページ</li>
</ol>
</nav>
✅ breadcrumb でパンくずリスト作成
🔹 **スティッキーヘッダー（Sticky Header）| 固定ヘッダー|
**
スクロールしても固定されるヘッダー。
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定ヘッダー</a>
</div>
</nav>
✅ fixed-top で上部固定
✅ fixed-bottom にすると下部固定
インジケーター
🔹 プログレスバー（Progress） | 進捗状況を示す枠 |
進捗状況を示す枠組み。
<div class="progress">
<div class="progress-bar bg-success" style="width: 75%;">75%</div>
</div>
✅ progress で枠を作成
✅ progress-bar で進捗率を表現
🔹 バッジ（Badge）| 小さなラベル風の枠 |
小さなタグやラベル風の枠。
<h5>新着情報 <span class="badge bg-danger">NEW</span></h5>
<p>この文章には <span class="badge bg-primary">重要</span> なポイントがあります。</p>
✅ badge でラベルを作成
✅ bg-danger や bg-primary で色変更
🔹 リストグループ（List Group）| リストを枠で囲む |
リストを枠付きで整理。
<ul class="list-group">
<li class="list-group-item">リスト項目1</li>
<li class="list-group-item">リスト項目2</li>
<li class="list-group-item list-group-item-primary">強調されたリスト項目</li>
</ul>
✅ list-group で囲み
✅ list-group-item-primary で色付け
🔹 リストグループ + バッジ
リストの横にカウントなどを表示。
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
通知
<span class="badge bg-primary rounded-pill">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
メッセージ
<span class="badge bg-success rounded-pill">2</span>
</li>
</ul>
✅ d-flex justify-content-between で横並び配置
✅ rounded-pill で丸みのあるバッジ
Discussion