Bootstrap5サンプル検索

button要素を使用したドロップダウン：dropdownとdata-toggle

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

ボタングループに設定するドロップダウン：btn-group

  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      ドロップダウン
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

メニュー項目にbuttonを使用する：dropdown-menu

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

メニューの位置をボタンと右寄せにする：dropdown-menu-right

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

切り替えボタンにaタグ要素を使用したドロップダウン：dropdown-toggle

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

メニュー項目にアクティブの状態を設定する：active

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" href="#">メニュー02（無効）</a>
      <a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
    </div>
  </div>

左側表示のドロップメニュー：dropleft

  <div class="container py-5 d-flex justify-content-center">
    <!-- 左方向へのドロップ -->
    <div class="btn-group dropleft">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

右側表示のドロップメニュー：dropright

  <div class="container py-5 d-flex justify-content-center">
    <!-- 右方向へのドロップ -->
    <div class="btn-group dropright">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">右方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

上側表示のドロップメニュー：dropup

  <div class="container py-5 d-flex justify-content-center">
    <!-- 上方向へのドロップ -->
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">上方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

オーバーフロー（枠から飛び出す）を制約する設定：data-boundary

  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <!-- ata-boundary="scrollParent"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>

スペースがない場合に、反対側にドロップダウンを表示させる：data-flip

  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- data-flip="true"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
      </div>
    </div>
  </div>

ドロップダウンのオフセット値を設定する：data-offset

  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

ドロップダウンメニューにdivでテキストを配置する：text-muted

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
      <p>メニュー内のテキストその1</p>
      <p class="text-danger">メニュー内のテキストその2</p>
    </div>
  </div>

トグルボタンでdivコンテンツに様々な要素を追加する：dropdown-toggleとdropdown-menu

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

ドロップダウンにリンクなしの項目を追加する：dropdown-item-text

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <div class="dropdown-menu">
      <!-- メニューの説明分など入れたい場合に利用 -->
      <span class="dropdown-item-text">非リンクテキスト</span>
      <a class="dropdown-item" href="#1">メニュー1</a>
      <a class="dropdown-item" href="#2">メニュー2</a>
      <a class="dropdown-item" href="#3">メニュー3</a>
    </div>
  </div>

ドロップダウンで用意されているJSメソッド：dropdpown('toggle')

  <!-- ドロップダウン -->
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- 最初から選択肢を出しておく -->
    <div class="dropdown-menu" aria-labelledby="dropdownExample">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownExample').dropdown('toggle');
    });
  </script>

ドロップダウンのオフセット値を設定する：offset

  <!-- data-offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。 -->
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownMenuButton').dropdown({
        offset: '10, 20'
      })
    });
  </script>

スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split

  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割して表示する -->
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

入力グループドロップダウン付きアドオン：input-group-append

  <div class="input-group">
    <input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
    <div class="input-group-append">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">アクション</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
      </div>
    </div>
  </div>

入力グループスプリットボタン付きアドオン：input-group-append

  <div class="input-group">
    <input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
    <div class="input-group-append">
      <button type="button" class="btn btn-secondary">アクション</button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">ドロップダウン切替</span>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
      </div>
    </div>
  </div>

ラジオボタンをボタンに変更する：labelとbtnとdata-toggle=buttons

ラジオ1 ラジオ2 ラジオ3

  <div class="btn-group" data-toggle="buttons">
    <!-- labelでinputを囲む -->
    <label class="btn btn-secondary active">
      <input type="radio" checked autocomplete="off">ラジオ1
    </label>
    <label class="btn btn-secondary">
      <input type="radio" autocomplete="off">ラジオ2
    </label>
    <label class="btn btn-secondary">
      <input type="radio" autocomplete="off">ラジオ3
    </label>
  </div>

チェックボックスをボタン変更する：labelとbtnとdata-toggle=buttons

チェック1 チェック2 チェック3

  <!-- data-toggle="button" を指定すると、トグルボタンを作成することができます -->
  <!-- トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持される -->
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked autocomplete="off">チェック1
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック2
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック3
    </label>
  </div>

ドロップダウンメニュー：data-toggleとdropdown

  <!-- .dropdown, .dropdown-toggle, data-toggle="dropdown", .dropdown-menu, .dropdown-item を組み合わせてドロップダウンメニューを作成する -->
  <div class="btn-group" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">1</button>
    <div class="btn-group" role="group">
      <button id="dropmenu1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="dropmenu1">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
  </div>

