IMG-LOGO
× 1) Bootstrap 4 - Giới Thiệu 2) Bootstrap 4 Containers 3) Bootstrap 4 Grids 4) Bootstrap 4 Text/Typography 5) Bootstrap 4 Colors 6) Bootstrap 4 Tables 7) Bootstrap 4 Images 8) Bootstrap 4 Jumbotron 9) Bootstrap 4 Alerts 10) Bootstrap 4 Buttons 11) Bootstrap 4 Button Groups 12) Bootstrap 4 Badges 13) Bootstrap 4 Progress Bars 14) Bootstrap 4 Spinners 15) Bootstrap 4 Pagination 16) Bootstrap 4 List Groups 17) Bootstrap 4 Cards 18) Bootstrap 4 Dropdowns 19) Bootstrap 4 Collapse 20) Bootstrap 4 Navs 21) Bootstrap 4 Navigation Bar 22) Bootstrap 4 Forms 23) Bootstrap 4 Form Inputs 24) Bootstrap 4 Inputs Group 25) Bootstrap 4 Custom Forms 26) Bootstrap 4 Carousel 27) Bootstrap 4 Modal 28) Bootstrap 4 Tooltip 29) Bootstrap 4 Popover 30. Bootstrap 4 Toast 31) Bootstrap 4 Scrollspy (Advanced) 32) Bootstrap 4 Utilities 33) Bootstrap 4 Flex 34) Bootstrap 4 Icons 35) Bootstrap 4 Media Objects 36) Bootstrap 4 Filters (Advanced) 37) Bootstrap 4 - Form đăng ký tài khoản người dùng

Bootstrap 4 Toast

by GokiSoft.Com - 19:27 12/10/2020 1,480 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.

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!