Rostat bröd

Skicka meddelanden till dina besökare med en skål, ett lätt och enkelt anpassningsbart varningsmeddelande.

På den här sidan

Toasts är lätta aviseringar utformade för att efterlikna push-meddelanden som har blivit populariserade av mobila och stationära operativsystem. De är byggda med flexbox, så de är lätta att justera och placera.

Översikt

Saker att veta när du använder toast-plugin:

Toasts är opt-in av prestandaskäl, så du måste initiera dem själv .
Rostat bröd gömmer sig automatiskt om du inte anger autohide: false.

Animeringseffekten av denna komponent beror på prefers-reduced-motionmediefrågan. Se avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .

Exempel

Grundläggande

För att uppmuntra töjbara och förutsägbara skålar rekommenderar vi en header och body. Toast-rubriker använder display: flex, vilket möjliggör enkel justering av innehåll tack vare våra marginal- och flexbox-verktyg.

Rostat bröd är så flexibla som du behöver och har väldigt lite märkning som krävs. Som ett minimum kräver vi att ett enda element innehåller ditt "rostade" innehåll och uppmuntrar starkt en avvisande knapp.

Hej världen! Detta är ett skålmeddelande.

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

Tidigare lade våra skript dynamiskt till .hideklassen för att helt dölja en skål (med display:none, snarare än bara med opacity:0). Detta är nu inte nödvändigt längre. Men för bakåtkompatibilitet kommer vårt skript att fortsätta att växla klassen (även om det inte finns något praktiskt behov av det) tills nästa större version.

Levande exempel

Klicka på knappen nedan för att visa en skål (placerad med våra verktyg i det nedre högra hörnet) som har dolts som standard.

Hello, world! This is a toast message.

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

Vi använder följande JavaScript för att utlösa vår livetoastdemo:

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

    toast.show()
  })
}

Genomskinlig

Rostat bröd är något genomskinligt för att smälta in med det som finns under dem.

Hej världen! Detta är ett skålmeddelande.

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

Stapling

Du kan stapla rostat bröd genom att slå in dem i en rostat brödbehållare, vilket kommer att lägga till lite mellanrum vertikalt.

Ser? Precis som denna.

Obs, rostat bröd staplas automatiskt

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

Anpassat innehåll

Anpassa dina skålar genom att ta bort underkomponenter, justera dem med verktyg eller genom att lägga till din egen uppmärkning. Här har vi skapat en enklare toast genom att ta bort standarden .toast-header, lägga till en anpassad dölj-ikon från Bootstrap Icons och använda några flexbox-verktyg för att justera layouten.

Hej världen! Detta är ett skålmeddelande.

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

Alternativt kan du också lägga till ytterligare kontroller och komponenter till rostat bröd.

Hej världen! Detta är ett skålmeddelande.

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

Färgscheman

Med utgångspunkt från ovanstående exempel kan du skapa olika färgscheman för rostat bröd med våra färg- och bakgrundsverktyg . Här har vi lagt till .bg-primaryoch .text-whitetill .toast, och sedan lagt .btn-close-whitetill vår stängningsknapp. För en skarp kant tar vi bort standardkanten med .border-0.

Hej världen! Detta är ett skålmeddelande.

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

Placering

Placera rostat bröd med anpassad CSS när du behöver dem. Den övre högra delen används ofta för aviseringar, liksom den övre mitten. Om du bara någonsin ska visa en skål i taget, placera positioneringsstilarna direkt på .toast.

Hej världen! Detta är ett skålmeddelande.

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

För system som genererar fler aviseringar, överväg att använda ett omslagselement så att de enkelt kan staplas.

Ser? Precis som denna.

Obs, rostat bröd staplas automatiskt

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

Du kan också bli snygg med flexbox-verktyg för att rikta in rostat bröd horisontellt och/eller vertikalt.

Hej världen! Detta är ett skålmeddelande.

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

Tillgänglighet

