Toasts

Ventilabis notificationes tuas visitatores cum tosti, leve et facilis nuntius intenti customizable.

In hac pagina

Toasts notificationes leves sunt ad imitandum notificationes impulsus quae divulgatae sunt per rationes mobiles et desktop operativas. Cum flexbox aedificantur, ergo facile color et situs sunt.

Overview

Rerum scire cum usura tosti plugin:

Toasts sunt opt-in causis faciendis, ergo eas te ipsum initialize oportet .
Toasts sponte abscondent si tu non indicas autohide: false.

Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Videre motum sectionem accessibilitatis nostrae documentationis reductam .

Exempla

Basic

Ad fovendum extensibile et praevidendum bibunt, caput et corpus commendamus. Tosti capitis utuntur display: flex, alignment contenti facilem praebens ad marginem et flexbox utilitatum nostrarum.

Toasts tam flexibiles sunt quam tibi opus est, et signum exiguum exiguum habent. Ut minimum, unum elementum requirimus ad contentum tuum "ustum" continendum et ad conjunctionem dimissionis vehementer hortamur.

Salve, mundi! Hoc nuntium tosti est.

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>

Scripta nostra ante dynamice genus addidit ut tosti (cum , potius quam cum modo ) .hideomnino absconderet . Hoc iam iam non est necessarium. Tamen ad convenientiam retrogradam, scriptum nostrum classem (quamvis practici opus non est) usque ad maiorem versionem proximam, perget. display:noneopacity:0

Vivamus exemplum

Preme pyga infra ostende tosti (in angulo dextro inferiore collocatam cum nostris utilitatibus) per defaltam absconditam.

Hello, world! This is a toast message.

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

Utimur in sequentibus JavaScript ad trigger vivas tosti demo:

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

    toast.show()
  })
}

Translucens

Toasts leviter translucentes miscere cum illis quae infra sunt.

Salve, mundi! Hoc nuntium tosti est.

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>

Stacking

Potes ACERVUS bibunt eos in vase tosti involvendo, quod perpendiculum aliquod spatium adiiciet.

Videsne? Hoc modo.

Capita sunt, bibunt statim ACERVUS

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>

Custom content

Tuos toastos domiciliis sub- ponentibus subtrahendo, eas cum utilitatibus vellicando , vel addendo signum tuum. Hic tosti simpliciorem defaltam removendo .toast-header, addita consuetudine iconem occultare ex Iconibus Bootstrap , et flexbox quibusdam utilitatibus utendo ad extensionem accommodandam.

Salve, mundi! Hoc nuntium tosti est.

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>

Vel, etiam ad toasts potestates et partes additis addere potes.

Salve, mundi! Hoc nuntium tosti est.

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>

Color consilia

Supra exemplum aedificatis, varias tosti coloris machinas cum nostro colore et background utilitates facere potes. Hic addimus .text-bg-primary, .toastet deinde .btn-close-whitead conjunctionem nostram proximam adiunximus. Pro rigido ore, defaltam cum termino removemus .border-0.

Salve, mundi! Hoc nuntium tosti est.

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>

Placement

Place toasts cum consuetudine CSS ut eis opus sit. Summum ius saepe ponitur pro notificationibus, sicut est summum medium. Si tantum semper es ad praebendam unam tosti ad tempus, stylos positos pone in dextro .toast.

Salve, mundi! Hoc nuntium tosti est.

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>

Nam systemata quae plures notificationes generant, elementum involutum considerare ut facile ACERVUS.

Videsne? Hoc modo.

Capita sunt, bibunt statim ACERVUS

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>

Potes fingere cum flexbox utilitatum ad align toasts horizontaliter et/vel perpendiculariter.

Salve, mundi! Hoc nuntium tosti est.

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>

Accessibility

aria-liveToasts proponuntur parvae interpellationes tuis visitatoribus vel usoribus, ut eos adiuvent legentibus screen et technologias adiuvantes similes, tosti in regione involvere debes . Mutationes ad regiones vivas (sicut injectio/adaequationis tosti componentis) automatice annuntiantur a legentibus screen, ut non indigeat ad movendum umbilicum usoris vel aliter interrumpendum usorem. Insuper includimus aria-atomic="true"curare ut tota tosti semper quasi una unitas (atomica) nuntiata sit, potius quam id quod mutatum est annuntiet (quod problemata ducere posset si tantum renovatio partis contenti tosti, vel si eandem tosti contentum ostendas. posteriori tempore). Si informationes necessariae magni momenti sunt ad processum, puta ad indicem errorum in forma, tum intenti componentis uterepro PRAEBIBO.

