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

「Bootstrap4最速の入門書(コンポーネントその2)」の感想・備忘録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>

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。