Bootstrap 4 ขนมปังปิ้ง
Bootstrap 4 ขนมปังปิ้ง
ส่วนประกอบ toast เป็นเหมือนกล่องแจ้งเตือนที่แสดงเพียงไม่กี่วินาทีเมื่อมีบางอย่างเกิดขึ้น (เช่น เมื่อผู้ใช้คลิกที่ปุ่ม ส่งแบบฟอร์ม เป็นต้น)
วิธีการทำขนมปังปิ้ง
ในการสร้างขนมปังปิ้ง ให้ใช้.toastคลาส และเพิ่ม a .toast-headerและ a
.toast-bodyภายใน:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
หมายเหตุ:ต้องเริ่มต้น Toasts ด้วย jQuery: เลือกองค์ประกอบที่ระบุและเรียกใช้toast()เมธอด
รหัสต่อไปนี้จะแสดง "ขนมปังปิ้ง" ทั้งหมดในเอกสาร:
ตัวอย่าง
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
แสดงและซ่อนขนมปังปิ้ง
ขนมปังปิ้งถูกซ่อนไว้โดยค่าเริ่มต้น ใช้data-autohide="false"
แอตทริบิวต์เพื่อแสดงโดยค่าเริ่มต้น หากต้องการปิด ใช้ <button> องค์ประกอบและเพิ่มdata-dismiss="toast":
ตัวอย่าง
<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-2และmb-1ชั้นเรียน ? ใช้เพื่อเพิ่มระยะขอบเฉพาะ คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับพวกเขาในบทBootstrap 4 Utilities
อ้างอิง Bootstrap Toast ที่สมบูรณ์
สำหรับข้อมูลอ้างอิงที่สมบูรณ์ของตัวเลือกขนมปัง วิธีการและเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Toast Referenceของเรา