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

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

カード
1. カード
2. ヘッダーとフッター
コラプス
1. コラプス
カルーセル
1. カルーセル
2. コントロールとインジケーター
  1. 「前へ」「次へ」のコントロール
  2. インジケーター
スクロールスパイ
1. スクロールスパイ
  1. リンク
  2. コンテンツ

カード

divに.cardを指定する。
その中に.card-bodyのdivを含める。
その中に.card-titleのh5など、.card-textのdivを含める。
画像を含める場合はimgに.card-img-topまたは.card-img-bottonを指定する。

<div class="card" style="width: 18rem">
  <div class="card-body">
    <img src="sample2.jpg" class="card-img-top">
    <h5 class="card-title">タイトル</h5>
    <div class="card-text">本文<br>本文</div>
  </div>
</div>

ヘッダーとフッター

divに.cardを指定する。
その中に.card-headerのdiv、.card-bodyのdiv、.card-footerのdivを含める。

<div class="card">
  <div class="card-header">ヘッダー</div>
  <div class="card-body">ボディ</div>
  <div class="card-footer">フッター</div>
  </div>
</div>

コラプス

divに.collapseとid=”xxx”を指定する。
表示するためのボタンにはdata-bs-toggle=”collapse” data-bs-target=”#xxx”を指定する。
bootstrap4ではdata-toggle, data-targetであったが、bootstrap5ではdata-bs-toggle, data-bs-targetに変更された。

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">見る</button>
<div class="collapse" id="exampleCollapse">
  本文<br>本文</div>
</div>

カルーセル

divに.carouselと.slideとid=”xxx”とdata-bs-ride=”carousel”を指定する。
bootstrap4ではdata-rideであったが、bootstrap5ではdata-bs-rideに変更された。
その中に.carousel-innerのdivを含める。
その中に.carousel-itemのdivを含める。（どれか1つに.activeを指定する）
その中に.d-block, .w-100のimgを含める。

<div id="exampleCarousel" class="carousel slide w-25" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="sample.jpg" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="sample2.jpg" class="d-block w-100">
    </div>
  </div>
</div>

コントロールとインジケーター

「前へ」「次へ」のコントロール

.carouselのdivの中に.carousel-control-prevとhref=”#xxx”とdata-bs-slide=”prev”を指定したaを含める。
bootstrap4ではdata-slideであったが、bootstrap5ではdata-bs-slideに変更された。
その中に.carousel-control-prev-iconのspanを含める。
「次へ」はprevの部分をnextにする。

インジケーター

.carouselのdivの中に.carousel-indicatorsのolを含める。
その中にdata-bs-target=”#xxx”とdata-bs-slide-to=”連番”を指定したliを含める。（どれか1つに.activeを指定する）
bootstrap4ではdata-target, data-slide-toであったが、bootstrap5ではdata-bs-target, data-bs-slide-toに変更された。

<div id="exampleCarousel" class="carousel slide w-25" data-bs-ride="carousel">
  <!-- 省略 -->
  <a class="carousel-control-prev" href="#exampleCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#exampleCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  <ol class="carousel-indicators">
    <li data-bs-target="#exampleCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#exampleCarousel" data-bs-slide-to="1"></li>
  </ol>
</div>

スクロールスパイ

リンク

navにid=”xxx”を指定する。
その中に.navと.nav-pillsを指定したulを追加する。（その中はナビと同じ）

コンテンツ

divにdata-bs-target=”#xxx” data-bs-spy=”scroll” style=”height: ○○○px; overflow-y: scroll;” class=”position-relative”を指定する。
bootstrap4ではdata-target, data-spyであったが、bootstrap5ではdata-bs-target, data-bs-spyに変更された。

<nav id="exampleScrollSpy">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#one">@one</a></li>
    <li class="nav-item"><a class="nav-link" href="#two">@two</a></li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#exampleScrollSpy" style="height: 300px; overflow-y: scroll;" class="position-relative">
  <h4 id="one">one</h4>
  <p>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</p>
  <h4 id="two">two</h4>
  <p>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</p>
</div>