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

posted with ヨメレバ

Amazonで見る

Kindleで見る

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

点数

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に変更された。