Luncat ka eusi utama Luncat ka navigasi docs
Check
in English

Roti bakar

Push bewara ka sémah anjeun kalayan roti bakar, pesen waspada anu hampang sareng gampang disesuaikan.

Dina kaca ieu

Toasts mangrupikeun béwara hampang anu dirancang pikeun niru béwara push anu parantos dipopulerkeun ku sistem operasi mobile sareng desktop. Aranjeunna nuju diwangun ku flexbox, ngarah geus gampang pikeun align sarta posisi.

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin roti bakar:

  • Toasts dipilih pikeun alesan kinerja, jadi Anjeun kudu initialize aranjeunna sorangan .
  • Roti bakar bakal otomatis nyumput upami anjeun henteu netepkeun autohide: false.
Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Contona

Dasar

Pikeun ajak toasts extensible tur bisa diprediksi, kami nyarankeun lulugu jeung awak. Panggunaan header roti bakar display: flex, ngamungkinkeun alignment gampang eusi berkat margin sareng flexbox utiliti kami.

Toasts téh sakumaha fléksibel sakumaha nu peryogi tur mibanda pisan saeutik markup diperlukeun. Sahenteuna, urang merlukeun hiji unsur ngandung eusi "toasted" anjeun sarta niatna ajak hiji tombol ngilangkeun.

html 
<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>
Saméméhna, Aksara kami dinamis ditambahkeun .hidekelas pikeun sakabéhna nyumputkeun roti bakar a (kalawan display:none, tinimbang ngan kalawan opacity:0). Ieu ayeuna teu perlu deui. Tapi, pikeun kasaluyuan mundur, naskah urang bakal terus togél kelas (sanajan teu aya kabutuhan praktis pikeun eta) nepi ka versi utama salajengna.

Hirup conto

Pencét tombol di handap pikeun nunjukkeun roti bakar (diposisikan sareng utilitas kami di pojok katuhu handap) anu disumputkeun sacara standar.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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>

Kami nganggo JavaScript di handap ieu pikeun memicu demo roti bakar langsung kami:

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

    toast.show()
  })
}

Tembus cahaya

Roti bakar rada tembus pikeun nyampur sareng anu aya di handapna.

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

Numpuk

Anjeun tiasa tumpukan roti bakar ku mungkus aranjeunna dina wadah roti bakar, anu sacara vertikal bakal nambihan sababaraha jarak.

html 
<div class="toast-container position-static">
  <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>

eusi custom

Sesuaikeun roti bakar anjeun ku ngaleungitkeun sub-komponén, tweaking sareng utilitas , atanapi ku nambihan markup anjeun nyalira. Di dieu kami geus nyieun roti bakar basajan ku nyoplokkeun standar .toast-header, nambahkeun ikon sumputkeun custom ti Ikon Bootstrap , sarta ngagunakeun sababaraha utiliti flexbox pikeun nyaluyukeun tata perenah.

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

Alternatipna, anjeun ogé tiasa nambihan kadali tambahan sareng komponén kana roti bakar.

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

Skéma warna

Ngawangun conto di luhur, anjeun tiasa nyiptakeun skéma warna roti bakar anu béda-béda nganggo warna sareng utilitas latar urang. Di dieu kami geus ditambahkeun .text-bg-primarykana .toast, lajeng ditambahkeun .btn-close-whitekana tombol nutup kami. Pikeun tepi garing, urang nyabut wates standar kalawan .border-0.

html 
<div class="toast align-items-center text-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>

panempatan

Tempat roti bakar sareng CSS khusus nalika anjeun peryogikeun. Katuhu luhur sering dianggo pikeun béwara, sapertos tengah luhur. Upami anjeun ngan ukur bakal nunjukkeun hiji roti bakar dina hiji waktos, pasang gaya posisi langsung dina .toast.

Bootstrap 11 mnt katukang
Halo Dunya! Ieu pesen roti bakar.
html 
<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 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>

Pikeun sistem anu ngahasilkeun langkung seueur bewara, pertimbangkeun ngagunakeun unsur bungkus supados gampang tumpukan.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

Anjeun oge bisa meunang fancy kalawan utiliti flexbox pikeun align toasts horisontal jeung / atawa vertikal.

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

Aksesibilitas

