Roti bakar

Tolak pemberitahuan kepada pelawat anda dengan roti bakar, mesej amaran yang ringan dan mudah disesuaikan.

Pada halaman ini

Toast ialah pemberitahuan ringan yang direka bentuk untuk meniru pemberitahuan tolak yang telah dipopularkan oleh sistem pengendalian mudah alih dan desktop. Ia dibina dengan flexbox, jadi ia mudah untuk diselaraskan dan diletakkan.

Gambaran keseluruhan

Perkara yang perlu diketahui apabila menggunakan pemalam toast:

Roti bakar adalah ikut serta atas sebab prestasi, jadi anda mesti memulakannya sendiri .
Roti bakar akan bersembunyi secara automatik jika anda tidak menyatakan autohide: false.

Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

Contoh

asas

Untuk menggalakkan roti bakar yang boleh dipanjangkan dan boleh diramal, kami mengesyorkan pengepala dan badan. Pengepala roti bakar menggunakan display: flex, membolehkan penjajaran kandungan yang mudah berkat utiliti margin dan flexbox kami.

Roti bakar adalah fleksibel seperti yang anda perlukan dan mempunyai sedikit penanda yang diperlukan. Sekurang-kurangnya, kami memerlukan satu elemen untuk mengandungi kandungan "panggang" anda dan amat menggalakkan butang tolak.

Hai dunia! Ini adalah mesej roti bakar.

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>

Sebelum ini, skrip kami menambahkan .hidekelas secara dinamik untuk menyembunyikan roti bakar sepenuhnya (dengan display:none, bukannya hanya dengan opacity:0). Ini kini tidak perlu lagi. Walau bagaimanapun, untuk keserasian ke belakang, skrip kami akan terus menogol kelas (walaupun tidak ada keperluan praktikal untuknya) sehingga versi utama seterusnya.

Contoh langsung

Klik butang di bawah untuk menunjukkan roti bakar (diletakkan dengan utiliti kami di penjuru kanan sebelah bawah) yang telah disembunyikan secara lalai.

Hello, world! This is a toast message.

<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 menggunakan JavaScript berikut untuk mencetuskan 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()
  })
}

Lutsinar

Roti bakar sedikit lut sinar untuk sebati dengan apa yang ada di bawahnya.

Hai dunia! Ini adalah mesej roti bakar.

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>

Menyusun

Anda boleh menyusun roti bakar dengan membungkusnya dalam bekas roti bakar, yang akan menambah beberapa jarak secara menegak.

Nampak? Hanya seperti ini.

Makluman, roti bakar akan disusun secara automatik

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>

Kandungan tersuai

Sesuaikan roti bakar anda dengan mengalih keluar subkomponen, mengubahnya dengan utiliti atau dengan menambah penanda anda sendiri. Di sini kami telah mencipta roti bakar yang lebih ringkas dengan mengalih keluar lalai .toast-header, menambahkan ikon sorok tersuai daripada Ikon Bootstrap dan menggunakan beberapa utiliti flexbox untuk melaraskan reka letak.

Hai dunia! Ini adalah mesej roti bakar.

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>

Sebagai alternatif, anda juga boleh menambah kawalan dan komponen tambahan pada roti bakar.

Hai dunia! Ini adalah mesej 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>

Skim warna

Berdasarkan contoh di atas, anda boleh mencipta skema warna roti bakar yang berbeza dengan utiliti warna dan latar belakang kami. Di sini kami telah menambah .text-bg-primarypada .toast, dan kemudian menambah .btn-close-whitepada butang tutup kami. Untuk kelebihan yang tajam, kami mengalih keluar sempadan lalai dengan .border-0.

Hai dunia! Ini adalah mesej roti bakar.

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>

Penempatan

Letakkan roti bakar dengan CSS tersuai mengikut keperluan anda. Bahagian atas sebelah kanan sering digunakan untuk pemberitahuan, begitu juga bahagian tengah atas. Jika anda hanya akan menunjukkan satu roti bakar pada satu masa, letakkan gaya kedudukan tepat pada .toast.

Hai dunia! Ini adalah mesej 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>

Untuk sistem yang menjana lebih banyak pemberitahuan, pertimbangkan untuk menggunakan elemen pembalut supaya ia boleh disusun dengan mudah.

Nampak? Hanya seperti ini.

Makluman, roti bakar akan disusun secara automatik

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>

Anda juga boleh berseronok dengan utiliti flexbox untuk menyelaraskan roti bakar secara mendatar dan/atau menegak.

Hai dunia! Ini adalah mesej roti bakar.

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>

Kebolehcapaian

Roti bakar bertujuan untuk menjadi gangguan kecil kepada pelawat atau pengguna anda, jadi untuk membantu mereka yang mempunyai pembaca skrin dan teknologi bantuan yang serupa, anda harus membungkus roti bakar anda di aria-liverantau . Perubahan kepada kawasan langsung (seperti menyuntik/mengemas kini komponen roti bakar) diumumkan secara automatik oleh pembaca skrin tanpa perlu mengalihkan fokus pengguna atau mengganggu pengguna. Selain itu, sertakan aria-atomic="true"untuk memastikan bahawa keseluruhan roti bakar sentiasa diumumkan sebagai unit tunggal (atom), dan bukannya hanya mengumumkan perkara yang telah diubah (yang boleh membawa kepada masalah jika anda hanya mengemas kini sebahagian daripada kandungan roti bakar atau jika memaparkan kandungan roti bakar yang sama pada suatu ketika nanti). Jika maklumat yang diperlukan adalah penting untuk proses, cth untuk senarai ralat dalam borang, kemudian gunakan komponen amaranbukannya roti bakar.

