ขนมปังปิ้ง

ส่งการแจ้งเตือนไปยังผู้เยี่ยมชมของคุณด้วยขนมปังปิ้ง ข้อความเตือนที่มีน้ำหนักเบาและปรับแต่งได้ง่าย

ในหน้านี้

ขนมปังปิ้งเป็นการแจ้งเตือนแบบเบาที่ออกแบบมาเพื่อเลียนแบบการแจ้งเตือนแบบพุชที่ระบบปฏิบัติการมือถือและเดสก์ท็อปได้รับความนิยม สร้างด้วย flexbox จึงสามารถจัดตำแหน่งและจัดตำแหน่งได้ง่าย

ภาพรวม

สิ่งที่ต้องรู้เมื่อใช้ปลั๊กอินขนมปังปิ้ง:

ขนมปังปิ้งเป็นตัวเลือกสำหรับเหตุผลด้านประสิทธิภาพ ดังนั้นคุณต้องเริ่มต้นด้วยตนเอง
ขนมปังปิ้งจะซ่อนโดยอัตโนมัติหากคุณไม่autohide: falseระบุ

เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

ตัวอย่าง

ขั้นพื้นฐาน

เพื่อส่งเสริมการปิ้งขนมปังที่ขยายได้และคาดเดาได้ เราขอแนะนำส่วนหัวและส่วนเนื้อหา ส่วนหัวของ Toast ใช้display: flexช่วยให้จัดแนวเนื้อหาได้ง่ายด้วยยูทิลิตี้ margin และ flexbox ของเรา

ขนมปังปิ้งมีความยืดหยุ่นเท่าที่คุณต้องการและมีมาร์กอัปที่จำเป็นเพียงเล็กน้อย อย่างน้อยที่สุด เราต้องการองค์ประกอบเดียวเพื่อให้มีเนื้อหาที่ "ปิ้ง" ของคุณและสนับสนุนอย่างยิ่งให้กดปุ่มปิด

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ก่อนหน้านี้ สคริปต์ของเราได้เพิ่ม .hideคลาสแบบไดนามิกเพื่อซ่อนขนมปังปิ้ง (ด้วย display:noneแทนที่จะเป็นเพียงด้วย opacity:0) ตอนนี้ไม่จำเป็นอีกต่อไป อย่างไรก็ตาม สำหรับความเข้ากันได้แบบย้อนหลัง สคริปต์ของเราจะยังคงสลับคลาส (แม้ว่าจะไม่จำเป็นในทางปฏิบัติ) จนถึงเวอร์ชันหลักถัดไป

ตัวอย่างสด

คลิกปุ่มด้านล่างเพื่อแสดงขนมปังปิ้ง (ตำแหน่งที่มียูทิลิตี้ของเราอยู่ที่มุมล่างขวา) ที่ถูกซ่อนไว้โดยค่าเริ่มต้น

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

เราใช้ JavaScript ต่อไปนี้เพื่อทริกเกอร์การสาธิตขนมปังปิ้งสดของเรา:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

โปร่งแสง

ขนมปังปิ้งโปร่งแสงเล็กน้อยเพื่อให้กลมกลืนกับสิ่งที่อยู่ด้านล่าง

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ซ้อน

คุณสามารถซ้อนขนมปังปิ้งโดยห่อในภาชนะสำหรับปิ้งขนมปัง ซึ่งจะเพิ่มระยะห่างในแนวตั้ง

ดู? แค่นี้เอง

ระวัง ขนมปังปิ้งจะซ้อนกันโดยอัตโนมัติ

html

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

เนื้อหาที่กำหนดเอง

ปรับแต่งขนมปังปิ้งของคุณโดยลบส่วนประกอบย่อย ปรับแต่งด้วยยูทิลิตี้หรือโดยการเพิ่มมาร์กอัปของคุณเอง ที่นี่ เราได้สร้างขนมปังปิ้งที่ง่ายกว่าโดยลบ default .toast-headerออก เพิ่มไอคอนซ่อนแบบกำหนดเองจากไอคอน Bootstrapและใช้ยูทิลิตี้ flexbox บางอย่าง เพื่อปรับเลย์เอาต์

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

คุณยังสามารถเพิ่มการควบคุมและส่วนประกอบเพิ่มเติมให้กับขนมปังปิ้งได้อีกด้วย

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

โทนสี

จากตัวอย่างข้างต้น คุณสามารถสร้างชุดสีขนมปังปิ้งที่แตกต่างกันด้วยยูทิลิตี้สีและพื้นหลัง ของเรา ที่นี่เราได้เพิ่ม.text-bg-primaryไปยัง.toastและจากนั้น เพิ่ม.btn-close-whiteไปยังปุ่มปิดของเรา สำหรับขอบที่คมชัด เราจะลบเส้นขอบเริ่มต้นด้วย.border-0.

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ตำแหน่ง

