Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Toasts (トースト)

軽量で簡単にカスタマイズできるアラートメッセージをプッシュ通知します。

On this page

Toasts は、モバイルやデスクトップの OS で普及しているプッシュ通知を模倣して設計された軽量な通知です。flexbox で作られているので、位置合わせや配置が簡単です。

Overview

Toasts 　プラグインを使うときに知っておきたいこと

  • Toasts はパフォーマンスのためにオプトインされています。自分で初期化する必要があります。
  • Toasts は autohide: false を指定しないと自動的に非表示になります。
このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの reduced motion セクションを参照してください。

Examples

Basic

Toasts の拡張性と予測可能性を高めるために、ヘッダと本文を推奨します。Toasts のヘッダは display: flex を使用しており、 margin と flexbox ユーティリティによりコンテンツを簡単に整列させることができます。

Toasts は必要なマークアップはほとんどありません。最低限、“Toasts” コンテンツを含む要素を 1 つだけ必要とし、却下ボタンを強く推奨します。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <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>

Live

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

<button type="button" class="btn btn-primary" id="liveToastBtn">
  Show live toast
</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
  <div
    id="liveToast"
    class="toast hide"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="..." />
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <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>

Translucent

Toasts は半透明なので、上に表示されるものは何でも溶け込みます。CSS プロパティ backdrop-filter をサポートしているブラウザでは、Toast の下にある要素をぼかしてみます。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <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>

Stacking

Toast が複数ある場合は、読みやすいように縦に重ねるのがデフォルトになっています。

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Custom content

サブコンポーネントを削除したり、utilitiesを使って調整したり、独自のマークアップを追加したりして、トーストをカスタマイズできます。ここでは、デフォルトの .toast-header を削除し、Bootstrap Iconsからカスタムの非表示アイコンを追加し、flexbox utilitiesを使ってレイアウトを調整することで、よりシンプルなトーストを作成しています。

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternatively, you can also add additional controls and components to toasts.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Color schemes

上記の例に基づいて、color と background ユーティリティを使用して、さまざまなトーストのカラースキームを作成することができます。ここでは、.toast に .bg-primary と .text-white を追加し、クローズボタンに .btn-close-white を追加しています。鮮明なエッジを出すために、.border-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">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Placement

必要に応じてカスタム CSS で配置します。右上は通知によく使用されます。一度に 1 つの Toast しか表示しない場合は、配置スタイルを .toast に配置してください。

Bootstrap 11 mins ago
Hello, world! This is a toast message. 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

多くの通知を生成するシステムでは、簡単にスタックできるようにラッピング要素を使用することを検討してください。

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>

  </div>
</div>

flexbox ユーティリティを使って、Toast を水平方向や垂直方向に整列させることもできます。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <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>

Accessibility

Toasts はユーザーのページ閲覧の中断を意味するので、スクリーンリーダーや同様の支援技術を使用しているユーザーを支援するには、Toast を aria-live region でラップする必要があります。 ライブ領域への変更（ Toast の挿入/更新など ）は、ユーザーのフォーカスを移動したり、ユーザーを中断したりする必要なく、スクリーンリーダーによって自動的に通知されます。 さらに、 aria-atomic =" true "を含めて、変更内容を通知するのではなく、トースト全体が常に 1 つの（アトミック）ユニットとしてアナウンスされるようにします (これは、トーストの内容の一部だけを更新したり、後の時点で同じ内容を表示したりする場合に問題を引き起こす可能性があります)。 必要な情報がプロセスにとって重要な場合。 フォーム内のエラーのリストについては、Toast の代わりにalert component を使用してください。

Toast が生成されたり更新されたりする前に、マークアップに存在する必要があることに注意してください。両方を同時に動的に生成してページに注入した場合、一般的には支援技術によってアナウンスされることはありません。

また、内容に応じて role と aria-live のレベルを調整する必要があります。エラーなどの重要なメッセージであれば role="alert" aria-live="assertive" を使い、そうでなければ role="status" aria-live="polite" 属性を使います。

表示する内容が変更されたら、時間を確保するために delay timeout を更新するようにしてください。

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

autohide: false を使用する場合は、ユーザーがトーストを閉じることができるように閉じるボタンを追加する必要があります。

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <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>

技術的には、Toast の中にフォーカスやアクションが可能なコントロール（追加のボタンやリンクなど）を追加することは可能ですが、自動非表示の Toast ではこれを避けるべきです。 Toast に長いdelay timeoutを与えたとしても、キーボードや支援技術のユーザーが行動を起こすために Toast にたどり着くのは難しいかもしれません（ Toast は表示された時点ではフォーカスを受けないため）。 コントロールが必要な場合は、autohide: false のトーストを使用することをお勧めします。

Sass

Variables

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

Usage

JavaScript で Toast を初期化します。

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

Options

オプションは、データ属性または JavaScript で渡すことができます。データ属性の場合は、 data-bs-animation =" "のように、オプション名を data-bs-に追加します。

Name Type Default Description
animation boolean true CSSフェードトランジションを適用します
autohide boolean true 自動で非表示にします
delay number 5000 トーストを隠す遅延時間（ms）

Methods

非同期のメソッドとトランジション

すべての API メソッドは非同期で、トランジションを開始します。トランジションが開始されると同時に呼び出し元に返されますが、トランジションが終了する前に返されます。また、遷移中のコンポーネントに対するメソッドコールは無視されます。

詳しくは JavaScript のドキュメントをご覧ください。

show

Toast 要素を表示します。トーストが実際に表示される前に呼び出し元に戻ります (shown.bs.toast イベントが発生する前)。 メソッドは手動で呼び出す必要があります。

toast.show();

hide

Toast 要素を非表示します。 トーストが実際に隠される前に呼び出し元に戻ります。 ( hidden.bs.toast が発生します。)。 autohide を false にした場合は、このメソッドを手動で呼び出す必要がある。

toast.hide();

dispose

Toast 要素を隠します。Toast は DOM 上に残りますが、表示されなくなります。

toast.dispose();

Events

Event type Description
show.bs.toast showインスタンスメソッドが呼び出されたときに発生します。
shown.bs.toast Toast がユーザに表示されたときに発生します。
hide.bs.toast hideインスタンスメソッドが呼び出されたときに発生します。
hidden.bs.toast Toast の非表示が終了したときに発生します。 
var myToastEl = document.getElementById("myToast");
myToastEl.addEventListener("hidden.bs.toast", function () {
  // do something...
});