Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

Li-toast

Tsoela pele ho tsebiso ho baeti ba hau ka toast, molaetsa oa tlhokomeliso o bobebe ebile o ka o etsa habonolo.

Leqepheng lena

Li-toasts ke litsebiso tse bobebe tse etselitsoeng ho etsisa litsebiso tsa push tse 'nileng tsa tuma ke lits'ebetso tsa mobile le tsa desktop. Li hahiloe ka flexbox, kahoo li bonolo ho ikamahanya le maemo.

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea toast:

  • Li-toast li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
  • Li-toast li tla ipata haeba u sa hlakise autohide: false.
Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Mehlala

Motheo

Ho khothaletsa li-toast tse atolositsoeng le tse ka lebelloang, re khothaletsa hlooho le 'mele. Lihlooho tsa toast li sebelisa display: flex, li lumella ho hlophisoa habonolo ha litaba ka lebaka la lisebelisoa tsa rona tsa margin le flexbox.

Li-toast li tenyetseha ka moo u hlokang 'me li na le li-markup tse nyane haholo tse hlokahalang. Bonyane, re hloka ntho e le 'ngoe ho kenyelletsa litaba tsa hau tse "tosted" le ho khothaletsa ka matla konopo ea ho lahla.

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

Phela

Tobetsa konopo e ka tlase ho bontša toast (e behiloe le lisebelisoa tsa rona k'honeng e ka tlase ho le letona) e patiloeng ka ho sa feleng ka .hide.

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

Translucent

Li-toast li fetotsoe hanyane hore li kopane le tse ka tlase ho tsona.

<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

U ka bokella li-toast ka ho li phuthela ka har'a sets'oants'o sa toast, se tla eketsa sebaka sa sebaka.

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

Litaba tse ikhethileng

Iketsetse li-toast tsa hau ka ho tlosa likaroloana, ho li kopanya le lits'ebeletso , kapa ka ho eketsa letšoao la hau. Mona re thehile toast e bonolo ka ho tlosa ea kamehla .toast-header, ho eketsa letšoao la ho pata tloaelo ho tloha Bootstrap Icons , le ho sebelisa lisebelisoa tse ling tsa flexbox ho lokisa sebopeho.

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

Ntle le moo, o ka eketsa li-control le likarolo tse ling ho li-toast.

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

Merero ea mebala

Ha u ikahela mohlala o kaholimo, u ka theha merero e fapaneng ea mebala ea toast ka lisebelisoa tsa rona tsa mebala le bokamorao . Mona re kentse .bg-primaryle .text-whiteho .toast, 'me re kentse .btn-close-whitekonopo ea rona ea ho koala. Bakeng sa moeli o hlakileng, re tlosa moeli oa kamehla ka .border-0.

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

Ho beha

Beha li-toast tse nang le CSS e tloaelehileng kamoo u li hlokang kateng. Ka holimo ho le letona hangata ho sebelisoa bakeng sa litsebiso, joalo ka bohareng ba holimo. Haeba u tla bontša toast e le 'ngoe feela ka nako, beha mekhoa ea ho beha hantle holim'a .toast.

Bootstrap 11 mets e fetileng
Lefatše Lumela! Ona ke molaetsa oa toast. 
<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 litsamaiso tse hlahisang litemoso tse ngata, nahana ka ho sebelisa ntho e phuthelang e le hore li ka phutheha habonolo.

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

U ka boela ua ba majabajaba ka lisebelisoa tsa flexbox ho hokahanya li-toast ka holimo le/kapa ka ho otloloha.

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

Ho fihlella

Li-toast li reretsoe ho ba litšitiso tse nyane ho baeti kapa basebelisi ba hau, kahoo ho thusa ba nang le libali tsa skrine le mahlale a tšoanang a thusang, o lokela ho phuthela li-toast tsa hau aria-livesebakeng se itseng . Liphetoho libakeng tse phelang (joalo ka ho kenya / ho nchafatsa karolo ea toast) li phatlalatsoa ka bo eona ke babali ba skrineng ntle le ho tsamaisa sepheo sa mosebelisi kapa ho sitisa mosebelisi ho seng joalo. Ho phaella moo, kenyelletsa aria-atomic="true"ho netefatsa hore toast eohle e lula e phatlalatsoa e le yuniti e le 'ngoe (athomo), ho e-na le ho phatlalatsa se fetotsoeng (e leng se ka lebisang mathateng ha feela u ka ntlafatsa karolo ea litaba tsa toast, kapa haeba u hlahisa lintho tse tšoanang tsa toast. ha morao ka nako). Haeba lintlha tse hlokahalang li le bohlokoa bakeng sa ts'ebetso, mohlala, bakeng sa lethathamo la liphoso ka foromo, sebelisa karolo ea tlhokomeliso.sebakeng sa toast.

Hlokomela hore sebaka se phelang se hloka ho ba teng ka har'a markup pele toast e hlahisoa kapa e nchafatsoa. Haeba u li hlahisa ka bobeli ka nako e le 'ngoe' me u li kenya leqepheng, hangata li ke ke tsa phatlalatsoa ke mahlale a thusang.

U boetse u hloka ho ikamahanya le maemo rolele aria-liveboemo ho latela litaba. Haeba e le molaetsa oa bohlokoa joalo ka phoso, sebelisa role="alert" aria-live="assertive", ho seng joalo sebelisa role="status" aria-live="polite"litšobotsi.

Ha litaba tseo u li bonts'ang li fetoha, etsa bonnete ba hore u nchafatsa nako ea delaynako e le hore basebelisi ba be le nako e lekaneng ea ho bala toast.

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

Ha o sebelisa autohide: false, o tlameha ho kenya konopo e koalang ho lumella basebelisi ho tlosa toast.

<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 ha ka botekgeniki ho a khonahala ho kenya litaolo tse ka tsepamisoang/tse sebetsang (joalo ka likonopo kapa likhokahano) ho toast ea hau, u lokela ho qoba ho etsa sena bakeng sa ho pata litoast. Esita le haeba o fa toast nako e delaytelele , basebelisi ba keyboard le thekenoloji e thusang ba ka 'na ba thatafalloa ke ho finyella toast ka nako e le hore ba nke khato (kaha li-toast ha li fumane tlhokomelo ha li hlahisoa). Haeba u tlameha ho ba le litaolo tse ling, re khothaletsa ho sebelisa toast e nang le autohide: false.

Sass

Lintho tse fapaneng

$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(0, 0, 0, .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(0, 0, 0, .05);

Tšebeliso

Qala ho toast ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-, joalo ka data-bs-animation="".

Lebitso Mofuta Ea kamehla Tlhaloso
animation boolean true Sebelisa phetoho ea CSS fade ho toast
autohide boolean true Pata toast
delay palo 5000 Ho lieha ho pata toast (ms)

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

bontsha

E hlahisa toast ea element. E khutlela ho ea letselitseng pele toast e bonts'oa (ke hore pele shown.bs.toastketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho, ho fapana le hoo, toast ea hau e ke ke ea hlaha.

toast.show()

pata

E pata toast ea element. E khutlela ho ea letselitseng pele toast e patiloe (ke hore pele hidden.bs.toastketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho haeba u entse autohideho false.

toast.hide()

lahla

E pata toast ea element. Toast ea hau e tla lula ho DOM empa ha e sa tla hlola e hlaha.

toast.dispose()

getInstance

Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa scrollspy o amanang le ntho ea DOM

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

getOrCreateInstance

Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa scrollspy o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa.

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

Liketsahalo

Mofuta oa ketsahalo Tlhaloso
show.bs.toast Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
shown.bs.toast Ketsahalo ena e ts'oaroa ha toast e entsoe hore e bonahale ho mosebelisi.
hide.bs.toast Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
hidden.bs.toast Ketsahalo ena e ts'oaroa ha toast e qeta ho patoa ho mosebelisi. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})