วางขนมปังปิ้งด้วย CSS ที่กำหนดเองตามที่คุณต้องการ ด้านขวาบนมักใช้สำหรับการแจ้งเตือน เช่นเดียวกับด้านบนตรงกลาง หากคุณจะแสดงขนมปังปิ้งครั้งละหนึ่งรายการ ให้ใส่รูปแบบการวางตำแหน่งบนไฟล์.toast.

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

สำหรับระบบที่สร้างการแจ้งเตือนเพิ่มเติม ให้พิจารณาใช้องค์ประกอบการตัดคำเพื่อให้สามารถสแต็คได้ง่าย

ดู? แค่นี้เอง

ระวัง ขนมปังปิ้งจะซ้อนกันโดยอัตโนมัติ

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

คุณยังสามารถใช้โปรแกรมอรรถประโยชน์ flexbox เพื่อจัดวางขนมปังปิ้งในแนวนอนและ/หรือแนวตั้งได้อีกด้วย

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

การเข้าถึง

ขนมปังปิ้งมีจุดประสงค์เพื่อรบกวนผู้เยี่ยมชมหรือผู้ใช้ของคุณเพียงเล็กน้อย ดังนั้นเพื่อช่วยเหลือผู้ที่มีโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือที่คล้ายคลึงกัน คุณควรห่อขนมปังปิ้งของคุณไว้ในaria-liveภูมิภาค การเปลี่ยนแปลงไปยังภูมิภาคที่ใช้งานจริง (เช่น การฉีด/อัปเดตส่วนประกอบขนมปังปิ้ง) จะได้รับการประกาศโดยอัตโนมัติโดยโปรแกรมอ่านหน้าจอโดยไม่จำเป็นต้องย้ายโฟกัสของผู้ใช้หรือขัดจังหวะผู้ใช้ นอกจากนี้ ให้รวมaria-atomic="true"เพื่อให้แน่ใจว่าขนมปังปิ้งทั้งหมดได้รับการประกาศเป็นหน่วยเดียว (อะตอม) เสมอ แทนที่จะเพียงแค่ประกาศสิ่งที่เปลี่ยนแปลง (ซึ่งอาจนำไปสู่ปัญหาหากคุณอัปเดตเนื้อหาของขนมปังเพียงบางส่วน หรือหากแสดงเนื้อหาขนมปังเดียวกันเดียวกัน ในเวลาต่อมา) หากข้อมูลที่จำเป็นมีความสำคัญต่อกระบวนการ เช่น รายการข้อผิดพลาดในแบบฟอร์ม ให้ใช้องค์ประกอบการแจ้งเตือนแทนขนมปังปิ้ง

โปรดทราบว่าต้องมีพื้นที่ถ่ายทอดสดในมาร์กอัปก่อนที่จะสร้างหรืออัปเดตขนมปัง หากคุณสร้างทั้งสองอย่างพร้อมกันแบบไดนามิกและแทรกลงในเพจ โดยทั่วไปแล้วเทคโนโลยีอำนวยความสะดวกจะไม่ประกาศเทคโนโลยีดังกล่าว

คุณต้องปรับroleและaria-liveระดับขึ้นอยู่กับเนื้อหา หากเป็นข้อความสำคัญ เช่น ข้อผิดพลาด ให้ใช้role="alert" aria-live="assertive"มิฉะนั้น ใช้role="status" aria-live="polite"แอตทริบิวต์

เนื่องจากเนื้อหาที่คุณกำลังแสดงเปลี่ยนแปลง โปรดอัปเดตdelayระยะหมดเวลาเพื่อให้ผู้ใช้มีเวลาเพียงพอในการอ่านข้อความ

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

เมื่อใช้autohide: falseคุณต้องเพิ่มปุ่มปิดเพื่อให้ผู้ใช้ปิดขนมปังปิ้งได้

สวัสดีชาวโลก! นี่คือข้อความอวยพร

html

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

แม้ว่าในทางเทคนิคแล้ว คุณสามารถเพิ่มการควบคุมที่สามารถโฟกัสได้/ดำเนินการได้ (เช่น ปุ่มหรือลิงก์เพิ่มเติม) ในขนมปังปิ้งของคุณ คุณควรหลีกเลี่ยงการทำเช่นนี้เพื่อซ่อนขนมปังปิ้งอัตโนมัติ แม้ว่าคุณจะให้ขนมปังปิ้งเป็นเวลานาน ผู้ใช้delayคีย์บอร์ดและเทคโนโลยีอำนวยความสะดวกอาจพบว่าเป็นการยากที่จะเข้าถึงขนมปังปิ้งในเวลาที่จะดำเนินการ (เนื่องจากขนมปังปิ้งไม่ได้รับการโฟกัสเมื่อแสดง) หากคุณจำเป็นต้องมีการควบคุมเพิ่มเติมจริงๆ เราขอแนะนำให้ใช้ขนมปังปิ้งautohide: falseกับ

CSS

ตัวแปร

เพิ่มใน v5.2.0

