Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Titositi

Susa switiviso eka vaendzi va wena hi tositi, rungula ra xitsundzuxo leri olovaka ni leri nga cinciwaka hi ku olova.

Eka tluka leri

Ti- toast i switiviso swo olova leswi endleriweke ku tekelela switiviso swo susumeta leswi dumeke hi tisisiteme to tirha ta tiselfoni ni ta le desktop. Ti akiwile hi flexbox, kutani swa olova ku ti ringanisa na ku ti veka.

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa plugin ya toast:

  • Ti- toast i ti-opt-in hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele u ti sungula hi wexe .
  • Ti toast ti ta tifihla hi toxe loko u nga boxi autohide: false.
Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Swikombiso

Ntolovelo

Ku khutaza ti toast leti andlariwaka na leti nga languteriwaka, hi ringanyeta nhloko na miri. Toast headers use display: flex, ku pfumelela ku olova ka ku ringanisa ka swilo leswi nga endzeni hikwalaho ka switirhisiwa swa hina swa margin na flexbox.

Ti toasts ti olova hilaha u lavaka hakona naswona tina markup yitsongo swinene leyi lavekaka. Eka mpimo wa le hansi, hi lava elemente yin’we ku va na nhundzu ya wena leyi “tosiweke” naswona hi khutaza swinene buti yo hlongola.

<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>
Khale, switshuriwa swa hina hi ndlela leyi cinca-cincaka swi engetele .hidetlilasi leswaku swi fihla hi ku helela tositi (hi display:none, ematshan’weni yo endla ntsena hi opacity:0). Leswi sweswi a swa ha laveki. Kambe, eka ku fambisana ka le ndzhaku, tsalwa ra hina ri ta ya emahlweni ri cinca-cinca tlilasi (hambi leswi ku nga riki na xilaveko lexi tirhaka xa rona) ku fikela eka vuhundzuluxeri lebyikulu lebyi landzelaka.

Xikombiso lexi hanyaka

Click button leyi nga laha hansi ku kombisa toast (yi vekiwile na switirhisiwa swa hina ekhonweni ya le hansi ya xinene) leyi fihliweke hi ku tiyimisela.

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

Hi tirhisa JavaScript leyi landzelaka ku pfuxa demo ya hina ya toast leyi hanyaka:

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

    toast.show()
  })
}

Ku vonakala loku vonakaka kahle

Ti toasts tina translucent nyana kuva ti hlangana na leswinga ehansi ka tona.

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

Ku hlanganisiwa ka swilo

U nga ha hlanganisa ti- toast hi ku ti phutsela eka xigwitsirisi xa toast, leswi nga ta engetela ku hambana ko karhi hi ku kongoma.

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

Swilo leswi nga endzeni ka ntolovelo

Endla leswaku ti- toast ta wena ti va leti u ti lavaka hi ku susa swiphemu leswitsongo, u swi tweaking hi switirhisiwa , kumbe hi ku engetela markup ya wena. Laha hi endle toast yo olova hi ku susa default .toast-header, hi engetela xifaniso xa ku fihla xa ntolovelo ku suka eka Bootstrap Icons , na ku tirhisa switirhisiwa swin’wana swa flexbox ku lulamisa layout.

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

Handle ka sweswo, u nga ha tlhela u engetela swilawuri leswi engetelekeke ni swiphemu eka ti- 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>

Swikimi swa mihlovo

Hi ku aka eka xikombiso lexi nga laha henhla, u nga endla swikimi swo hambana swa mihlovo ya toast hi switirhisiwa swa hina swa mihlovo na swa le ndzhaku . Laha hi engeterile .bg-primaryna .text-whiteeka .toast, ivi hi engetela .btn-close-whiteeka buti ya hina yo pfala. Ku kuma tlhelo ro tsindziyela, hi susa ndzilakano wa xiviri hi .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>

Ku vekiwa ka swilo

Veka ti toasts hi custom CSS tani hi leswi u swi lavaka. Le henhla exineneni hakanyingi ku tirhisiwa switiviso, ku fana ni le henhla exikarhi. Loko u ta tshama u kombisa tositi yin’we ntsena hi nkarhi, veka switayele swo veka swilo kunene eka .toast.

Xirhendzevutana xa xirhendzevutani 11 mins leyi hundzeke
Xewani, misava! Leri i rungula ra 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>

Eka tisisiteme leti humesaka switiviso swo tala, anakanya hi ku tirhisa elemente yo phutsela leswaku ti ta kota ku hlanganisa hi ku olova.

<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 nga ha tlhela u kuma fancy hi switirhisiwa swa flexbox ku ringanisa ti toasts hi ndlela yo olova na/kumbe hi ndlela yo olova.

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

Ku fikelela

