Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
in English

Toasts

Imbotta notifiki lill-viżitaturi tiegħek b'toast, messaġġ ta' twissija ħafif u faċilment customizable.

Fuq din il-paġna

It-toasts huma notifiki ħfief iddisinjati biex jimitaw in-notifiki push li ġew popolarizzati minn sistemi operattivi mobbli u desktop. Huma mibnija bil-flexbox, għalhekk huma faċli biex jallinjaw u jpoġġuhom.

Ħarsa ġenerali

Affarijiet li għandek tkun taf meta tuża l-plugin toast:

  • It-toasts huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
  • It-toasts awtomatikament jaħbu jekk ma tispeċifikax autohide: false.
L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il prefers-reduced-motion-mistoqsija tal-midja. Ara t- taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .

Eżempji

Bażiku

Biex ninkoraġġixxu toasts estensibbli u prevedibbli, nirrakkomandaw header u body. L-intestaturi toast jużaw display: flex, li jippermettu allinjament faċli tal-kontenut grazzi għall-utilitajiet tal-marġni u l-flexbox tagħna.

It-toasts huma flessibbli kemm għandek bżonn u għandhom ftit li xejn markup meħtieġ. Bħala minimu, neħtieġu element wieħed li jkun fih il-kontenut "mixwi" tiegħek u nħeġġu bil-qawwa buttuna tkeċċi.

<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>
Preċedentement, l-iskripts tagħna żiedu l- .hideklassi b'mod dinamiku biex jaħbu kompletament toast (bil- display:none, aktar milli sempliċement bil- opacity:0). Dan issa mhux meħtieġ aktar. Madankollu, għal kompatibilità b'lura, l-iskrittura tagħna se tkompli taqleb il-klassi (anke jekk m'hemm l-ebda ħtieġa prattika għaliha) sal-verżjoni ewlenija li jmiss.

Eżempju ħaj

Ikklikkja l-buttuna hawn taħt biex turi toast (pożizzjonat bl-utilitajiet tagħna fir-rokna t'isfel tal-lemin) li ġiet moħbija b'mod awtomatiku.

<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: 11">
  <div id="liveToast" 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>

Aħna nużaw il-JavaScript li ġej biex niskattaw id-demo tal-toast live tagħna:

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

    toast.show()
  })
}

Trasluċidi

It-toasts huma kemmxejn trasluċidi biex jitħalltu ma 'dak li hemm taħthom.

<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>

Stivar

Tista 'munzell toasts billi tgeżwirhom f'kontenitur toast, li vertikalment iżid ftit spazjar.

<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>

Kontenut apposta

Ippersonalizza t-toasts tiegħek billi tneħħi s-sottokomponenti, tirranġahom b'utilitajiet , jew billi żżid il-markup tiegħek. Hawnhekk ħloqna toast aktar sempliċi billi neħħejna l-inadempjenza .toast-header, żidna ikona tal-ħbi tad-dwana minn Bootstrap Icons , u nużaw xi utilitajiet tal-flexbox biex taġġusta t-tqassim.

<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>

Inkella, tista 'wkoll iżżid kontrolli u komponenti addizzjonali mat-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>

Skemi tal-kulur

Filwaqt li tibni fuq l-eżempju t'hawn fuq, tista 'toħloq skemi ta' kuluri toast differenti bl- utilitajiet tal- kulur u l- isfond tagħna. Hawnhekk żidna .bg-primaryu .text-whitemal- .toast, u mbagħad żidna .btn-close-whitemal-buttuna tal-qrib tagħna. Għal tarf iqarmeċ, inneħħu l-bord default b' .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>

Pjazzament

Poġġi toasts b'CSS tad-dwana kif għandek bżonnhom. In-naħa ta' fuq tal-lemin ħafna drabi tintuża għan-notifiki, bħalma hija n-nofs ta' fuq. Jekk int qatt ser turi toast wieħed kull darba, poġġi l-istili tal-pożizzjonament dritt fuq il- .toast.

Bootstrap 11-il minuta ilu
Hello dinja! Dan huwa messaġġ toast. 
<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>

Għal sistemi li jiġġeneraw aktar notifiki, ikkunsidra l-użu ta 'element tat-tgeżwir sabiex ikunu jistgħu jinġabru faċilment.

<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>

Tista 'wkoll tikseb fancy b'utilitajiet flexbox biex tallinja toasts orizzontalment u/jew vertikalment.

<!-- 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>

Aċċessibilità

Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an aria-live region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include aria-atomic="true" to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the alert component instead of toast.

Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.

You also need to adapt the role and aria-live level depending on the content. If it’s an important message like an error, use role="alert" aria-live="assertive", otherwise use role="status" aria-live="polite" attributes.

As the content you’re displaying changes, be sure to update the delay timeout so that users have enough time to read the toast.

<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>

When using autohide: false, you must add a close button to allow users to dismiss the toast.

<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>

While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long delay timeout, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with 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($black, .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($black, .05);

Usage

Initialize toasts via JavaScript:

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

Triggers

Dismissal can be achieved with the data attribute on a button within the toast as demonstrated below:

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

or on a button outside the toast using the data-bs-target as demonstrated below:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-animation="".

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

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

toast.show()

hide

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

toast.hide()

dispose

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

toast.dispose()

getInstance

Static method which allows you to get the toast instance associated with a DOM element

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Static method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn’t initialized

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Events

Event type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast This event is fired immediately when the hide instance method has been called.
hidden.bs.toast This event is fired when the toast has finished being hidden from the user. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})