Chúc rượu

Đẩy thông báo tới khách truy cập của bạn bằng lời chúc mừng, một thông báo cảnh báo nhẹ và có thể tùy chỉnh dễ dàng.

Trên trang này

Toast là các thông báo nhẹ được thiết kế để bắt chước các thông báo đẩy đã được phổ biến bởi các hệ điều hành dành cho thiết bị di động và máy tính để bàn. Chúng được chế tạo bằng flexbox, vì vậy chúng dễ dàng căn chỉnh và định vị.

Tổng quan

Những điều cần biết khi sử dụng plugin bánh mì nướng:

Toasts được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng .
Bánh mì nướng sẽ tự động ẩn nếu bạn không chỉ định autohide: false.

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

Các ví dụ

Nền tảng

Để khuyến khích chúc mừng có thể mở rộng và dự đoán được, chúng tôi khuyên bạn nên sử dụng tiêu đề và nội dung. Sử dụng tiêu đề bánh mì nướng display: flex, cho phép dễ dàng căn chỉnh nội dung nhờ các tiện ích margin và flexbox của chúng tôi.

Bánh mì nướng linh hoạt như bạn cần và có rất ít đánh dấu bắt buộc. Ở mức tối thiểu, chúng tôi yêu cầu một phần tử duy nhất chứa nội dung “nướng” của bạn và đặc biệt khuyến khích nút loại bỏ.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Trước đây, các tập lệnh của chúng tôi đã thêm động .hidelớp để ẩn hoàn toàn hình ảnh bánh mì nướng (với display:none, thay vì chỉ với opacity:0). Điều này bây giờ không cần thiết nữa. Tuy nhiên, để tương thích ngược, tập lệnh của chúng tôi sẽ tiếp tục chuyển đổi lớp (mặc dù không có nhu cầu thực tế về nó) cho đến phiên bản chính tiếp theo.

Ví dụ trực tiếp

Nhấp vào nút bên dưới để hiển thị bánh mì nướng (được đặt với các tiện ích của chúng tôi ở góc dưới bên phải) đã bị ẩn theo mặc định.

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>

Chúng tôi sử dụng JavaScript sau để kích hoạt bản demo bánh mì nướng trực tiếp của chúng tôi:

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

    toast.show()
  })
}

Trong mờ

Bánh mì nướng hơi mờ để hòa hợp với những gì bên dưới chúng.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Xếp chồng

Bạn có thể xếp bánh mì nướng bằng cách gói chúng trong hộp đựng bánh mì nướng, điều này sẽ thêm một số khoảng cách theo chiều dọc.

Nhìn thấy? Chỉ như thế này.

Lưu ý, chúc rượu sẽ tự động xếp chồng lên nhau

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>

Nội dung tùy chỉnh

Tùy chỉnh nâng cốc của bạn bằng cách loại bỏ các thành phần phụ, tinh chỉnh chúng bằng các tiện ích hoặc bằng cách thêm đánh dấu của riêng bạn. Ở đây, chúng tôi đã tạo một bánh mì nướng đơn giản hơn bằng cách loại bỏ mặc định .toast-header, thêm biểu tượng ẩn tùy chỉnh từ Biểu tượng Bootstrap và sử dụng một số tiện ích flexbox để điều chỉnh bố cục.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Ngoài ra, bạn cũng có thể thêm các điều khiển và thành phần bổ sung vào bánh mì nướng.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Phối màu

Dựa trên ví dụ trên, bạn có thể tạo các bảng màu bánh mì nướng khác nhau với các tiện ích màu và nền của chúng tôi. Ở đây chúng tôi đã thêm vào .text-bg-primary, .toastvà sau đó thêm vào .btn-close-whitenút đóng của chúng tôi. Để có một cạnh sắc nét, chúng tôi xóa đường viền mặc định với .border-0.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Vị trí

Đặt bánh mì nướng bằng CSS tùy chỉnh khi bạn cần. Trên cùng bên phải thường được sử dụng cho các thông báo, ở giữa trên cùng cũng vậy. Nếu bạn chỉ muốn hiển thị một bánh mì nướng cùng một lúc, hãy đặt các kiểu định vị ngay trên .toast.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Đối với các hệ thống tạo ra nhiều thông báo hơn, hãy cân nhắc sử dụng phần tử gói để chúng có thể dễ dàng xếp chồng lên nhau.

Nhìn thấy? Chỉ như thế này.

Lưu ý, chúc rượu sẽ tự động xếp chồng lên nhau

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>

Bạn cũng có thể trở nên thú vị với các tiện ích flexbox để căn chỉnh bánh mì nướng theo chiều ngang và / hoặc chiều dọc.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Khả năng tiếp cận

Việc nâng cốc nhằm gây gián đoạn nhỏ cho khách truy cập hoặc người dùng của bạn, vì vậy, để giúp những người có trình đọc màn hình và các công nghệ hỗ trợ tương tự, bạn nên nâng cốc của mình trong một aria-livekhu vực . Các thay đổi đối với các vùng trực tiếp (chẳng hạn như chèn / cập nhật thành phần bánh mì nướng) được trình đọc màn hình tự động thông báo mà không cần di chuyển tiêu điểm của người dùng hoặc làm gián đoạn người dùng. Ngoài ra, hãy bao gồm aria-atomic="true"để đảm bảo rằng toàn bộ bánh mì nướng luôn được công bố là một đơn vị (nguyên tử), thay vì chỉ thông báo những gì đã thay đổi (điều này có thể dẫn đến sự cố nếu bạn chỉ cập nhật một phần nội dung của bánh mì nướng hoặc nếu hiển thị cùng một nội dung bánh mì nướng tại một thời điểm sau đó). Nếu thông tin cần thiết là quan trọng đối với quá trình, ví dụ như danh sách các lỗi trong biểu mẫu, thì hãy sử dụng thành phần cảnh báothay vì bánh mì nướng.

