Toast wa Bootstrap 5

Toast（吐司）

Toast 组件类似警告框，当发生某些事情时（例如当用户单击按钮、提交表单等）时，它只会显示几秒钟。

Kannun kewayon Toast

Domin kafa Toast, ka amfani da .toast duba. domin yin kafa Toast, ka amfani da .toast-header da .toast-body.

Rarraba:Dukkacin yau, Toast ne da a fi ɗaukar rashin haɗin kai. domin yin ɗaukar sa, ka amfani da .show duba. domin yin ɗaukar rashin haɗin kai, ka amfani da <button> da kuma kara da data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Tsari na Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Tsammanan text a cikin Toast
  </div>
</div>

Gyara a yawancin

Kafa Toast

Domin yin amfani da Toast ta kan naɗa, ka tabbatar da yin fara sa a kan JavaScript: ka wakilci kiyace da a cikin sa, kuma calla da yin amfani da toast() Method.

Kai a naɗa wani bata a cikin nau'in bata, a cikin kiyace da a cikin nau'in bata za a ɗauki a cikin wani toast:

Shafin

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  )
  toastList.forEach(toast => toast.show())
}
</script>

Gyara a yawancin