Roti bakar dimaksudkeun pikeun ngaganggu leutik pikeun sémah atanapi pangguna anjeun, janten pikeun ngabantosan pamiarsa layar sareng téknologi pitulung anu sami, anjeun kedah ngabungkus roti bakar anjeun di aria-livedaérah . Parobihan kana daérah hirup (sapertos nyuntik/ngamutahirkeun komponén roti bakar) sacara otomatis diumumkeun ku pamiarsa layar tanpa kedah ngalihkeun fokus pangguna atanapi upami henteu ngaganggu pangguna. Sajaba, kaasup aria-atomic="true"pikeun mastikeun yén sakabéh roti bakar salawasna diumumkeun salaku unit tunggal (atom), tinimbang ngan ngumumkeun naon robah (anu bisa ngakibatkeun masalah mun anjeun ngan ngamutahirkeun bagian tina eusi roti bakar urang, atawa lamun mintonkeun eusi roti bakar sarua. dina waktos engké). Upami inpormasi anu diperyogikeun penting pikeun prosés, contona pikeun daptar kasalahan dina bentuk, teras nganggo komponén waspadatinimbang roti bakar.

Catet yén daérah langsung kedah aya dina markup sateuacan roti bakar didamel atanapi diropéa. Upami anjeun sacara dinamis ngahasilkeun duanana dina waktos anu sami sareng nyuntikkeun kana halaman, aranjeunna umumna moal diumumkeun ku téknologi anu ngabantosan.

Anjeun oge kudu adaptasi rolejeung aria-livetingkat gumantung kana eusi. Upami éta pesen penting sapertos kasalahan, paké role="alert" aria-live="assertive", upami henteu nganggo role="status" aria-live="polite"atribut.

Nalika eusi anu anjeun tampilkeun robih, pastikeun pikeun ngapdet waktos delaybéakna supados pangguna gaduh waktos cekap pikeun maca roti bakar.

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

Lamun make autohide: false, Anjeun kudu nambahkeun hiji tombol nutup pikeun ngidinan pamaké pikeun ngilangkeun roti bakar.

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

Sanaos sacara téknis tiasa nambihan kadali anu tiasa difokuskeun / tiasa dilampahkeun (sapertos tombol tambahan atanapi tautan) dina roti bakar anjeun, anjeun kedah ngahindarkeun ieu pikeun nyumputkeun roti bakar otomatis. Sanaos anjeun masihan roti bakar waktos delayseep panjang , keyboard sareng pangguna téknologi asistip tiasa sesah ngahontal roti bakar dina waktosna nyandak tindakan (sabab roti bakar henteu nampi fokus nalika ditampilkeun). Upami anjeun leres-leres kedah gaduh kadali salajengna, kami nyarankeun ngagunakeun roti bakar sareng autohide: false.

CSS

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, roti bakar ayeuna nganggo variabel CSS lokal .toastpikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

variabel Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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);

Pamakéan

Initialize toasts via JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Pemicu

PHK tiasa dihontal ku dataatribut dina tombol dina roti bakar sapertos anu dipidangkeun di handap ieu:

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

atawa dina tombol di luar roti bakar ngagunakeun data-bs-targetsakumaha ditémbongkeun di handap ieu:

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

Pilihan

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Ngaran Tipe Default Katerangan
animation boolean true Larapkeun transisi luntur CSS kana roti bakar.
autohide boolean true Otomatis nyumputkeun roti bakar sanggeus reureuh.
delay angka 5000 Tunda dina milidetik sateuacan nyumputkeun roti bakar.

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

Métode Katerangan
dispose Nyumputkeun roti bakar unsur. Roti bakar anjeun bakal tetep aya dina DOM tapi moal ditingalikeun deui.
getInstance Metodeu statis anu ngamungkinkeun anjeun kéngingkeun conto roti bakar anu aya hubunganana sareng unsur DOM.
Contona: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ngabalikeun conto roti bakar Bootstrap.
getOrCreateInstance Métode statik anu ngamungkinkeun anjeun kéngingkeun conto roti bakar anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal, upami éta henteu diinisialisasi.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ngabalikeun conto roti bakar Bootstrap.
hide Nyumputkeun roti bakar unsur. Mulih ka panelepon saméméh roti bakar sabenerna geus disumputkeun (ie saméméh hidden.bs.toastacara lumangsung). Anjeun kedah nyauran metode ieu sacara manual upami anjeun autohidedamel false.
isShown Ngabalikeun boolean numutkeun kaayaan visibilitas roti bakar.
show Nembongkeun roti bakar unsur. Mulih ka nu nelepon saméméh roti bakar sabenerna geus ditémbongkeun (ie saméméh shown.bs.toastacara lumangsung). Anjeun kedah nyauran metode ieu sacara manual, tibatan roti bakar anjeun moal ditingalikeun.

Kajadian

Acara Katerangan
hide.bs.toast Kajadian ieu langsung dipecat nalika hidemetode conto parantos disebut.
hidden.bs.toast Kajadian ieu dipecat nalika roti bakar parantos disumputkeun tina pangguna.
show.bs.toast Kajadian ieu langsung hurung nalika showmetode conto disebut.
shown.bs.toast Acara ieu dipecat nalika roti bakar parantos katingali ku pangguna. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})