Ditositi

Kgorometša ditsebišo go baeti ba gago ka tositi, molaetša wa temošo wo o bofefo le wo o ka fetošwago gabonolo.

Letlakaleng le

Di- toast ke ditsebišo tše boima tšeo di hlametšwego go ekiša ditsebišo tša go kgorometša tšeo di tumišitšwego ke ditshepedišo tša go šoma tša diselefouno le tša khomphutha. Di agilwe ka flexbox, ka fao di bonolo go di logaganya le go di bea.

Kakaretšo

Dilo tšeo o swanetšego go di tseba ge o diriša plugin ya tositi:

Di-toast ke tša go kgetha ka mabaka a go šoma, ka gona o swanetše go di thoma ka bowena .
Ditositi di tla iphihla ka go iketla ge e ba o sa laetše autohide: false.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Mehlala

Ya motheo

Go kgothaletša di-toast tšeo di katološwago le tšeo di ka bolelelwago pele, re kgothaletša hlogo le mmele. Toast headers use display: flex, lumella bonolo lolamisiwa ga dikahare leboha rona margin le flexbox utilities.

Di-toast di feto-fetoga le maemo ka mo o nyakago gomme di na le go swaya mo gonyenyane kudu mo go nyakegago. Bonyane, re nyaka elemente e tee go ba le diteng tša gago tša “toasted” gomme re kgothaletša ka maatla konope ya go raka.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Pele, dingwalwa tša rena ka go fetoga di ile tša tlaleletša ka .hidesehlopha go uta tositi ka mo go feletšego (ka display:none, go e na le go fo ba ka opacity:0). Se bjale ga se sa nyakega. Le ge go le bjalo, bakeng sa go sepelelana ga morago, sengwalwa sa rena se tla tšwela pele go fetoša sehlopha (le ge go se na tlhokego ye e šomago ya sona) go fihla phetolelo ye kgolo ye e latelago.

Mohlala o phelang

Tobetsa konopo e ka tlase ho bontša tositi (e behiloeng le utilities rona sekhutlong se ka tlaase le letona) e patiloeng ka default.

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>

Re diriša JavaScript e latelago go hlohleletša demo ya rena ya tositi e phelago:

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

    toast.show()
  })
}

Se se phadimago

Di-toast di na le translucent go se nene go kopana le seo se lego ka tlase ga tšona.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Go kgoboketša

O ka kgoboketša di- toast ka go di phuthela ka gare ga sebjana sa tositi, seo se tlago go oketša sekgoba se itšego ka go otlologa.

Bona? Go no swana le se.

Dihlogo godimo, toasts tla stack ka tsela e iketsang

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

Diteng tša tlwaelo

Tlwaetša di-toast tša gago ka go tloša dikarolo tše dinyenyane, go di tweaking ka didirišwa , goba ka go tlaleletša ka go swaya ga gago. Mona re hlodile tositi e bonolo ka ho tlosa default .toast-header, eketsa tloaelo pata letšoao ho tloha Bootstrap Icons , le ho sebelisa ba bang ba flexbox utilities ho beha peakanyo.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Ka mo go fapanego, o ka oketša gape le ditaolo tše dingwe le dikarolo go di- toast.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Dikema tša mebala

Ka go aga godimo ga mohlala wo o lego ka mo godimo, o ka hlama dikema tša mebala ya tositi tše di fapanego ka didirišwa tša rena tša mebala le tša ka morago . Mona re okeditše .bg-primaryle .text-whitego .toast, gomme ka morago ra tlaleletša .btn-close-whitego konope ya rena ya go tswalela. Bakeng sa bohale bo hlakileng, re tlosa moeli oa kamehla ka .border-0.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Go bewa ga dilo

Bea di-toast ka CSS ya tlwaelo ge o di nyaka. Ka godimo ka go le letona gantši e šomišwa go ditsebišo, go swana le ya bogareng bja godimo. Ge e ba o tla tsoga o bontšha feela tositi e tee ka nako, bea mekgwa ya go bea maemo thwii godimo ga .toast.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Bakeng sa ditshepedišo tšeo di tšweletšago ditsebišo tše ntši, nagana ka go šomiša elemente ya go phuthela gore di kgone go kgoboketša gabonolo.

Bona? Go no swana le se.

Dihlogo godimo, toasts tla stack ka tsela e iketsang

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

O ka boela wa hwetša go makatša ka didirišwa tša flexbox go logaganya di-toast ka go rapalala le/goba ka go otlologa.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Phihlelelo