Ambil perhatian bahawa rantau langsung perlu ada dalam penanda sebelum roti bakar dijana atau dikemas kini. Jika anda menjana kedua-duanya secara dinamik pada masa yang sama dan menyuntiknya ke dalam halaman, ia biasanya tidak akan diumumkan oleh teknologi bantuan.

Anda juga perlu menyesuaikan roledan aria-livetahap bergantung pada kandungan. Jika ia adalah mesej penting seperti ralat, gunakan role="alert" aria-live="assertive", jika tidak gunakan role="status" aria-live="polite"atribut.

Apabila kandungan yang anda paparkan berubah, pastikan anda mengemas kini delaytamat masa supaya pengguna mempunyai masa yang mencukupi untuk membaca 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>

Apabila menggunakan autohide: false, anda mesti menambah butang tutup untuk membenarkan pengguna mengetepikan roti bakar.

Hai dunia! Ini adalah mesej 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>

Walaupun secara teknikal adalah mungkin untuk menambah kawalan boleh fokus/boleh diambil tindakan (seperti butang atau pautan tambahan) dalam roti bakar anda, anda harus mengelak daripada melakukan ini untuk menyorokkan roti bakar secara automatik. Walaupun anda memberi roti bakar itu delaytamat masa yang lama , papan kekunci dan pengguna teknologi bantuan mungkin mendapati sukar untuk mencapai roti bakar tepat pada masanya untuk mengambil tindakan (memandangkan roti bakar tidak menerima fokus apabila ia dipaparkan). Jika anda benar-benar mesti mempunyai kawalan lanjut, kami mengesyorkan menggunakan roti bakar dengan autohide: false.

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang berkembang, roti bakar kini menggunakan pembolehubah CSS tempatan .toastuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

  --#{$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};

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

Penggunaan

Mulakan roti bakar melalui JavaScript:

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

Pencetus

Pemecatan boleh dicapai dengan dataatribut pada butang dalam roti bakar seperti yang ditunjukkan di bawah:

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

atau pada butang di luar roti bakar menggunakan data-bs-targetseperti yang ditunjukkan di bawah:

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

Pilihan

Memandangkan pilihan boleh dihantar melalui atribut data atau JavaScript, anda boleh menambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="{value}". Pastikan anda menukar jenis kes bagi nama pilihan daripada " camelCase " kepada " kebab-case " apabila menghantar pilihan melalui atribut data. Sebagai contoh, gunakan data-bs-custom-class="beautifier"bukannya data-bs-customClass="beautifier".

Mulai Bootstrap 5.2.0, semua komponen menyokong atribut data simpanan percubaandata-bs-config yang boleh menempatkan konfigurasi komponen ringkas sebagai rentetan JSON. Apabila elemen mempunyai data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang berasingan akan mengatasi nilai yang diberikan pada data-bs-config. Selain itu, atribut data sedia ada dapat menempatkan nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Nama	taip	Lalai	Penerangan
`animation`	boolean	`true`	Gunakan peralihan pudar CSS ke roti bakar.
`autohide`	boolean	`true`	Sembunyikan roti bakar secara automatik selepas kelewatan.
`delay`	nombor	`5000`	Kelewatan dalam milisaat sebelum menyembunyikan roti bakar.

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

Kaedah	Penerangan
`dispose`	Menyembunyikan roti bakar elemen. Roti bakar anda akan kekal di DOM tetapi tidak akan dipaparkan lagi.
`getInstance`	Kaedah statik yang membolehkan anda mendapatkan contoh roti bakar yang dikaitkan dengan elemen DOM. Contohnya: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Mengembalikan contoh roti bakar Bootstrap.
`getOrCreateInstance`	Kaedah statik yang membolehkan anda mendapatkan contoh roti bakar yang dikaitkan dengan elemen DOM, atau mencipta yang baharu, sekiranya ia tidak dimulakan. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Mengembalikan contoh roti bakar Bootstrap.
`hide`	Menyembunyikan roti bakar elemen. Kembali kepada pemanggil sebelum roti bakar sebenarnya disembunyikan (iaitu sebelum `hidden.bs.toast`acara itu berlaku). Anda perlu memanggil kaedah ini secara manual jika anda `autohide`membuat `false`.
`isShown`	Mengembalikan boolean mengikut keadaan keterlihatan roti bakar.
`show`	Mendedahkan roti bakar elemen. Kembali kepada pemanggil sebelum roti bakar sebenarnya telah ditunjukkan (iaitu sebelum `shown.bs.toast`acara itu berlaku). Anda perlu memanggil kaedah ini secara manual, sebaliknya roti bakar anda tidak akan dipaparkan.

Peristiwa

Peristiwa	Penerangan
`hide.bs.toast`	Peristiwa ini dicetuskan serta-merta apabila `hide`kaedah contoh telah dipanggil.
`hidden.bs.toast`	Peristiwa ini dicetuskan apabila roti bakar telah selesai disembunyikan daripada pengguna.
`show.bs.toast`	Peristiwa ini menyala serta-merta apabila `show`kaedah contoh dipanggil.
`shown.bs.toast`	Peristiwa ini dicetuskan apabila roti bakar telah ditunjukkan kepada pengguna.

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