IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Toast

by GokiSoft.Com - 19:27 12/10/2020 3,294 Lượt Xem

Bootstrap 4 Toast

Toast giống như alert box chỉ hiển thị trong vài giây khi có điều gì đó xảy ra (có thể khi người dùng click vào button, submit form, vv).


Cách để tạo một Toast

Để tạo toast, sử dung class .toast, sau đó add .toast-header và .toast-body bên trong nó:

<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Note: Toasts phải được khởi tạo với jQuery: : chọn phần tử được chỉ định và gọi phương thức toast().

Đoạn code sau sẽ show all "toasts" trong trang:

Ví dụ

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>

Show/Hide một Toast

Toasts theo mặc định là hidden. Sử dụng thuộc tính data-autohide="false" để hiển thị chúng theo mặc định. Để đóng toast, sử dụng <button> và add data-dismiss="toast":

Ví dụ

<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">&times;</button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Chú ý class mr-automl-2 và mb-1 dùng để add margins.

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!