🐕

Bootstrap5めも

2024/07/30に公開

※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":ツールチップの吹き出しの中に表示する文。

Discussion