Ti- toast ti endleriwe ku va swilo leswitsongo leswi kavanyetaka vaendzi kumbe vatirhisi va wena, hikwalaho leswaku u pfuna lava nga ni swihlaya-swikirini ni thekinoloji leyi fanaka leyi pfunaka, u fanele u phutsela ti- toast ta wena aria-liveexifundzheni xo karhi . Ku cinca eka swifundzha leswi hanyaka (ku fana na ku chela/pfuxeta xiphemu xa toast) swi tivisiwa hi ku tisungulela hi vahlayi va xikirini handle ko lava ku fambisa nhlokomhaka ya mutirhisi kumbe hi ndlela yin’wana ku kavanyeta mutirhisi. Ku engetela kwalaho, katsa aria-atomic="true"ku tiyisisa leswaku tositi hinkwayo yi tshama yi ri karhi yi tivisiwa tanihi yuniti yin’we (ya athomo), ematshan’weni yo tivisa ntsena leswi cinciweke (leswi nga vangaka swiphiqo loko u pfuxeta ntsena xiphemu xa leswi nga endzeni ka tositi, kumbe loko u kombisa swilo leswi fanaka swa tositi eka nkarhi wa le ndzhaku). Loko mahungu lama lavekaka ya ri ya nkoka eka phurosese, xikombiso eka nxaxamelo wa swihoxo eka fomo, kutani tirhisa xiphemu xa xitsundzuxoematshan’weni ya toast.

Xiya leswaku ndzhawu leyi hanyaka yifanele kuva kona eka markup loko toast yinga se endliwa kumbe ku pfuxetiwa. Loko u tumbuluxa hi ndlela leyi cinca-cincaka havumbirhi bya swona hi nkarhi wun’we ivi u swi nghenisa eka tluka, hi ntolovelo a swi nge tivisiwi hi thekinoloji yo pfuneta.

U fanele ku tlhela u cinca-cinca rolena aria-livelevel ku ya hi leswi nga endzeni. Loko ku ri rungula ra nkoka ku fana na xihoxo, tirhisa role="alert" aria-live="assertive", handle ka sweswo tirhisa role="status" aria-live="polite"swihlawulekisi.

Loko swilo leswi u swi kombisaka swi ri karhi swi cinca, tiyiseka leswaku u pfuxeta nkarhi lowu delayheleke leswaku vatirhisi va va ni nkarhi lowu eneleke wo hlaya 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>

Loko u tirhisa autohide: false, u fanele u engetela buti yo pfala leswaku u pfumelela vatirhisi ku hlongola 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>

Loko hi tlhelo ra xithekiniki swinga koteka ku engetela vulawuri lebyi kongomisaka/leswi nga endliwaka (kufana na ti buttons to engetela kumbe swihlanganisi) eka toast ya wena, ufanele ku papalata ku endla leswi eka ti autohiding toasts. Even if you give the toast a long delaytimeout , vatirhisi va khibhodi ni thekinoloji yo pfuneta va nga ha kuma swi tika ku fikelela toast hi nkarhi leswaku va teka goza (tanihi leswi ti- toast ti nga kumiki ku kongomisa loko ti kombisiwa). Loko hi ku helela u fanele u va ni vulawuri byin’wana, hi ringanyeta ku tirhisa tositi leyi nga ni autohide: false.

Sass

Swilo leswi cinca-cincaka

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

Matirhiselo

Sungula ti- toast hi ku tirhisa JavaScript:

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

Swihlohloteri

Ku hlongoriwa ku nga fikeleriwa hi dataxihlawulekisi eka buti endzeni ka toast tanihilaha swi kombisiweke hakona laha hansi:

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

kumbe eka buti ehandle ka tositi hi ku tirhisa data-bs-targethilaha swi kombisiweke hakona laha hansi:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-animation="".

Vito Muxaka Ku tlula Nhlamuselo
animation xitsonga xitsonga true Tirhisa ku cinca ka CSS fade eka toast
autohide xitsonga xitsonga true Auto tumbeta toast
delay nomboro 5000 Ku hlwela ku tumbeta toast (ms) .

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

kombisa

Ku paluxa toast ya elemente. Ku tlhelela eka mufoyini loko tositi yi nga si kombisiwa hakunene (i.e. loko shown.bs.toastxiendlakalo xi nga si humelela). U fanele ku vitana ndlela leyi hi voko, ematshan’wini ya sweswo toast ya wena a yi nge kombisi.

toast.show()

tumbela

Ku tumbeta toast ya elemente. Ku tlhelela eka mufoyini loko toast yi nga si fihliwa hakunene (i.e. loko hidden.bs.toastxiendlakalo xi nga si humelela). U fanele ku vitana ndlela leyi hi voko loko u endle autohideku false.

toast.hide()

lahla

Ku tumbeta toast ya elemente. Toast ya wena yi ta tshama yi ri eka DOM kambe a yi nge he kombisi.

toast.dispose()

getXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa toast lexi fambelanaka na elemente ya DOM

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

kumaKumbeEndlaXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa toast lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

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

Swiendlakalo

Muxaka wa xiendlakalo Nhlamuselo
show.bs.toast Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
shown.bs.toast Xiendlakalo lexi xi hisiwa loko toast yi endliwile yi vonaka eka mutirhisi.
hide.bs.toast Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya hidexikombiso yi vitaniwile.
hidden.bs.toast Xiendlakalo lexi xi duvuriwa loko tositi yi hetile ku tumbetiwa eka mutirhisi. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})