Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

Tostlar

Hafif ve kolayca özelleştirilebilir bir uyarı mesajı olan bir tost ile ziyaretçilerinize bildirimler gönderin.

Bu sayfada

Tostlar, mobil ve masaüstü işletim sistemleri tarafından popüler hale getirilen push bildirimlerini taklit etmek için tasarlanmış hafif bildirimlerdir. Flexbox ile üretildikleri için hizalanması ve konumlandırılması kolaydır.

genel bakış

Tost eklentisini kullanırken bilmeniz gerekenler:

  • Tostlar performans nedenleriyle isteğe bağlıdır, bu nedenle bunları kendiniz başlatmanız gerekir .
  • Belirtmezseniz tostlar otomatik olarak gizlenecektir autohide: false.
Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Örnekler

Temel

Genişletilebilir ve öngörülebilir tostları teşvik etmek için bir başlık ve gövde öneriyoruz. Tost başlıkları display: flex, kenar boşluğu ve esnek kutu yardımcı programlarımız sayesinde içeriğin kolayca hizalanmasını sağlar.

Tostlar ihtiyaç duyduğunuz kadar esnektir ve çok az işaretlemeye sahiptir. En azından, "kızartılmış" içeriğinizi içermesi için tek bir öğeye ihtiyacımız var ve bir kapatma düğmesini şiddetle tavsiye ediyoruz.

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>
.hideÖnceden, komut dosyalarımız bir tostu tamamen gizlemek için sınıfı dinamik olarak ekledi ( display:nonesadece ile değil, ile opacity:0). Bu artık gerekli değil. Bununla birlikte, geriye dönük uyumluluk için, betiğimiz bir sonraki ana sürüme kadar sınıfı değiştirmeye (pratik bir ihtiyaç olmasa da) devam edecektir.

Canlı örnek

Varsayılan olarak gizlenmiş bir tostu (sağ alt köşede yardımcı programlarımızla birlikte konumlandırılmış) göstermek için aşağıdaki düğmeyi tıklayın.

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

Canlı tost demomuzu tetiklemek için aşağıdaki JavaScript'i kullanıyoruz:

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

    toast.show()
  })
}

yarı saydam

Tostlar, altındakilerle uyum sağlamak için biraz yarı saydamdır.

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>

İstifleme

Tostları dikey olarak biraz boşluk bırakacak bir tost kabına sararak istifleyebilirsiniz.

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>

Özel içerik

Alt bileşenleri kaldırarak, yardımcı programlarla ince ayar yaparak veya kendi işaretlemenizi ekleyerek tostlarınızı özelleştirin. Burada, varsayılanı kaldırarak, Bootstrap Icons'tan.toast-header özel bir gizleme simgesi ekleyerek ve düzeni ayarlamak için bazı esnek kutu yardımcı programlarını kullanarak daha basit bir tost oluşturduk.

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>

Alternatif olarak, tostlara ek kontroller ve bileşenler de ekleyebilirsiniz.

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>

Renk şemaları

Yukarıdaki örneği temel alarak, renk ve arka plan yardımcı programlarımızla farklı tost renk şemaları oluşturabilirsiniz. Buraya ekledik .text-bg-primaryve .toastardından .btn-close-whitekapat düğmemize ekledik. Keskin bir kenar için, varsayılan kenarlığı .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>

Atama

Tostları ihtiyaç duyduğunuz şekilde özel CSS ile yerleştirin. Sağ üst kısım, orta üst kısım gibi genellikle bildirimler için kullanılır. Bir seferde yalnızca bir tost gösterecekseniz, konumlandırma stillerini doğrudan .toast.

Önyükleme 11 dakika önce
Selam Dünya! Bu bir tost mesajıdır.
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>

Daha fazla bildirim oluşturan sistemlerde, kolayca istiflenebilmeleri için bir sarma öğesi kullanmayı düşünün.

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>

Tostları yatay ve/veya dikey olarak hizalamak için flexbox yardımcı programlarıyla da şık olabilirsiniz.

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>

Ulaşılabilirlik