Di- toast di reretšwe go ba ditšhitišo tše dinyenyane go baeti ba gago goba badiriši, ka gona bakeng sa go thuša bao ba nago le dibadi tša skrine le thekinolotši e swanago ya go thuša, o swanetše go phuthela di- toast tša gago aria-liveseleteng . Diphetogo go dilete tše di phelago (go swana le go hlaba/go mpshafatša karolo ya tositi) di tsebišwa ka go iketla ke babadi ba skrine ntle le go nyaka go šuthiša nepo ya modiriši goba ka tsela ye nngwe go šitiša modiriši. Go tlaleletša, akaretša aria-atomic="true"go netefatša gore tositi ka moka e tsebišwa ka mehla bjalo ka yuniti e tee (ya athomo), go e na le go no tsebiša seo se fetotšwego (seo se ka lebišago mathata ge o mpshafatša fela karolo ya diteng tša tositi, goba ge e ba o bontšha diteng tše di swanago tša tositi ka morago ga nako). Ge e le gore tshedimoo ye e nyakegago e bohlokwa go tshepedio, mohlala, go lenaneo la diphoo ka foromong, gona omia karolo ya temosogo e na le tositi.

Hlokomela gore selete se se phelago se swanetše go ba gona ka go swaya pele tositi e tšweletšwa goba e mpshafatšwa. Ge e ba o tšweletša ka go fetoga bobedi bja tšona ka nako e tee gomme wa di tsenya letlakaleng, ka kakaretšo di ka se tsebišwe ke thekinolotši ya go thuša.

Gape o swanetše go fetoša maemo a rolele aria-livego ya ka diteng. Ge e le molaetša wa bohlokwa go swana le phošo, šomiša role="alert" aria-live="assertive", go sego bjalo šomiša role="status" aria-live="polite"dika.

Ge diteng tšeo o di bontšhago di fetoga, kgonthišetša gore o mpshafatša nako ya go delayfela gore badiriši ba be le nako e lekanego ya go bala tositi.

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

Ge o diriša autohide: false, o swanetše go oketša konope ya go tswalela go dumelela badiriši go lahla tositi.

Thobela, lefase! Ye ke molaetša wa tositi.

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

Le ge e le gore ka setegeniki go a kgonega go oketša ditaolo tše di tsepamego/tšeo di ka tšeago kgato (go swana le dikonope tša tlaleletšo goba dikgokagano) ka gare ga tositi ya gago, o swanetše go efoga go dira se bakeng sa ditositi tša go iphihla. Even if you give the toast a long delaytimeout , badiriši ba khiiboto le theknolotši ya go thuša ba ka hwetša go le thata go fihlelela tositi ka nako go tšea kgato (ka ge di-toast di sa amogele tsepamiso ya kgopolo ge di bontšhwa). Ge e ba o tloga o swanetše go ba le ditaolo tše dingwe, re kgothaletša go diriša tositi yeo e nago le autohide: false.

Sass

Diphetogo

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

Tšhomišo

Thoma di-toast ka JavaScript:

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

Dihlohleletši

Go rakwa go ka fihlelelwa ka dataseka godimo ga konope ka gare ga tositi bjalo ka ge go bontšhitšwe ka mo tlase:

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

goba godimo ga konope ka ntle ga tositi o diriša data-bs-targetbjalo ka ge go bontšhitšwe ka mo tlase:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="".

Leina	Mohuta	Hlokomologa	Tlhalošo
`animation`	boolean ya go swana	`true`	Diriša phetogo ya go fifala ya CSS go tositi
`autohide`	boolean ya go swana	`true`	Auto pata tositi
`delay`	nomoro	`5000`	Diega go uta tositi (ms) .

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

bontšha

E senola tositi ya elemente. E boela go mogala pele ga ge tositi e bontšhitšwe e le ka kgonthe (ke gore pele shown.bs.toasttiragalo e direga). O swanetše go bitša mokgwa wo ka seatla, go e na le moo tositi ya gago e ka se bontšhe.

toast.show()

fihla

Pata tositi ya elemente. E boela go mogala pele ga ge tositi e tloga e utilwe (ke gore pele ga ge hidden.bs.toasttiragalo e direga). O swanetše go bitša mokgwa wo ka seatla ge o dirile autohidego false.

toast.hide()

lahla

Pata tositi ya elemente. Toast ya gago e tla dula e le godimo ga DOM eupša e ka se sa bontšha.

toast.dispose()

hwetšaMohlala

Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa tositi wo o amanago le elemente ya DOM

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

hwetšaGobaHlamaMohlala

Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa tositi wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa

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

Ditiragalo

Mohuta wa tiragalo	Tlhalošo
`show.bs.toast`	Tiragalo ye e thunya ka pela ge `show`mokgwa wa mohlala o bitšwa.
`shown.bs.toast`	Tiragalo ye e thuntšhwa ge tositi e dirilwe gore e bonagale go modiriši.
`hide.bs.toast`	Tiragalo ye e thuntšhwa ka pela ge `hide`mokgwa wa mohlala o biditšwe.
`hidden.bs.toast`	Tiragalo ye e thuntšhwa ge tositi e feditše go utollwa go modiriši.

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