「Bootstrap4最速の入門書(コンポーネントその2)」の感想・備忘録2

「Bootstrap4最速の入門書(コンポーネントその2)」の感想・備忘録1の続き

トースト
1. トースト
パンくずリスト
1. パンくずリスト
ポップオーバー
1. ポップオーバー
ナビ
1. ナビ
モーダル
1. モーダル

トースト

divに.toastを指定する。
その中に.toast-headerと.toast-bodyを含める。
.toast-headerの中に.btn-closeとdata-bs-dismiss=”toast”を指定したbuttonを含める。
jsにnew bootstrap.Toast(document.querySelector(セレクタ), {autohide: false}).show()を追加する。
※ autohide: falseを指定しないと数秒後に自動的に非表示になる
トーストをdivで囲ってstyle="position:absolute; top:0"やclass="d-flex justify-content-center align-items-center"などで表示位置を調整するとよい。

<div class="toast">
  <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">本文<br>本文</div>
</div>
<script>
new bootstrap.Toast(document.querySelector('.toast'), {autohide: false}).show();
</script>

パンくずリスト

navの中のolに.breadcrumbを指定する。
liに.breadcrumb-itemを指定する。
現在のページには.activeを指定する。

<nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item">ホーム</li>
    <li class="breadcrumb-item active">ブログ</li>
  </ol>
</nav>

ポップオーバー

要素にtitle=”xxx”とdata-bs-content=”xxx”とdata-bs-toggle=”popover”を指定する。
bootstrap4ではdata-content, data-toggleであったが、bootstrap5ではdata-bs-content, data-bs-toggleに変更された。
jsにnew bootstrap.Popover(要素オブジェクト);を追加する。
bootstrap4では$(セレクタ).popover();であったが、bootstrap5では変更された。
data-bs-placement属性で表示方向の指定が可能: top, right, bottom, left

<button type="button" class="btn btn-primary" title="タイトル" data-bs-toggle="popover" data-bs-content="本文">ボタン</button>
<script>
new bootstrap.Popover(document.querySelector('[data-bs-toggle="popover"]'));
</script>

ナビ

ulに.navを指定する。
その中に.nav-itemのliを含める。
その中に.nav-linkのaを含める。
ulに.nav-tabsも指定するとタブ形式になる。
ulに.nav-pillsも指定するとカプセル型になる。
ulに.flex-columnも指定すると縦並びになる。
.flex-md-columnのようにブレークポイントの指定も可能。
liには.active, .disabledの指定が可能。
ulに.justify-content-xxxを指定することで配置の変更が可能。 xxx: start, end, center, between, around
.justify-content-md-xxxのようにブレークポイントの指定も可能。

<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link">111</a></li>
  <li class="nav-item"><a href="#" class="nav-link active">222</a></li>
  <li class="nav-item"><a href="#" class="nav-link disabled">333</a></li>
</ul>

モーダル

divに.modalと.fadeとid=”xxx”を指定する。
その中に.modal-dialogのdivを含める。
その中に.modal-contentのdivを含める。
その中に.modal-headerのdiv、.modal-bodyのdiv、.modal-footerのdivを含める。
.modal-headerの中に.modal-titleのh5などを含める。
閉じるボタンにはdata-bs-dismiss=”modal”を指定する。
bootstrap4ではdata-dismissであったが、bootstrap5ではdata-bs-dismissに変更された。
モーダルを表示するためのボタンにはdata-bs-toggle=”modal” data-bs-target=”#xxx”を指定する。
bootstrap4ではdata-toggle, data-targetであったが、bootstrap5ではdata-bs-toggle, data-bs-backdropに変更された。
静的なモーダル（背景をクリックしても閉じない）にする場合は、.modalのdivにdata-bs-backdrop=”static”も指定する。
bootstrap4ではdata-backdropであったが、bootstrap5ではdata-bs-backdropに変更された。
.modal-dialogのdivに.modal-dialog-scrollableも指定すると、コンテンツが長い場合にスクロールバーが表示される。
.modal-dialogのdivに.modal-dialog-centeredも指定すると、表示位置が中央になる。
.modal-dialogのdivに.modal-sm, .modal-lg, .modal-xlでサイズ変更が可能。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダル表示
</button>
<div class="modal fade" id="exampleModal">
  <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">本文<br>本文</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>