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

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

【新しい記事】

【古い記事】

コメントを残す

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