🐕

Bootstrap5めも

2024/07/30に公開

Bootstrap

※aria-で始まっているものはスクリーンリーダで読み上げられるものになります。

Reboot

リセットCSSのような働きをする

https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css からCSSファイルをダウンロードする

HTMLファイルで読み込む

<link rel="stylesheet" href="bootstrap-reboot.css">

プログレス

<!--プログレスのコンテナ-->
<div class="progress">
   <!--プログレスの書式などの定義-->
    <div class="progress-bar" bg-secondary role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%
    </div>
</div>

インプットグループ

テキスト入力欄の左か右、もしくは、両側にテキストやボタンなどを1つ配置することができる。
複数の部品(例：テキストボックスとボタン)をひとまとめとして扱う

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="ユーザ名" aria-label="ユーザ名">
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

カルーセル

構成

※https://getbootstrap.jp/docs/5.3/components/carousel/より

class="carousel slide"：カルーセル全体
class="carousel-indicators"：インジケーター部分
class="carousel-inner"：実際のコンテンツ部分
class="carousel-item"：表示したい画像などを指定
data-ride="carousel"：Webページを読み込んだ時点でスライドショーを開始
※上図太字部分は同じ名前を使用すること

インジケーター部分

<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

class="active"：1番最初に表示したい画像に記述
data-bs-slide-to：表示したい順番を0から指定

スライド部分

<div class="carousel-item active">：1番最初に表示したい画像に記述

<img src="img/fruits01.jpg" class="d-block w-100" alt="フルーツの絵">

class="d-block w-100：ブロック要素にし、幅を100％に指定

<div class="carousel-caption d-none d-md-block">

carousel-caption：スライドにキャプションを追加
d-none：display:noneのこと
d-md-block：md(PCの時)、display:blockにする

切替(＜＞)ボタン部分

<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">

carousel-control-prev(next)：前(次)のスライドに移動するためのボタンを表示する領域を指す。
data-bs-slide="prev(next)"：ボタンがクリックされたときに前(次)のスライドに移動するように指定。

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

class="carousel-control-prev(next)-icon"：前(次)のスライドに移動するためのボタンを表示。
data-bs-target属性は、どのカルーセルに対して操作を行うかを指定
aria-hidden="true"：スクリーンリーダーで読み上げられる

<span class="visually-hidden">Previous</span>

visually-hidden-要素を視覚的に非表示にする。

アコーディオン

構成

<div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Accordion Item #1の本文
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Accordion Item #2の本文
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Accordion Item #3
                </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Accordion Item #3の本文
                </div>
            </div>
        </div>
    </div>

<div class="accordion" id="accordionExample">：アコーディオン全体のコンテナ。
<div class="accordion-item">：アコーディオンの一つのアイテムを表します。
<h2 class="accordion-header">：アイテムのヘッダー部分。

<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

class="accordion-button"：ボタンの見た目
data-bs-toggle="collapse"：ボタンのクリックでアコーディオンの開閉を制御。
data-bs-target="#collapseOne"：開閉対象のID（この場合は#collapseOne）を指定。

<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">

accordion-collapse：アコーディオンのコンテンツ部分を指す。
collapse：パネルが閉じる/開く動作を定義。
show：初期状態でこのパネルが表示されていることを示す。showクラスがない場合パネルは非表示になる。
data-bs-parent：グループ管理を行う。

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

accordion-button：アコーディオンのボタン部分を指す。
collapsed：最初は閉じておく。
data-bs-toggle="collapse":ボタンがクリックするたびに、パネルを開閉する。

モーダル

↓をクリックすると

↓が表示される

構成

※太字部分は名前を同じにする。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ボタン部分

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

モーダル部分の右上の×ボタン
モーダルを動作させるためには、data-bs-toggle="modal"とdata-bs-target="id名"の記述が必要

モーダル部分

class="modal-content"：モーダル全体を指す。
fs-5：font-sizeが1.25rem。
class="btn-close"：閉じるボタン。
data-bs-dismiss="modal"：クリックするとモーダルが閉じられる。

オフキャンバス

