Zenn
🌊

【Bootstrap】コンポーネントまとめ

2025/02/11に公開
Bootstrap
tech

📌 1. 枠付きのカード & コンテンツボックス

コンポーネント 説明
Card（カード） 枠付きのコンテンツボックス
Jumbotron（ジャンボトロン） 大きな見出しを持つボックス
Panel風コンテナ シンプルな枠付きエリア
Shadow（影付きボックス） 影を加えたボックスデザイン

🔹 実装例 

<div class="card">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">ここに内容を記載。</p>
  </div>
</div>

📌 2. 境界線（ボーダー・枠線）

コンポーネント 説明
Border（枠線） シンプルなボーダー
Border Utilities 特定の位置にボーダーを適用
Shadow（影付き） ボーダーと影の組み合わせ

🔹 実装例 

<div class="border border-primary p-3">青い枠線</div>
<div class="border border-bottom border-warning p-3">下枠のみ</div>

📌 3. メッセージ・通知・ポップアップ

コンポーネント 説明
Alert（アラート） シンプルな通知ボックス
Toast（トースト） 画面端に表示する通知
Modal（モーダル） ポップアップダイアログ
Tooltip（ツールチップ） ホバーで表示する説明
Popover（ポップオーバー） クリックで表示する説明

🔹 実装例 

<div class="alert alert-success">成功しました！</div>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">モーダルを開く</button>

📌 4. メニュー・ナビゲーション

コンポーネント 説明
Dropdown（ドロップダウン） クリックでメニュー表示
Tabs（タブ） タブでコンテンツを切り替え
Breadcrumb（パンくずリスト） ページの階層ナビゲーション
Navbar（ナビバー） ヘッダーに配置するメニュー

🔹 実装例 

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">ホーム</a></li>
  <li class="nav-item"><a class="nav-link" href="#">プロフィール</a></li>
</ul>

📌 5. インジケーター・進捗状況

コンポーネント 説明
Progress（プログレスバー） 進捗状況を表示
Badge（バッジ） 小さなラベル（タグ）
List Group + Badge リストにカウントを表示

🔹 実装例 

<div class="progress">
  <div class="progress-bar bg-success" style="width: 75%;">75%</div>
</div>

📌 6. レイアウト・配置

コンポーネント 説明
Row + Col（グリッドシステム） レスポンシブなカラム配置
Float（フロート） 要素を左右に配置
Sticky Header（固定ヘッダー） スクロールしても固定されるヘッダー
Offcanvas（オフキャンバス） サイドメニュー風のレイアウト

🔹 実装例 

<div class="row">
  <div class="col-md-6">左側のコンテンツ</div>
  <div class="col-md-6">右側のコンテンツ</div>
</div>

📌 7. リスト・テーブル

コンポーネント 説明
List Group（リストグループ） 枠付きのリスト
Table（テーブル） 枠付きの表
Media Object（メディアオブジェクト） 画像とテキストの並列表示

🔹 実装例 

<ul class="list-group">
  <li class="list-group-item">リスト項目1</li>
  <li class="list-group-item">リスト項目2</li>
</ul>

📌 8. 画像・スライダー

コンポーネント 説明
Carousel（カルーセル） 画像スライダー
Card + Image（カード画像） 画像付きのカード
Media Object（メディア） 画像とテキストの組み合わせ

🔹 実装例 

<div class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100">
    </div>
  </div>
</div>

📌 9. アコーディオン（折りたたみ）

コンポーネント 説明
Accordion（アコーディオン） クリックで開閉できるボックス

🔹 実装例 

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        セクション1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">詳細な説明</div>
    </div>
  </div>
</div>

📌 まとめ

カテゴリ 代表コンポーネント
枠付きボックス Card, Jumbotron, Panel風デザイン
境界線・枠線 Border, Shadow
メッセージ・通知 Alert, Toast, Modal
メニュー・ナビ Dropdown, Tabs, Breadcrumb, Navbar
インジケーター Progress, Badge, List Group + Badge
レイアウト・配置 Row + Col, Float, Sticky Header, Offcanvas
リスト・テーブル List Group, Table, Media Object
画像・スライダー Carousel, Card + Image
アコーディオン Accordion

これでBootstrapの囲う系デザインを網羅的に整理しました！
どの要素が必要かすぐ見つけられるようになったはず✨

Discussion