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

posted with ヨメレバ

Amazonで見る

Kindleで見る

kindle本「Bootstrap4最速の入門書(コンポーネントその2)」のまとめ。

点数
感想
フレックスボックス
1. フレックスボックス
2. 配置の指定
ドロップダウン
1. ドロップダウン
リストグループ
1. リストグループ
ページネーション
1. ページネーション
ツールチップ
1. ツールチップ

点数

74点

感想

コンポーネントの使い方についての記述がまとめられていた。

わかりやすくまとめられていて読みやすかったが、いくつか不要な記述があったり、記述が間違ったりしている点があったのが気になった。

フレックスボックス

.d-flexの中にブロック要素を入れる。
.d-md-flexのようにブレークポイントを指定することも可能。
以下のクラスを一緒に指定することが可能。
- .flex-row-reverse: 右⇒左に配置
- .flex-column: 上⇒下に配置

<div class="d-flex">
  <p class="bg-warning w-25">1</p>
  <p class="bg-info w-25">2</p>
  <p class="bg-success w-25">3</p>
</div>
<div class="d-flex flex-row-reverse">
  <p class="bg-warning w-25">1</p>
  <p class="bg-info w-25">2</p>
  <p class="bg-success w-25">3</p>
</div>

配置の指定

.justify-content-end: 末尾に配置。
.justify-content-center: 中央に配置。
.justify-content-between: 両端から均等配置。(先頭と末尾の要素は端に固定)
.justify-content-around: 均等配置。(先頭と末尾の前後に余白が含まれる)
.justify-content-md-endのようにブレークポイントを指定することも可能。

<div class="d-flex justify-content-end">
  <p class="bg-warning w-25">1</p>
  <p class="bg-info w-25">2</p>
  <p class="bg-success w-25">3</p>
</div>
<h3>justify-content-center</h3>
<div class="d-flex justify-content-center">
  <p class="bg-warning w-25">1</p>
  <p class="bg-info w-25">2</p>
  <p class="bg-success w-25">3</p>
</div>

ドロップダウン

divに.dropdownを指定する。
その中にdata-bs-toggle=”dropdown”のbuttonまたはa、.dropdown-menuのdivまたはulを含める。
ボタンに.dropdown-toggelも指定するとトグル形式になる。
bootstrap4ではdata-toggleだったが、bootstrap5ではdata-bs-toggleになった。
.dropdown-menuの中に.dropdown-itemのaを含める。
.dropdown-itemの間に.dropdown-dividerを追加するとセパレータとなる。

<div class="dropdown">
  <button class="dropdown-toggle btn btn-primary" data-bs-toggle="dropdown">ボタン</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">1111</a></li>
    <li><a class="dropdown-item" href="#">2222</a></li>
    <li class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">333</a></li>
  </ul>
</div>

リストグループ

.list-groupのulの中に.list-group-itemのliを含める。
liには.active, .disabledの指定が可能。
ulに.list-group-horizontalも指定すると水平方向となる。
.list-group-horizontal-mdのようにブレークポイントを指定することも可能。

<ul class="list-group">
  <li class="list-group-item">1111</li>
  <li class="list-group-item active">2222</li>
  <li class="list-group-item disabled">3333</li>
</ul>

ページネーション

navに.paginationを指定する。
その中に.paginationのulを含める。
その中に.page-itemのliを含める。
liには.active, .disabledの指定が可能。
その中に.page-linkのaを含める。
ulに.pagination-lgまたは.pagination-smも指定することでサイズ変更が可能。

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item disabled"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

ツールチップ

要素にtitle=”xxx”を追加。
jsにnew bootstrap.Tooltip(要素オブジェクト);を追加。
data-bs-placement属性で表示方向の指定が可能: top, right, bottom, left
data-bs-html=”true”でtitleにHTMLを使えるようになる。
bootstrap4ではjsは$(セレクタ).tooltip();であったが、bootstrap5では変更された。またdata-placementはdata-bs-placement、data-htmlはdata-bs-htmlに変更された。