Skip to main content Skip to docs navigation
View on GitHub

Toasts (トースト)

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

On this page

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

Overview

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

  • Toasts はパフォーマンスのためにオプトインされています。自分で初期化する必要があります。 位置の決定は自分で行います。
  • Toasts は autohide: false を指定しないと自動的に非表示になります。
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

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>

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

Customize your toasts by removing sub-components, tweaking with utilities, or adding your own markup. Here we’ve created a simpler toast by removing the default .toast-header, adding a custom hide icon from Bootstrap Icons, and using some flexbox utilities to adjust the layout.

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

Building on the above example, you can create different toast color schemes with our color utilities. Here we’ve added .bg-primary and .text-white to the .toast, and then added .text-white to our close button. For a crisp edge, we remove the default border with .border-0.

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

Placement

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

Bootstrap 11 mins ago
Hello, world! This is a toast message. 
<form>
  <div class="form-group 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>

JavaScript behavior

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 Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast
delay number 5000 Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

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...
})