Skålar är avsedda att vara små avbrott för dina besökare eller användare, så för att hjälpa dem med skärmläsare och liknande hjälpmedelsteknik bör du slå in dina skålar i en aria-liveregion . Ändringar av levande regioner (som injicering/uppdatering av en toast-komponent) meddelas automatiskt av skärmläsare utan att behöva flytta användarens fokus eller på annat sätt avbryta användaren. Inkludera dessutom aria-atomic="true"för att säkerställa att hela toasten alltid tillkännages som en enda (atomär) enhet, snarare än att bara meddela vad som ändrades (vilket kan leda till problem om du bara uppdaterar en del av toastens innehåll, eller om samma toastinnehåll visas vid en senare tidpunkt). Om informationen som behövs är viktig för processen, t.ex. för en lista över fel i ett formulär, använd då varningskomponentenistället för rostat bröd.

Observera att den levande regionen måste finnas i markeringen innan toasten genereras eller uppdateras. Om du dynamiskt genererar båda samtidigt och injicerar dem på sidan, kommer de i allmänhet inte att meddelas av hjälpmedel.

Du måste också anpassa nivån roleoch aria-liveberoende på innehållet. Om det är ett viktigt meddelande som ett fel, använd role="alert" aria-live="assertive", annars använd role="status" aria-live="polite"attribut.

När innehållet du visar ändras, se till att uppdatera delaytimeout så att användarna har tillräckligt med tid att läsa skålen.

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

När du använder autohide: falsemåste du lägga till en stängningsknapp för att tillåta användare att avvisa toasten.

Hej världen! Detta är ett skålmeddelande.

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

Även om det tekniskt är möjligt att lägga till fokuserbara/handlingsbara kontroller (som ytterligare knappar eller länkar) i din toast, bör du undvika att göra detta för att autodölja toaster. Även om du ger rostat bröd en lång delaytimeout kan användare av tangentbord och hjälpmedel ha svårt att nå toasten i tid för att kunna vidta åtgärder (eftersom rostat bröd inte får fokus när de visas). Om du absolut måste ha ytterligare kontroller rekommenderar vi att du använder en toast med autohide: false.

Sass

Variabler

$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);

Användande

Initiera skålar via JavaScript:

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

Utlösare

Avvisning kan uppnås med dataattributet på en knapp i toasten som visas nedan:

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

eller på en knapp utanför toasten med hjälp av data-bs-targetsom visas nedan:

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

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-bs-, som i data-bs-animation="".

namn	Typ	Standard	Beskrivning
`animation`	booleskt	`true`	Applicera en CSS-fade-övergång på toasten
`autohide`	booleskt	`true`	Dölj rostat bröd automatiskt
`delay`	siffra	`5000`	Fördröj att dölja toasten (ms)

Metoder

Asynkrona metoder och övergångar

Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .

Se vår JavaScript-dokumentation för mer information .

show

Avslöjar ett elements toast. Återgår till den som ringer innan skålen faktiskt har visats (dvs innan shown.bs.toasthändelsen inträffar). Du måste anropa den här metoden manuellt, istället visas inte din toast.

toast.show()

Dölj

Döljer ett elements toast. Återgår till den som ringer innan skålen faktiskt har gömts (dvs innan hidden.bs.toasthändelsen inträffar). Du måste anropa den här metoden manuellt om du gjorde autohidetill false.

toast.hide()

kassera

Döljer ett elements toast. Din toast kommer att finnas kvar på DOM men kommer inte att visas längre.

toast.dispose()

getInstance

Statisk metod som låter dig få toast-instansen associerad med ett DOM-element

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

getOrCreateInstance

Statisk metod som låter dig få toast-instansen associerad med ett DOM-element, eller skapa en ny om den inte initierades

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

evenemang

Event typ	Beskrivning
`show.bs.toast`	Denna händelse aktiveras omedelbart när `show`instansmetoden anropas.
`shown.bs.toast`	Denna händelse avfyras när toasten har gjorts synlig för användaren.
`hide.bs.toast`	Denna händelse aktiveras omedelbart när `hide`instansmetoden har anropats.
`hidden.bs.toast`	Den här händelsen avfyras när toasten har döljts för användaren.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})