బూట్స్ట్రాప్ 5 టోస్ట్

Toast (తుస్తుకు)

Toast కమ్యూనిక్ అనేది వార్నింగ్ బాక్స్ లాంటిది, కొన్ని సంఘటనలు జరగాలిగానే (ఉదాహరణకు, వినియోగదారుడు బటన్ నొక్కినప్పుడు, ఫారమ్ సబ్మిట్ చేసినప్పుడు) అది కొన్ని సెకన్లు మాత్రమే ప్రదర్శిస్తుంది.

టోస్ట్ సృష్టించడానికి ఎలా?

టోస్ట్ సృష్టించడానికి, ఉపయోగించండి .toast క్లాస్ లను జోడించి, అందులో జోడించండి .toast-header మరియు .toast-body.

గమనికడిఫాల్ట్ లో, టోస్ట్ మరియుండవి మరియు చూపించడానికి ఉపయోగించండి .show క్లాస్. దానిని మూసివేయడానికి, <button> ముద్రను ఉపయోగించి ఈ అనువందనను జోడించండి data-bs-dismiss="toast"అని

<div class="toast show">
  <div class="toast-header">
    టోస్ట్ శీర్షిక
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    టోస్ట్ ప్రధాన పాఠం
  </div>
</div>

స్వయంగా ప్రయత్నించండి

టోస్ట్ తెరవండి

బటన్ ద్వారా Toast ను చూపించడానికి, మీరు జావాస్క్రిప్ట్ ద్వారా దానిని ప్రారంభించవలసివుంది: ప్రస్తావించిన ఎల్లా ముద్రలను ఎంచుకొని కాల్ చేయండి toast() పద్ధతులు.

మీరు బటన్ ను నొక్కినప్పుడు, ఈ కోడ్ డాక్యుమెంట్ లోని అన్ని toast ను చూపిస్తుంది:

ప్రతిమాత్రం

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

స్వయంగా ప్రయత్నించండి