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

スポンサーリンク
「Bootstrap4最速の入門書(コンポーネントその2)」の感想・備忘録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>

コメント