Hoppa till huvudinnehållet Hoppa till dokumentnavigering
Check
in English

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.

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

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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.

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

html 
<div class="toast-container position-static">
  <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.

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

html 
<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 .text-bg-primarytill .toast, och sedan lagt .btn-close-whitetill i vår stängningsknapp. För en skarp kant tar vi bort standardkanten med .border-0.

html 
<div class="toast align-items-center text-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.

Bootstrap 11 minuter sedan
Hej världen! Detta är ett skålmeddelande.
html 
<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 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.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

html 
<!-- 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 den information 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.

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

CSS

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder toasts nu lokala CSS-variabler .toastför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". Se till att ändra fallets typ av alternativnamnet från " camelCase " till " kebab-case " när du skickar alternativen via dataattribut. Använd till exempel data-bs-custom-class="beautifier"istället för data-bs-customClass="beautifier".

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

namn Typ Standard Beskrivning
animation booleskt true Applicera en CSS-fade-övergång på toasten.
autohide booleskt true Dölj rostat bröd automatiskt efter förseningen.
delay siffra 5000 Fördröjning i millisekunder innan du döljer rostat bröd.

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 .

Metod Beskrivning
dispose Döljer ett elements toast. Din toast kommer att finnas kvar på DOM men kommer inte att visas längre.
getInstance Statisk metod som låter dig få toast-instansen associerad med ett DOM-element.
Till exempel: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Returnerar en Bootstrap toast-instans.
getOrCreateInstance Statisk metod som låter dig få toast-instansen associerad med ett DOM-element, eller skapa en ny, om den inte initierades.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Returnerar en Bootstrap toast-instans.
hide Döljer ett elements toast. Återgår till den som ringer innan toasten 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.
isShown Returnerar ett booleskt värde enligt toastens synlighetstillstånd.
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.

evenemang

Händelse Beskrivning
hide.bs.toast Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
hidden.bs.toast Denna händelse avfyras när toasten har döljts för användaren.
show.bs.toast Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
shown.bs.toast Denna händelse avfyras när toasten har gjorts synlig för användaren. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})