↓をクリックすると

↓が表示される

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

data-bs-toggle="offcanvas"：クリックするとオフキャンバスが動作する。
data-bs-target="#offcanvasScrolling"：対象のIDを指定。
offcanvas：Webページを表示した時点では表示されない。
offcanvas-start：左側にオフキャンバスを表示する。
data-bs-scroll="true" ：＜body＞のスクロールを有効にする。
data-bs-backdrop="false"：オフキャンバスが開いているときに背景が暗くならない。
tabindex="-1"：オフキャンバス要素がフォーカス可能でない。
オフキャンバスの右上の×ボタン

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

ポップオーバー

↓をクリックすると

↓のように表示される

    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover"
        data-bs-placement="top" data-bs-content="Top popover">
        Popover on top
    </button>
    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>

ポップオーバーの初期化

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
data-bs-toggle="popover"と記述されている要素を全て取得する。
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));：配列に変換する。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">

data-bs-container="body"：ポップオーバーのコンテンツがどこに追加されるかを指定。<body>要素の直下に挿入される。
data-bs-toggle="popover"：クリックするとポップオーバーが動作する。
data-bs-content="Top popover"："Top popover"というテキストがポップオーバー内に表示される。

スクロールスパイ

画面スクロールすると、画面右上で自動で「Second」が選択される。

<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

data-bs-spy="scroll"：scroll"と設定することで、要素がスクロールスパイとして動作する。
data-bs-target="#navbar-example2"：#navbar-example2"というIDを持つ要素をターゲットにすることで、現在表示されている場所に応じてナビゲーションバーなどの情報が更新される。
data-bs-root-margin="0px 0px -40%"：要素がスクロールして表示領域の下部が40%に到達する前に動作する。
data-bs-smooth-scroll="true"：スムーズスクロールを有効にする。

トースト

↓をクリックすると

↓が表示される

<body>
  <button type="button" class="btn btn-primary" id="liveToastBtn">クリック</button>

<div class="toast-container position-fixed p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="img/fruits01_300.jpg" class="rounded me-2">
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
  //ボタン(クリック)を取得
  const toastTrigger = document.getElementById('liveToastBtn')
  //トースト部分を取得
  const toastLiveExample = document.getElementById('liveToast')
//ボタンが存在する時
if (toastTrigger) {
  //トースト部分を生成
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  //ボタンをクリックした時
  toastTrigger.addEventListener('click', () => {
    //トーストを表示
    toastBootstrap.show()
  })
}
</script>
</body>

class="toast-container：トーストを格納するコンテナを作成
position-fixed：↑のコンテナを画面の固定位置に表示する

<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">

トーストメッセージ自体を定義するdiv要素
id="liveToast"：トーストを特定するためのID
class="toast"：Bootstrapのトーストスタイルを適用
role="alert"：この要素がアラートメッセージである

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close">

data-bs-dismiss="toast"：ボタンがクリックされたときにトーストが閉じるようにする
<div class="toast-header">：トーストのヘッダ部分

<img src="img/fruits01_300.jpg" class="rounded me-2">

画像を表示
class="rounded me-2：画像を丸くし、右側にマージンをつける
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>：×(閉じる)ボタン
<div class="toast-body">：トーストの本文部分を定義

ツールチップ

<body>
  <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
    Tooltip on top
  </button>

  <script>
    //data-bs-toggle="tooltip"と記述されている要素を取得
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    //mapに変換、生成、有効化
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  </script>
</body>

data-bs-toggle="tooltip"：クリックするたびにツールチップを動作させる。
data-bs-placement="top"：ツールチップを表示する場所。
data-bs-title="Tooltip on top"：ツールチップの吹き出しの中に表示する文。

Reboot

プログレス

インプットグループ

カルーセル

構成

インジケーター部分

スライド部分

切替(＜ ＞)ボタン部分

アコーディオン

構成

モーダル

構成

ボタン部分

モーダル部分

オフキャンバス

ポップオーバー

ポップオーバーの初期化

スクロールスパイ

トースト

ツールチップ

Discussion

切替(＜＞)ボタン部分