Source

Toasts

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

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:

  • Si JavaScript a fonte aedificas, postulatutil.js .
  • Toasts sunt opt-in causis faciendis, ergo eas te ipsum initialize oportet .
  • Nota quaeso te authores esse pro tostis positione.
  • 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.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Translucens

Bibunt etiam leviter perlucentes, ut quicquid illi apparent supra, miscent. Nam navigatores qui backdrop-filterproprietatem CSS sustinent, etiam elementa sub tosti confundere conantur.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stacking

Cum plures bibunt, in directum reclinantes eos modo lectibili defecerimus.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </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.

Bootstrap 11 ago
Salve, mundi! Hoc nuntium tosti est. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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 unitas (atomica) nuntiata sit, quam quid mutatum sit annuntiet (quod problemata ducere posset si modo partem contenti tosti renovaret vel si eandem tosti contentam ostenderet. 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 homines satis temporis ad legendum tosti.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-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.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JavaScript mores

Consuetudinem

Initialize bibunt per JavaScript:

$('.toast').toast(option)

Optiones

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

Nomen Type Default Descriptio
animatio Boolean verum Applicare css fade transitus ad PRAEBIBO
autohide Boolean verum Auto abscondere PRAEBIBO
mora numerus 500 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 .

$().toast(options)

Gerdrudis collectio adnectit tracto elementum.

.toast('show')

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.

$('#element').toast('show')

.toast('hide')

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.

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

Events

Event Type Descriptio
show.bs.toast Huius rei accendit statim cum showinstantia methodus appellatur.
shown.bs.toast Eventus hic accensus est cum praebibo utenti visibile est.
hide.bs.toast Hic eventus statim accensus est, cum hidemethodus instantia vocata est.
hidden.bs.toast Eventus hic accensus est cum tosti occultatum ab usuario finivit. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})