トースト（Toasts） v5.0.0設定変更

トーストは、モバイルとデスクトップオペレーティングシステムによって一般化されたプッシュ通知を模倣するように設計された軽量の通知である。Flexboxで作られているので、整列配置が簡単にできる。

概要（Overview）

トーストプラグインを使用するときに知っておくべきこと：

• トーストはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある（そのため実行コードが必要）。
• トーストは autohide: false を指定しなければ自動的に非表示になる。

JavaScriptdocument.querySelectorAll('.sample .toast')
  .forEach(toastNode => {
    const toast = new bootstrap.Toast(toastNode, {
      autohide: false
    })

    toast.show()
  })

実例（Example）v5.0.0-beta1設定変更、v5.2.0デザイン変更

基本（Basic）

拡張性と予測可能なトーストを奨励するため、ヘッダとボディの設定を推奨。トーストのヘッダはdisplay: flex を使用しており、マージンとFlexboxユーティリティにより簡単にコンテンツを整列できる。

トーストは必要なだけの柔軟性があり、マークアップはほとんど必要ない。少なくとも、トーストされたコンテンツを含む単一の要素が必要であり、閉じるボタンの設定を強く推奨。
※実例としてモーダルを利用してトーストを表示する方法をモーダルでトースト表示に掲載。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded me-2">
    <strong class="me-auto">Bootstrap</strong>
    <small>11分前</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
  <div class="toast-body">
    こんにちは！ これはトーストのメッセージです。
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded mr-2">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11分前</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    こんにちは！ これはトーストのメッセージです。
  </div>
</div>

ライブの実例（Live example）v5.0.0-beta2新設（v4.6.0でバックポート）、v5.3.0設定変更

下のボタンをクリックして、デフォルトで非表示になっているトースト（見本ではユーティリティを使用して右下隅に配置）を表示。

見本

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

HTML<button type="button" class="btn btn-primary" id="liveToastBtn">トーストを表示</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded mr-2">
      <strong class="me-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
  </div>
</div>

次のJavaScriptを使用して、ライブのトーストデモを起動する。

Bootstrap5.3.xの設定例 緑背景が5.3.0での変更箇所

JavaScriptconst toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

※Bootstrap5.2.xの設定例 緑背景が5.2.0での変更箇所、赤背景が5.3.0での変更箇所

JavaScriptconst toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

※Bootstrap4.xの設定例

JavaScript$('#liveToastBtn').click(function () {
  $('#liveToast').toast('show')
})

半透明（Translucent）

トーストは少し半透明なので、背面との色合いが混ざり合う。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="bg-secondary p-4">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">11分前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
  </div>
</div>

縦積み（Stacking）v5.2.0設定変更

トーストをトースト用のコンテナで囲むことで縦積みになる。これにより、垂直方向に間隔が追加される。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">たった今</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      ほらね。こんな感じ。
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">2秒前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      注意！トーストは自動的に縦積みになる
    </div>
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded mr-2">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">たった今</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    ほらね。こんな感じ。
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded mr-2">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2秒前</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    注意！トーストは自動的に縦積みになる
  </div>
</div>

カスタムコンテンツ（Custom content）v5.0.0-alpha2設定追加、v5.0.0-beta2設定変更

サブコンポーネントを削除するか、ユーティリティで微調整するか、独自のマークアップの追加でトーストをカスタマイズ。ここでは、デフォルトの .toast-header を削除し、いくつかのflexboxユーティリティを使用してレイアウトを調整することで、よりシンプルなトーストを作成。

見本

設定例

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
</div>

または、トーストに追加のコントロールとコンポーネントを追加できる。

見本

設定例

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    こんにちは！ これはトーストのメッセージです。
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">行動する</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">閉じる</button>
    </div>
  </div>
</div>

配色（Color schemes）v5.3.0設定変更

上記の例に基づいて、カラーユーティリティと背景色ユーティリティまたは.text-bg-{color} ヘルパーを使用して、さまざまなトーストの配色ができる。ここでは、.toast に .text-bg-primary を追加し、閉じるボタンを白くするために [data-bs-theme="dark"] を追加。エッジをくっきりさせるためデフォルトの罫線を .border-0 で削除。

見本

Bootstrap5.3.0の設定例 緑背景が5.2.0以降の変更箇所

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex" data-bs-theme="dark">
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
</div>

※Bootstrap5.1.xの設定例 赤背景が5.2.0以降の変更箇所

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
</div>

配置（Placement）v5.2.0設定変更

必要に応じてカスタムCSSでトーストを配置。行末（右）上や中央上は、通知のためによく使われる。一度に1つのトーストだけを表示する場合は、位置ユーティリティクラスを.toast に配置。

1.トーストを1つだけ表示する場合

見本

Bootstrap5.xの設定例 緑背景が変更箇所

行末（右）上に表示する場合<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast top-0 end-0 m-3">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

