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

管理者

3年前

posted with ヨメレバ

Amazonで見る

Kindleで見る

「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>