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.

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

Utimur in sequentibus JavaScript ad trigger vivas tosti demo:

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

    toast.show()
  })
}

Translucens

Toasts leviter translucentes miscere cum illis quae infra sunt.

Salve, mundi! Hoc nuntium tosti est.

<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

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

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.

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

<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 .bg-primaryet .text-whitead .toast, et deinde .btn-close-whitead proximam conjunctionem nostram additam. Pro rigido ore, defaltam cum termino removemus .border-0.

Salve, mundi! Hoc nuntium tosti est.

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

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.

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

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

Videsne? Hoc modo.

Capita sunt, bibunt statim ACERVUS

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

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

Salve, mundi! Hoc nuntium tosti est.

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

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

Sass

Variabilium

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

Consuetudinem

Initialize bibunt per JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-bs-, ut in data-bs-animation="".

Nomen	Type	Default	Descriptio
`animation`	Boolean	`true`	Applicare css fade transitus ad PRAEBIBO
`autohide`	Boolean	`true`	Auto abscondere PRAEBIBO
`delay`	numerus	`5000`	tosti mora latens (Ms.);

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 .

ostende

Praesent elementum suscipit fringilla. RECENS REcurrit ante tosti prius ostensum est (id est antequam shown.bs.toastevenit). Hanc methodum vocare tibi manuale debes, pro tosti non ostendes.

toast.show()

celare

Praesent elementum suscipit ullamcorper. Redit ad RECENS ante tosti actu absconditum (id est antequam hidden.bs.toastevenit). Hanc methodum vocare debes, si facere autohidepotes false.

toast.hide()

dispono

Praesent elementum suscipit ullamcorper. Tosti tuum in DOM remanebit sed amplius non ostendet.

toast.dispose()

getInstance

Statica methodus quae te permittit ut instantia tosti cum elemento domne coniungatur

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

getOrCreateInstance

Statica methodus quae permittit ut instantia tosti cum elemento DOM coniungitur, vel novum crea in casu non initialized

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

Events

Genus res	Descriptio
`show.bs.toast`	Huius rei accendit statim cum `show`instantia methodus appellatur.
`shown.bs.toast`	Eventus hic accensus est cum praebibo utenti visibile est.
`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.

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