垂直方向ボタングループ：btn-group-vertical

  <div class="btn-group-vertical" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">上ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <div class="btn-group" role="group">
      <button id="drop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="drop2">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
    <button type="button" class="btn btn-secondary">下ボタン</button>
  </div>

押されている状態のボタンを作成する：aria-pressed

  <!-- ボタンが押されている状態と押されていない状態を表示する -->
  <button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true"
    autocomplete="off">プッシュ状態</button>
  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false"
    autocomplete="off">未プッシュ状態</button>

タブとタブパネル：navとnav-tabsとtab-contentとtab-pane

ホームのコンテンツ

プロフィールのコンテンツ

コンタクトのコンテンツ

  <!-- タブ部分 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
        aria-controls="home" aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
        aria-controls="profile" aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
        aria-controls="contact" aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <!-- herfの#とidで切り替える -->
  <div class="tab-content mt-3" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
  </div>

ナビゲーションバー基本：navbarとnavbar-brandとcollapse

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- TOPは常に表示 -->
    <a class="navbar-brand" href="#">TOP</a>
    <!-- navbar-togglerでレスポンシブ -->
    <!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
    <!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"
      aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav2">
      <!-- メニューはulとliを使う -->
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">メニュー1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
      </ul>
    </div>
  </nav>

ナビバーとコンテナ：container

コンテンツcontainer

コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">TOP</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22"
        aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav22">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">メニュー1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- ここから、コンテンツが始まる -->
  <div class="container bg-light">
    <h4>コンテンツcontainer</h4>
    <p>
      コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
    </p>
  </div>

ナビバーの検索窓：form-inline

  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
    <a class="navbar-brand" href="#">TOP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー２</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー３</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

外部コンテンツの表示／非表示：navbar-togglerとnavbar-toggler-icon

折り畳みコンテンツ

ナビゲーションバーブランド経由で切り替え可

  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">折り畳みコンテンツ</h4>
      <span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
      aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>

ナビゲーションドロップダウンメニュー：dropdown-toggle

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <!-- dropdown-toggleを使う -->
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            ドロップダウンメニュー
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
            <a class="dropdown-item" href="#">サブメニュー1</a>
            <a class="dropdown-item" href="#">サブメニュー2</a>
            <a class="dropdown-item" href="#">サブメニュー3</a>
          </div>
        </li>
        <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
        <li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
      </ul>
    </div>
  </nav>

ナビゲーションバー内テキスト：navbar-text

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText"
      aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
      </ul>
      <!-- ナビバー内にテキストを表示したい場合 -->
      <span class="navbar-text ml-auto">ナビゲーションバーテキスト</span>
    </div>
  </nav>

ピル型ナビゲーションドロップダウン：nav-linkとdropdown-toggle

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

タブ型ナビゲーションドロップダウン：dropdown-toggle

  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーションバー切替ボタンを左寄せに表示：mr-auto

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02"
      aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">ブランド</a>
    <div class="collapse navbar-collapse" id="navbarNav02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ナビゲーションバーアイコンしか出さない

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- navbar-brand -->
    <a class="navbar-brand" href="#">TOP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2"
      aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav2">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ブランドの表示・非表示ブランドを折り畳んで隠すナビゲーションバ

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <a class="navbar-brand" href="#">ブランドを隠す</a>
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ナビバーのデザイン：navbar-darkとbg-dark

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <!-- アウトラインの検索ボタン、darkだど映える -->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ナビバーのデザイン：navbar-darkとbg-primary

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
      aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent2">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
    </div>
  </nav>

navbar-lightで文字色を暗くし、背景色をCSSで設定

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3"
      aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent3">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

アコーディオンを作成する：data-toggleとcollapse

カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。

カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。

カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。

  <div class="accordion" id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
            aria-expanded="true" aria-controls="collapseOne">
            カード01の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo">
            カード02の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
          カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
            aria-expanded="false" aria-controls="collapseThree">
            カード03の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
          カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
  </div>

折り畳みのJavaScript使用：show.bs.collapse

表示する