Tostlar, ziyaretçileriniz veya kullanıcılarınız için küçük kesintiler olması için tasarlanmıştır, bu nedenle ekran okuyucu ve benzeri yardımcı teknolojilere sahip olanlara yardımcı olmak için tostlarınızı bir aria-livebölgeye sarmalısınız . Canlı bölgelerde yapılan değişiklikler (bir tost bileşenini enjekte etmek/güncellemek gibi), kullanıcının odağını değiştirmeye veya kullanıcının başka bir şekilde kesintiye uğramasına gerek kalmadan ekran okuyucular tarafından otomatik olarak duyurulur. Ek olarak, aria-atomic="true"yalnızca neyin değiştirildiğini duyurmak yerine (bu, tost içeriğinin yalnızca bir kısmını güncellerseniz veya aynı tost içeriğini görüntülerseniz sorunlara yol açabilir) yerine, tüm bildirimin her zaman tek bir (atomik) birim olarak duyurulmasını sağlayın. daha sonraki bir zamanda). Gerekli bilgiler süreç için önemliyse, örneğin bir formdaki hataların listesi için, o zaman uyarı bileşenini kullanın.tost yerine.

Tost oluşturulmadan veya güncellenmeden önce canlı bölgenin işaretlemede bulunması gerektiğini unutmayın . Her ikisini de aynı anda dinamik olarak oluşturur ve sayfaya eklerseniz, genellikle yardımcı teknolojiler tarafından duyurulmazlar.

Ayrıca içeriğe bağlı olarak roleve seviyeyi uyarlamanız gerekir. aria-liveHata gibi önemli bir mesajsa, öğesini kullanın role="alert" aria-live="assertive", aksi takdirde role="status" aria-live="polite"öznitelikleri kullanın.

Görüntülediğiniz içerik değiştikçe, kullanıcıların mesajı okumak için yeterli zamana sahip olmaları için delayzaman aşımını güncellediğinizden emin olun.

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

Kullanırken autohide: false, kullanıcıların tostu kapatmasına izin vermek için bir kapat düğmesi eklemelisiniz.

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>

Teknik olarak, tostunuza odaklanabilir/işlem yapılabilir kontroller (ek düğmeler veya bağlantılar gibi) eklemek mümkün olsa da, bunu otomatik gizlemek için yapmaktan kaçınmalısınız. Tost'a uzun bir delayzaman aşımı süresi verseniz bile , klavye ve yardımcı teknoloji kullanıcıları, harekete geçmek için tost'a zamanında ulaşmayı zor bulabilir (çünkü tostlar görüntülendiğinde odak almazlar). Kesinlikle daha fazla kontrole sahip olmanız gerekiyorsa, ile bir tost kullanmanızı öneririz autohide: false.

CSS

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, tost'lar artık .toastgelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

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

Sas değişkenleri

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

kullanım

Tostları JavaScript ile başlat:

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

tetikleyiciler

Görevden alma, aşağıda gösterildiği gibi tost içindekidata bir düğmedeki öznitelikle gerçekleştirilebilir :

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

veya aşağıda gösterildiği gibi kullanarak tost dışındaki bir düğme üzerinde data-bs-target:

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

Seçenekler

Seçenekler veri öznitelikleri veya JavaScript aracılığıyla iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

İsim Tip Varsayılan Tanım
animation boole true Tost'a bir CSS solma geçişi uygulayın.
autohide boole true Gecikmeden sonra tostu otomatik olarak gizleyin.
delay sayı 5000 Tostu saklamadan önce milisaniye cinsinden gecikme.

yöntemler

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

Daha fazla bilgi için JavaScript belgelerimize bakın .

Yöntem Tanım
dispose Bir elementin tostunu gizler. Tostunuz DOM'da kalacak ancak artık gösterilmeyecek.
getInstance Bir DOM öğesiyle ilişkili tost örneğini almanızı sağlayan statik yöntem.
Örneğin: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Bir Bootstrap tost örneği döndürür.
getOrCreateInstance Bir DOM öğesiyle ilişkili tost örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza izin veren statik yöntem.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Bir Bootstrap tost örneği döndürür.
hide Bir elementin tostunu gizler. Tost gerçekten gizlenmeden (yani hidden.bs.toastolay meydana gelmeden önce) arayana geri döner. Eğer yaptıysanız, bu yöntemi manuel olarak çağırmanız autohidegerekir false.
isShown Tost'un görünürlük durumuna göre bir boole döndürür.
show Bir elementin tostunu ortaya çıkarır. Tost gerçekten gösterilmeden önce (yani shown.bs.toastolay meydana gelmeden önce) arayana döner. Bu yöntemi manuel olarak çağırmanız gerekir, bunun yerine tostunuz gösterilmez.

Olaylar

Etkinlik Tanım
hide.bs.toast hideBu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
hidden.bs.toast Bu olay, tost kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir.
show.bs.toast Bu olay, showörnek yöntemi çağrıldığında hemen tetiklenir.
shown.bs.toast Bu olay, tost kullanıcıya görünür hale getirildiğinde tetiklenir. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})