btn btn-primary active

bootstrap5.css

bootstrap5.css
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
bootstrap5.css
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

html bootstrap5 Sample

カード内にピル型ナビゲーションを組み込む:nav-pillsとcard-header-pills


カードのタイトル

カードの内容

ボタン
  <div class="card">
    <div class="card-header">
      <!-- ピル型のナビゲーション:card-header-pills -->
      <ul class="nav nav-pills card-header-pills">
        <li class="nav-item"> <a class="nav-link active" href="">アクティブ</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>
    </div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

カードにナビゲーションを組み込む:nav-tabs


カードのタイトル

カードの内容

ボタン
  <div class="card">
    <!-- カードのヘッダー -->
    <div class="card-header">
      <!-- タブ型のナビゲーション:card-header-tabs -->
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item"><a class="nav-link active" href="#">アクティブ</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>
    </div>
    <!-- カードの本文 -->
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

アクティブ状態のボタン:active


  <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">アクティブボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

ボタングループdivとaタグで:btn-group


  <div class="btn-group">
    <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
    <a href="#" class="btn btn-primary">Link</a>
    <a href="#" class="btn btn-primary">Link</a>
  </div>

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


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