Toast trong Bootstrap 4

Toast là một thành phần giống như một hộp cảnh báo chỉ hiển thị trong vài giây khi có điều gì đó xảy ra ( ví dụ như khi người dùng nhấp vào các nút gửi biểu mẫu chẳng hạn, v.v.) Trong bài học này chúng ta sẽ tìm hiểu về cách sử dụng toast trong Bootstrap 4 các bạn nhé!

Cách tạo Toast trong Bootstrap 4

Để tạo Toast chúng ta sử dụng lớp .toast và thêm .toast-header và .toast-body bên trong nó. Và đương nhiên chúng ta cần phải sử dụng jQuery với đoạn code sau để có thể hiển thị Toast.

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

Ví dụ về Toast Bootstrap 4:

<div class="container">
  <h3>Ví dụ Toast </h3>
 <p> Toast giống như một hộp thông báo chỉ hiển thị trong vài giây khi có điều gì đó xảy ra (tức là khi người dùng nhấp vào nút, gửi biểu mẫu, v.v.). </p>  
  <button type="button" class="btn btn-primary" id="myBtn">Hiển thị Toast</button>
  <div class="toast">
    <div class="toast-header">
     Phần đầu Toast
    </div>
    <div class="toast-body">
      Nội dung Toast
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    $('.toast').toast('show');
  });
});
</script>

Hiển thị và Ẩn một Toast

Toast ẩn theo mặc định. Sử dụng thuộc tính data-autohide = "false" để hiển thị nó theo mặc định. Để đóng nó, hãy sử dụng phần tử <button> và thêm data-dismiss="toast":

vÍ DỤ :

<div class="container">
  <h3>Ví Dụ Toast</h3>
    <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>
</div>

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

Lưu ý các lớp mr-auto, ml-2 và mb-1? Chúng được sử dụng để margin. Bạn sẽ tìm hiểu thêm về chúng trong Chương Tiện ích Bootstrap 4.

Lời kết:

Vậy là chúng ta đẫ học dduowdcj thêm 1 cách để hiển thị thông báo cảnh báo hay chú thích trên trang web cho người dùng rồi đấy. Việc sử dụng Toast trong Bootstrap 4 tỏ ra cực kỳ hữu ích khi chúng ta chỉ muốn thông báo nhẹ với người dùng sau đó tự động tắt thông báo mà người dùng không cần phải làm gì cả!