表示と非表示が切り替わるコンテンツ

  <p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
  <div class="collapse" id="sample2">
    表示と非表示が切り替わるコンテンツ
  </div>
  <script>
    // hide.bs.collapseはイベント
    $(function () {
      $('#sample2').on('hide.bs.collapse', function () {
        $('.toggle-btn').html('表示する');
      });
      $('#sample2').on('show.bs.collapse', function () {
        $('.toggle-btn').html('非表示にする');
      });
    });
  </script>

アコーディオンタイプのメニュー：data-parent

ボタン1

コンテンツ1

ボタン2

コンテンツ2

ボタン3

コンテンツ3

  <!-- data-parentをclassにすることで複数の対象を同時に開閉可能（開いたら、他が閉じる） -->
  <div id="sample3">
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button"
          aria-expanded="false" aria-controls="collapseContent01">ボタン1</a>
      </p>
      <div class="collapse" id="collapseContent01" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ1
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent02" role="button"
          aria-expanded="false" aria-controls="collapseContent02">ボタン2</a>
      </p>
      <div class="collapse" id="collapseContent02" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ2
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent03" role="button"
          aria-expanded="false" aria-controls="collapseContent03">ボタン3</a>
      </p>
      <div class="collapse" id="collapseContent03" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ3
        </div>
      </div>
    </div>
  </div>

複数の要素の表示と非表示とを切り替：data-target

ID「content-01」、クラス「contents」

ID「content-02」、クラス「contents」

  <!-- 切替ボタン、data-targetで切り替え先を指定する -->
  <p>
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-01"
      aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-02"
      aria-expanded="false" aria-controls="content-02">ID「content-02」</button>
  </p>
  <!-- 切り替え先は、IDで指定する「content-01」、クラス「contents」 -->
  <div class="row">
    <div class="col">
      <div class="collapse contents" id="content-01">
        <div class="card card-body">
          ID「content-01」、クラス「contents」
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse contents" id="content-02">
        <div class="card card-body">
          ID「content-02」、クラス「contents」
        </div>
      </div>
    </div>
  </div>

アコーディオン折り畳み：collapse

a要素とhref属性によるボタン
罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる

a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ

  <div class="row">
    <div class="col-sm-6 mb-4">
      <!-- a要素とhref属性による切替ボタン -->
      <p>
        <a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
          a要素とhref属性によるボタン<br>
          罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる
        </a>
      </p>
      <div class="collapse" id="collapseContent01">
        <div class="card card-body">
          a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
        </div>
      </div>
    </div>
  </div>

モーダル表示ボタン、外枠（非表示）、本体、コンテンツ、閉じるボタンの５点セット

  <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
  <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          モーダルの本文が入ります。
        </div>
        <div class="modal-footer">
          <!-- 「data-dismiss=”modal”」が閉じる動作 -->
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
  </div>

モーダルのアニメーション設定：fade

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

垂直方向中央に配置するモーダル：modal-dialog-centered

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <!-- モーダルの×ボタン -->
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: rgba(0, 0, 0, .1);
      border: 1px solid #aaa;
    }
  </style>

グリッドレイアウトを使用したモーダル：rowとcol

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4 ml-auto">col-md-4、ml-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ml-auto">col-md-3、ml-auto</div>
                <div class="col-md-2 ml-auto">col-md-2、ml-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

長いコンテンツのモーダル：modal-body

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

大きなサイズのモーダル　サイズのオプション：modal-lg

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
    <!-- モーダル -->
    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体modal-lg -->
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <!-- モーダルのフッター -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

小さなサイズのモーダル：modal-sm

    <button type="button" class="btn btn-secondary" data-toggle="modal"
      data-target="#smallModal">モーダルボタン（modal-sm）</button>
    <!-- モーダル -->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
      aria-hidden="true">
      <!-- 小さなモーダルのダイアログ本体modal-sm -->
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

モーダルを閉じるときにメッセージを出す：JavaScript使用

    <div class="container">
      <p class="text-center my-5"><button type="button" class="btn btn-primary" data-toggle="modal"
          data-target="#myModal">モーダルボタン</button></p>
      <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                  aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">モーダルの本文が入ります。</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('#myModal').on('hide.bs.modal', function (e) {
        if (!confirm('閉じてよろしいですか？')) {
          e.preventDefault();
        }
      });
    </script>
</body>
</html>

data-toggle

html bootstrap5 Sample