โดย abdkode » 08/01/2019 5:32 pm
Toast(โทซท) เป็น Popup หรือ alert ที่จะแจ้งเตือนข้อความบนหน้าจอที่เราใช้งานอยู่ ซึ่งมันสามารถหายไปโดยอัตโนมัติ
ตัวอย่างการเขียน Toast ใน bootstrap4
โค้ด: เลือกทั้งหมด
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
เราสามารถเรียกใช้งาน โดยใช้ javascript ได้ดังนี้
ข้อมูลเพิ่มเติมเกี่ยวกับ
Toast ใน bootstrap4
Toast(โทซท) เป็น Popup หรือ alert ที่จะแจ้งเตือนข้อความบนหน้าจอที่เราใช้งานอยู่ ซึ่งมันสามารถหายไปโดยอัตโนมัติ
ตัวอย่างการเขียน Toast ใน bootstrap4
[img]https://uppic.cc/d/KPYi[/img]
[code]<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>[/code]
เราสามารถเรียกใช้งาน โดยใช้ javascript ได้ดังนี้
[code]$('.toast').toast('show') [/code]
ข้อมูลเพิ่มเติมเกี่ยวกับ [url=https://getbootstrap.com/docs/4.2/components/toasts/]Toast ใน bootstrap4[/url]