右上に表示する場合<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded mr-2">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
  </div>
</div>

位置クラスの組み合わせ

2. 複数のトーストを表示する場合

より多くの通知を生成するシステムでは、簡単に縦積みになるようにラッピング要素をご使用下さい。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

行末（右）上に表示する場合<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- 配置する -->
  <!-- トースト間の間隔用 `.toast-container` -->
  <!-- `top-0`＆ `end-0`で、トーストを行末上隅に配置 -->
  <!-- トーストがコンテナの端にくっつくのを防ぐための `.p-3` -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- その後、トーストを入れる -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." alt="..." class="rounded me-2">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">たった今</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
      </div>
      <div class="toast-body">
        ほらね。こんな感じ。
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." alt="..." class="rounded me-2">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">2秒前</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
      </div>
      <div class="toast-body">
        注意！トーストは自動的に縦積みになる
      </div>
    </div>
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

右上に表示する場合<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div style="position: absolute; top: 0; right: 0;">
    ...
  </div>
</div>

3. Flexユーティリティクラスを使って上下左右中央に表示

また、Flexboxユーティリティを使ってトーストを水平や垂直に配置させることもできる。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<!-- トースト配置用のFlexboxコンテナ-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- その後、トーストを入れる -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは！ これはトーストのメッセージです。
    </div>
  </div>
</div>

アクセシビリティ（Accessibility）

トーストは、訪問者やユーザーの中断が少ないように意図されているため、スクリーンリーダや同様の補助技術を持つ人を助けるために、トライアルを aria-live region で囲む必要がある。ライブリージョンの変更（トーストコンポーネントの挿入/更新など）は、ユーザーのフォーカスを移動したりユーザーを中断することなく、スクリーンリーダーによって自動的に通知される。さらに、aria-atomic="true" を組み込んでトースト全体が、変更内容を通知するだけでなく、常に単一の（アトミック）単位として通知されるようにする（トーストのコンテンツの一部のみを更新する場合や、後で同じトーストのコンテンツを表示する場合は問題が発生する可能性がある）。プロセスに必要な情報が重要な場合（例：フォーム内のエラーのリスト）については、トーストの代わりにアラートコンポーネントをご使用下さい。

トーストが生成や更新される前に、ライブリージョンがマークアップ内に存在する必要があるので注意。両方を同時に動的に生成してページに挿入すると、一般的には補助技術によって通知されない。

また、コンテンツに応じて role と aria-live レベルを調整する必要がある。エラーのような重要なメッセージの場合は、role="alert" aria-live="assertive" を使用し、それ以外の場合は、role="status" aria-live="polite" 属性を使用する。

表示するコンテンツが変更されたら、必ずdelay タイムアウトを更新して、ユーザーがトーストを読むのに十分な時間を確保して下さい。

Bootstrap5.xの設定例（10秒後に非表示にする設定）緑背景が変更箇所

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
  ...
</div>

autohide: false を使用する場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要がある。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded me-2">
    <strong class="me-auto">Bootstrap</strong>
    <small>11分前</small>
    <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
  <div class="toast-body">
    こんにちは！ これはトーストのメッセージです。
  </div>
</div>

技術的には、トーストにフォーカス可能/アクション可能なコントロール（追加のボタンやリンクなど）を追加できるが、トーストを自動非表示にするためにこれを行うことは避けて下さい。トーストに長いdelay タイムアウトを与えても、キーボードと支援技術のユーザーは、アクションを実行するのに間に合うようにトーストに到達するのが難しい場合がある（トーストが表示されたときにフォーカスが得られないため）。どうしてもさらにコントロールが必要な場合は、autohide：false でトーストを使用することを推奨。

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0新設

Bootstrapの進化するCSS変数アプローチの一環として、トーストは、リアルタイムのカスタマイズを強化するために、.toast でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_toasts.scss 内 toast-css-vars の設定--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 toast-variables の設定$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

使用方法（Usage）v5.2.0設定変更

JavaScriptでトーストを初期化する：

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

※Bootstrap4.xの設定例

JavaScript$('.toast').toast(option)

トリガー（Triggers）v5.1.0追加

トーストを閉じるには、下記のようにトースト内のボタンの data 属性を使用して実行できる：

設定例

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる">
</button>

または、下記のように追加の data-bs-target を使用してトーストの外側のボタンに表示できる：

設定例

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="閉じる"></button>

オプション（Options）v5.0.0-alpha2一部変更

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

メソッド（Methods）v5.2.0メソッド追加、設定変更

設定例const myToastEl = document.getElementById('myToastEl')
const myToast = bootstrap.Toast.getInstance(myToastEl) // Bootstrapトースト・インスタンスを返す

設定例const myToastEl = document.getElementById('myToastEl')
const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Bootstrapトースト・インスタンスを返す

イベント（Events）

使用例 v5.2.0設定変更

JavaScriptconst myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // 何かをする...
})