Nota regiones vivas in charactere adesse debere antequam tosti generatur vel renovatur. Si dynamice generaveris et simul et in paginam injicias, non fere technologiae adiuvandae annuntiabuntur.

Etiam opus est accommodare roleet aria-liveaequare secundum contentum. Si nuntius magni momenti est sicut error, utere role="alert" aria-live="assertive", alioquin role="status" aria-live="polite"attributa utere.

Prout contentus mutationes ostendis, scito tempus delayrenovare ut utentes tempus satis habeant tosti legere.

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

Cum utendo autohide: false, puga pyga arctam addere debet ut utentes tosti dimittant.

Salve, mundi! Hoc nuntium tosti est.

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>

Dum technica potestates focusable/activas addere potest (ut additae globuli vel nexus) in tosti tuo, hoc vitare debes pro tosti autohiding. Etiamsi tosti longum tempus delaydederis , technologiae technologiae claviaturae et adiuvandae utentes difficultatem invenient ad PRAEBIBO tempore agendi (quia bibunt umbilicum non recipiunt cum monstrantur). Si ulterius imperium absolute habere debetis , commendamus tostum cum utendo autohide: false.

CSS

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutae CSS variabiles accedunt, toasts nunc CSS variabilium localium utere in .toastad auctum real-time css. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

  --#{$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 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:                $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);

Consuetudinem

Initialize bibunt per JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Triggers

Dimissio fieri potest cum dataattributo in puga tosti intra ut infra demonstratum est;

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

vel in globulo extra tosti utendo, data-bs-targetut infra demonstratum est;

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

Optiones

Cum optiones transeantur per data attributa vel JavaScript, potes appendere nomen optionis data-bs-, ut in data-bs-animation="{value}". Fac mutare casus genus optionis nominis ab " camelCase " ad " kebab-casum " cum transeundo optiones per data attributa. Exempli gratia data-bs-custom-class="beautifier"loco data-bs-customClass="beautifier".

Sicut de Bootstrap 5.2.0, omnia membra experimentalem datam reservatam sustinent data-bs-configquae figuram simplicem componentem sicut chorda JSON domum habere potest. Cum elementum habet data-bs-config='{"delay":0, "title":123}'et data-bs-title="456"attributa, valor finalis titleerit 456et attributa separata data valores supra datos vincent data-bs-config. Praeterea exsistentes notitiae attributae possunt domum JSON valores similes data-bs-delay='{"show":0,"hide":150}'.

Nomen	Type	Default	Descriptio
`animation`	Boolean	`true`	Transitum ad tosti fades adhibe CSS.
`autohide`	Boolean	`true`	Sponte abscondere tosti post dilationem.
`delay`	numerus	`5000`	Mora in milliseconds ante tosti occultans.

Methodi

Modi asynchronous et transitus

Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .

See our JavaScript documentation for more information .

Methodus	Descriptio
`dispose`	Praesent elementum suscipit ullamcorper. Tosti tuum in DOM remanebit sed amplius non ostendet.
`getInstance`	Ratio static, quae te permittit ut tosti instantia consociata cum elemento DOM. Exempli gratia: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`redit exemplum tosti Bootstrap.
`getOrCreateInstance`	Statica methodus, quae te permittit ut instantia tosti cum elemento domno coniuncta, vel novum efficias, si non initialized erat. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Gerdrudis Bootstrap refert exempli.
`hide`	Praesent elementum suscipit ullamcorper. Redit ad RECENS ante tosti actu absconditum (id est antequam `hidden.bs.toast`evenit). Hanc methodum vocare debes, si facere `autohide`potes `false`.
`isShown`	Redit a boolean secundum statum visibilitatis tosti.
`show`	Praesent elementum suscipit fringilla. RECENS REcurrit ante tosti prius ostensum est (id est antequam `shown.bs.toast`evenit). Hanc methodum vocare tibi manuale debes, pro tosti non ostendes.

Events

Eventus	Descriptio
`hide.bs.toast`	Hic eventus statim accensus est, cum `hide`methodus instantia vocata est.
`hidden.bs.toast`	Eventus hic accensus est cum tosti occultatum ab usuario finivit.
`show.bs.toast`	Huius rei accendit statim cum `show`instantia methodus appellatur.
`shown.bs.toast`	Eventus hic accensus est cum praebibo utenti visibile est.

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