Cards, Modals & Tooltips trong Bootstrap

Trong Bootstrap, Cards, Modals, và Tooltips là những thành phần quan trọng giúp tổ chức nội dung, hiển thị thông tin động và cung cấp gợi ý cho người dùng. Bài học này sẽ giúp bạn nắm vững cách sử dụng chúng để tạo giao diện web chuyên nghiệp.

1. Cards trong Bootstrap

Cards là một thành phần giao diện giúp hiển thị nội dung theo dạng hộp linh hoạt.

Cấu trúc cơ bản của Card

<div class="card" style="width: 18rem;">
  <img src="product.jpg" class="card-img-top" alt="Sản phẩm">
  <div class="card-body">
    <h5 class="card-title">Tên sản phẩm</h5>
    <p class="card-text">Mô tả ngắn về sản phẩm.</p>
    <a href="#" class="btn btn-primary">Xem chi tiết</a>
  </div>
</div>

Các thành phần của Card

• .card-header → Tiêu đề của Card
• .card-body → Nội dung chính
• .card-footer → Phần chân Card
• .card-img-top → Ảnh nằm trên cùng

2. Modals trong Bootstrap

Modals là hộp thoại bật lên giúp hiển thị thông tin hoặc form đăng nhập.

Cấu trúc cơ bản của Modal

<!-- Nút kích hoạt modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Xem chi tiết
</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Chi tiết sản phẩm</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Nội dung sản phẩm ở đây.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
      </div>
    </div>
  </div>
</div>

Các thành phần của Modal

• .modal-header → Tiêu đề Modal
• .modal-body → Nội dung chính
• .modal-footer → Nút bấm trong Modal

3. Tooltips trong Bootstrap

Tooltips hiển thị gợi ý khi người dùng rê chuột vào phần tử.

Cấu trúc cơ bản của Tooltip

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Nhấn để xem thêm">
  Hover vào đây
</button>

Kích hoạt Tooltip bằng JavaScript
Bootstrap yêu cầu kích hoạt Tooltips bằng đoạn mã sau:

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

4. So sánh CSS thuần và Bootstrap

5. Bài tập thực hành

Yêu cầu:

• Tạo một thẻ sản phẩm với hình ảnh, tiêu đề, mô tả và nút bấm.
• Khi nhấn vào nút Xem chi tiết, hiển thị Modal với thông tin chi tiết sản phẩm.
• Sử dụng Tooltip để hiển thị gợi ý khi rê chuột vào nút.

Ví dụ HTML:

<div class="card" style="width: 18rem;">
  <img src="product.jpg" class="card-img-top" alt="Sản phẩm">
  <div class="card-body">
    <h5 class="card-title">Sản phẩm A</h5>
    <p class="card-text">Mô tả ngắn gọn.</p>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal" data-bs-toggle="tooltip" title="Nhấn để xem chi tiết">
      Xem chi tiết
    </button>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="productModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Chi tiết sản phẩm A</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Nội dung sản phẩm chi tiết.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
      </div>
    </div>
  </div>
</div>

6. Kết luận

Trong bài này, bạn đã học cách sử dụng Cards, Modals và Tooltips trong Bootstrap để tạo giao diện chuyên nghiệp và tương tác hơn. Hãy thử áp dụng chúng vào các dự án thực tế của bạn nhé!