とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. トースト

トースト

トーストを用いて、画面の左上などに一時的な通知メッセージを表示することができます。.toast でトーストを、.toast-header でヘッダを、.toast-body で本文を指定し、$(...).toast('show') で表示します。

<button type="button" class="btn btn-primary" onclick="$('#toast1').toast('show')">Show</button>
<div id="toast1" class="toast" data-delay="3000"
    role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="mr-2" alt="">
    <strong class="mr-auto">Toast title #1</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    This is a toast body.
  </div>
</div>

複数表示

トーストを複数表示することもできます。

<style>
.toast-group {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
}
</style>
<button type="button" class="btn btn-primary" onclick="$('#toast1').toast('show')">Show #1</button>
<button type="button" class="btn btn-primary" onclick="$('#toast2').toast('show')">Show #2</button>
<div class="toast-group">
  <div id="toast1" class="toast" ...>
    ...
  </div>
  <div id="toast2" class="toast" ...>
    ...
  </div>
</div>

オプション

data-autohide="false" は、トーストを自動的には消さないようにします。

<div class="toast" data-autohide="false" ...>
  ...
</div>

data-delay は、トーストを自動的に消すまでの時間をミリ秒で指定します。

<div class="toast" data-delay="3000" ...>
  ...
</div>

data-animation="false" は、アニメーションを無効化します。

<div class="toast" data-animation="false" ...>
  ...
</div>

Toast title #1 ×

This is a toast body.

Toast title #2 ×

This is a toast body.