Chào mừng bạn đến với series học Bootstrap 5 trên CodeTutHub! Trong bài viết này, chúng ta sẽ khám phá Close Button, một thành phần đơn giản nhưng rất quan trọng, thường được sử dụng để đóng thông báo, modals, hoặc các thành phần tương tác khác trên giao diện.

Close Button là gì?

Close Button trong Bootstrap 5 là một thành phần được thiết kế để hiển thị nút đóng với biểu tượng "x". Nó có thể được tích hợp vào các thành phần như Alerts, Modals, Offcanvas, hoặc bất kỳ thành phần nào bạn muốn cho phép người dùng đóng hoặc loại bỏ.

Cách sử dụng Close Button

Bootstrap 5 cung cấp lớp .btn-close để tạo một nút đóng đơn giản.

Ví dụ:

<button type="button" class="btn-close" aria-label="Close"></button>

Close Button trong Alerts

Close Button thường được sử dụng để cho phép người dùng đóng các thông báo (Alerts). Kết hợp lớp .btn-close với .alert-dismissible, bạn có thể tạo một Alert có nút đóng.

Ví dụ:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Đây là một thông báo có thể đóng được!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Close Button trong Modals

Close Button thường được sử dụng ở góc phải của Modals để cho phép người dùng thoát khỏi cửa sổ bật lên.

Ví dụ:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tùy chỉnh Close Button

1. Thay đổi màu sắc

Bạn có thể sử dụng thuộc tính CSS để tùy chỉnh màu sắc của Close Button:

<div class="bg-dark p-2">
    <button type="button" class="btn-close" style="filter: invert(1);" aria-label="Close"></button>
</div>

2. Nút Close với nền tối

Để sử dụng Close Button trên nền tối, Bootstrap cung cấp lớp .btn-close-white:

<div class="bg-dark p-2">
    <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
</div>

Sử dụng JavaScript với Close Button

Close Button có thể được kết hợp với các chức năng JavaScript để thêm hành vi tùy chỉnh. Bootstrap cung cấp các sự kiện như dismiss để hỗ trợ bạn.

Ví dụ: Đóng một Alert bằng JavaScript

<div class="alert alert-success alert-dismissible fade show" role="alert" id="alertExample">
  Đây là một thông báo thành công!
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

<script>
  const closeButton = document.querySelector('#alertExample .btn-close');
  closeButton.addEventListener('click', function () {
    const alert = document.getElementById('alertExample');
    alert.classList.remove('show');
    alert.classList.add('fade');
  });
</script>

Lưu ý khi sử dụng Close Button

1. aria-label="Close": Hãy luôn thêm thuộc tính aria-label để đảm bảo Close Button thân thiện với công cụ hỗ trợ tiếp cận.
2. data-bs-dismiss: Sử dụng thuộc tính này để kết hợp Close Button với các thành phần Bootstrap (như Alerts, Modals).
3. Tương thích màu sắc: Đảm bảo nút đóng hiển thị rõ ràng trên nền giao diện (sử dụng .btn-close-white cho nền tối).

Kết luận

Close Button trong Bootstrap 5 là một công cụ đơn giản nhưng cực kỳ hữu ích để nâng cao tính tương tác và trải nghiệm người dùng trên website. Từ Alerts, Modals, đến các thành phần tùy chỉnh, bạn có thể dễ dàng tích hợp và tùy chỉnh Close Button để phù hợp với giao diện của mình.

Hãy tiếp tục theo dõi CodeTutHub để khám phá thêm các thành phần hấp dẫn khác trong series học Bootstrap 5. Nếu bạn có bất kỳ thắc mắc nào, đừng ngần ngại để lại bình luận nhé!

Chúc bạn học tốt!