ในฐานะที่เป็นส่วนหนึ่งของแนวทางการเปลี่ยนแปลง CSS ของ Bootstrap ขณะนี้ toasts ใช้ตัวแปร CSS ใน.toastเครื่องเพื่อปรับแต่งตามเวลาจริงที่ได้รับการปรับปรุง ค่าสำหรับตัวแปร CSS ถูกกำหนดผ่าน Sass ดังนั้นยังคงรองรับการปรับแต่ง Sass ด้วยเช่นกัน

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

ตัวแปร Sass

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

การใช้งาน

เริ่มต้นขนมปังปิ้งผ่าน JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

ทริกเกอร์

การยกเลิกสามารถทำได้ด้วยdataคุณลักษณะบนปุ่มภายในขนมปังปิ้งดังที่แสดงด้านล่าง:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

หรือบนปุ่มนอกขนมปังโดยใช้ที่data-bs-targetแสดงด้านล่าง:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

ตัวเลือก

เนื่องจากตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript คุณจึงเพิ่มชื่อตัวเลือกต่อท้ายได้ เช่น เดียวdata-bs-กับใน data-bs-animation="{value}"ตรวจสอบให้แน่ใจว่าได้เปลี่ยนประเภทเคสของชื่อตัวเลือกจาก “ camelCase ” เป็น “ kebab-case ” เมื่อส่งตัวเลือกผ่านแอตทริบิวต์ data เช่น ใช้data-bs-custom-class="beautifier"แทนdata-bs-customClass="beautifier".

ใน Bootstrap 5.2.0 ส่วนประกอบทั้งหมดสนับสนุนแอตทริบิวต์ข้อมูลที่สงวนไว้สำหรับทดลองdata-bs-configซึ่งสามารถจัดเก็บการกำหนดค่าส่วนประกอบอย่างง่ายเป็นสตริง JSON เมื่อองค์ประกอบมีdata-bs-config='{"delay":0, "title":123}'และdata-bs-title="456"แอตทริบิวต์ ค่าสุดท้ายtitleจะเป็น456และแอตทริบิวต์ข้อมูลที่แยกจากกันจะแทนที่ค่าที่ให้ไว้data-bs-configใน นอกจากนี้ แอตทริบิวต์ข้อมูลที่มีอยู่ยังสามารถเก็บค่า JSON เช่นdata-bs-delay='{"show":0,"hide":150}'.

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
`animation`	บูลีน	`true`	ใช้ CSS Fade Transition กับขนมปังปิ้ง
`autohide`	บูลีน	`true`	ซ่อนขนมปังปิ้งโดยอัตโนมัติหลังจากการหน่วงเวลา
`delay`	ตัวเลข	`5000`	หน่วงเวลาเป็นมิลลิวินาทีก่อนจะซ่อนขนมปัง

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

วิธี	คำอธิบาย
`dispose`	ซ่อนขนมปังปิ้งขององค์ประกอบ ขนมปังปิ้งของคุณจะยังคงอยู่บน DOM แต่จะไม่แสดงอีกต่อไป
`getInstance`	วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์ของขนมปังปิ้งที่เชื่อมโยงกับองค์ประกอบ DOM ตัวอย่างเช่น: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`ส่งกลับอินสแตนซ์ขนมปังปิ้ง Bootstrap
`getOrCreateInstance`	วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์ toast ที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ ในกรณีที่ไม่ได้เริ่มต้น `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`ส่งคืนอินสแตนซ์ขนมปังปิ้ง Bootstrap
`hide`	ซ่อนขนมปังปิ้งขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ขนมปังปิ้งจะถูกซ่อนจริงๆ (กล่าวคือ ก่อนที่`hidden.bs.toast`เหตุการณ์จะเกิดขึ้น) คุณต้องเรียกวิธีนี้ด้วยตนเองหากคุณ`autohide`ทำ`false`
`isShown`	ส่งกลับบูลีนตามสถานะการมองเห็นของขนมปังปิ้ง
`show`	เผยให้เห็นขนมปังปิ้งขององค์ประกอบ กลับไปยังผู้โทรก่อนที่จะแสดงขนมปังปิ้งจริง (กล่าวคือ ก่อนที่`shown.bs.toast`เหตุการณ์จะเกิดขึ้น) คุณต้องเรียกวิธีนี้ด้วยตนเอง แทนขนมปังของคุณจะไม่แสดง

เหตุการณ์

เหตุการณ์	คำอธิบาย
`hide.bs.toast`	เหตุการณ์นี้เริ่มทำงานทันทีเมื่อ`hide`มีการเรียกเมธอดของอินสแตนซ์
`hidden.bs.toast`	เหตุการณ์นี้เริ่มทำงานเมื่อขนมปังปิ้งถูกซ่อนจากผู้ใช้เสร็จแล้ว
`show.bs.toast`	เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมี`show`การเรียกเมธอดของอินสแตนซ์
`shown.bs.toast`	เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นขนมปังปิ้ง

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})