「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>
コメント