Önyükleme 4 Tost
Önyükleme 4 Tost
Tost bileşeni, bir şey olduğunda (yani kullanıcı bir düğmeye tıkladığında, bir form gönderdiğinde vb.) yalnızca birkaç saniyeliğine gösterilen bir uyarı kutusu gibidir.
Tost Nasıl Yapılır?
Bir tost oluşturmak için .toastsınıfı kullanın ve içine a .toast-headerve a
ekleyin:.toast-body
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Not: Tostlar jQuery ile başlatılmalıdır: belirtilen öğeyi seçin ve toast()yöntemi çağırın.
Aşağıdaki kod, belgedeki tüm "tostları" gösterecektir:
Örnek
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Bir Tostu Göster ve Gizle
Tostlar varsayılan olarak gizlidir. data-autohide="false"
Varsayılan olarak göstermek için özelliği kullanın . Kapatmak için bir <button> öğesi kullanın ve şunu ekleyin data-dismiss="toast":
Örnek
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
mr-auto, ml-2ve mb-1sınıflarına dikkat edin ? Belirli kenar boşlukları eklemek için kullanılırlar. Bootstrap 4 Utilities Bölümünde onlar hakkında daha fazla bilgi edineceksiniz .
Bootstrap Tost Referansını Tamamlayın
Tüm tost seçenekleri, yöntemleri ve etkinliklerinin eksiksiz bir referansı için Bootstrap JS Toast Referansımıza gidin .