Lưu ý rằng khu vực trực tiếp cần phải có trong đánh dấu trước khi hình ảnh bánh mì nướng được tạo hoặc cập nhật. Nếu bạn tạo động cả hai cùng một lúc và đưa chúng vào trang, chúng thường sẽ không được công bố bởi các công nghệ hỗ trợ.

Bạn cũng cần điều chỉnh mức độ rolevà aria-livemức độ tùy thuộc vào nội dung. Nếu đó là một thông báo quan trọng như lỗi, hãy sử dụng role="alert" aria-live="assertive", nếu không, hãy sử dụng role="status" aria-live="polite"các thuộc tính.

Khi nội dung bạn đang hiển thị thay đổi, hãy nhớ cập nhật delaythời gian chờ để người dùng có đủ thời gian đọc thông báo.

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

Khi sử dụng autohide: false, bạn phải thêm một nút đóng để cho phép người dùng bỏ bánh mì nướng.

Chào thế giới! Đây là một tin nhắn nâng ly.

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>

Mặc dù về mặt kỹ thuật, bạn có thể thêm các điều khiển có thể tập trung / có thể hành động (chẳng hạn như các nút hoặc liên kết bổ sung) trong bánh mì nướng của mình, nhưng bạn nên tránh làm điều này để nâng cốc tự động. Ngay cả khi bạn nâng cốc chúc mừng trong thời delaygian dài , người dùng bàn phím và công nghệ hỗ trợ có thể gặp khó khăn để nâng cốc đúng lúc để thực hiện hành động (vì lời chúc không nhận được tiêu điểm khi chúng được hiển thị). Nếu bạn hoàn toàn phải kiểm soát thêm, chúng tôi khuyên bạn nên sử dụng bánh mì nướng với autohide: false.

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, bánh mì nướng giờ đây sử dụng các biến CSS cục bộ trên .toastđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$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};

Biến 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);

Cách sử dụng

Khởi tạo bánh mì nướng qua JavaScript:

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

Gây nên

Loại bỏ có thể đạt được với datathuộc tính trên một nút trong bánh mì nướng như được minh họa bên dưới:

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

hoặc trên một nút bên ngoài bánh mì nướng bằng cách sử dụng data-bs-targetnhư minh họa bên dưới:

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

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào data-bs-, như trong data-bs-animation="{value}". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ “ camelCase ” thành “ kebab-case ” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, sử dụng data-bs-custom-class="beautifier"thay vì data-bs-customClass="beautifier".

Kể từ Bootstrap 5.2.0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệmdata-bs-config có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có data-bs-config='{"delay":0, "title":123}'và data-bs-title="456"các thuộc tính, titlegiá trị cuối cùng sẽ là 456và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cho trên data-bs-config. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như data-bs-delay='{"show":0,"hide":150}'.

Tên	Loại hình	Mặc định	Sự mô tả
`animation`	boolean	`true`	Áp dụng chuyển đổi mờ dần CSS cho bánh mì nướng.
`autohide`	boolean	`true`	Tự động ẩn bánh mì nướng sau khi trì hoãn.
`delay`	con số	`5000`	Trì hoãn trong mili giây trước khi ẩn bánh mì nướng.

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

Phương pháp	Sự mô tả
`dispose`	Ẩn bánh mì nướng của một phần tử. Bánh mì nướng của bạn sẽ vẫn còn trên DOM nhưng sẽ không hiển thị nữa.
`getInstance`	Phương thức tĩnh cho phép bạn lấy phiên bản bánh mì nướng được liên kết với một phần tử DOM. Ví dụ: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Trả về một phiên bản bánh mì nướng Bootstrap.
`getOrCreateInstance`	Phương thức tĩnh cho phép bạn lấy phiên bản bánh mì nướng được liên kết với một phần tử DOM hoặc tạo một phiên bản mới, trong trường hợp nó chưa được khởi tạo. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Trả về một phiên bản bánh mì nướng Bootstrap.
`hide`	Ẩn bánh mì nướng của một phần tử. Trả lại cho người gọi trước khi bánh mì nướng thực sự bị ẩn (tức là trước khi `hidden.bs.toast`sự kiện xảy ra). Bạn phải gọi phương thức này theo cách thủ công nếu bạn đã thực `autohide`hiện `false`.
`isShown`	Trả về boolean theo trạng thái hiển thị của bánh mì nướng.
`show`	Tiết lộ bánh mì nướng của một phần tử. Trả về cho người gọi trước khi bánh mì nướng thực sự được hiển thị (tức là trước khi `shown.bs.toast`sự kiện xảy ra). Bạn phải gọi phương thức này theo cách thủ công, thay vào đó bánh mì nướng của bạn sẽ không hiển thị.

Sự kiện

Biến cố	Sự mô tả
`hide.bs.toast`	Sự kiện này được kích hoạt ngay lập tức khi `hide`phương thức thể hiện đã được gọi.
`hidden.bs.toast`	Sự kiện này được kích hoạt khi bánh mì nướng đã hoàn tất bị ẩn khỏi người dùng.
`show.bs.toast`	Sự kiện này kích hoạt ngay lập tức khi `show`phương thức thể hiện được gọi.
`shown.bs.toast`	Sự kiện này được kích hoạt khi bánh mì nướng đã được hiển thị cho người dùng.

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