Học CNTT Bootstrap

Bài 17: Cards trong Bootstrap 5

Mục lục

Tiếp tục bài học về Bootstrap 5, hãy cùng QuanTriMang.com tìm hiểu về Cards. Ý nghĩa và cách dùng của Cards trong Bootstrap 5 như thế nào? Câu trả lời sẽ có ngay dưới đây.

Cards trong Bootstrap 5 là gì?

Một card trong Bootstrap 5 là một box được bo viền với một số phần đệm xung quanh nội dung. Nó bao gồm các lựa chọn cho header, footer, nội dung, màu sắc và nhiều hơn thế nữa.

Card trong Bootstrap 5

Card cơ bản trong Bootstrap 5

Một card cơ bản trong Bootstrap 5 được tạo bằng class .card và nội dung bên trong thẻ có một class .card-body:

<div class="card">
<div class="card-body">Basic card</div>
</div>

Ví dụ trên web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Card cơ bản</h2>
  <div class="card">
    <div class="card-body">QuanTriMang.com</div>
  </div>
</div>

</body>
</html>

Card cơ bản trong Bootstrap 5

Header và Footer

Class .card-header thêm một tiêu đề vào card này và class .card-footer bổ sung footer cho card đó:

<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>

Ví dụ trên web QTM:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Header và Footer</h2>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Nội dung QTM</div> 
    <div class="card-footer">Footer</div>
  </div>
</div>

</body>
</html>

Tiêu đề và phần cuối của thẻ

Card theo ngữ cảnh

Để thêm màu nền cho card, dùng class theo ngữ cảnh (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light.

Ví dụ trên web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Card theo class ngữ cảnh</h2>
  <div class="card">
    <div class="card-body">Thẻ cơ bản</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Thẻ chính</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Thẻ thành công</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Thẻ thông tin</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Thẻ cảnh báo</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Thẻ nguy hiểm</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Thẻ phụ</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Thẻ đêm</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Thẻ ngày</div>
  </div>
</div>

</body>
</html>

Thẻ theo class trong Bootstrap 5

Tiêu đề, text và các liên kết

Dùng .card-title để thêm tiêu đề card cho bất kỳ nhân tố tiêu đề. Class .card-text được dùng để xóa lề dưới cho phần tử <p> nếu nó là phần tử con cuối cùng hay duy nhất bên trong .card-body. Class .card-link thêm màu xanh dương vào liên kết bất kỳ và một hiệu ứng trỏ chuột.

<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

Ví dụ trên web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Tiêu đề, nội dung và liên kết thẻ</h2>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">QuanTriMang.com</h4>
      <p class="card-text">Kiến thức công nghệ, khoa học và cuộc sống.</p>
      <a href="#" class="card-link">Link Card</a>
      <a href="#" class="card-link">Liên kết khác</a>
    </div>
  </div>
</div>

</body>
</html>

Liên kết trong thẻ ở Bootstrap 5

Ảnh thẻ

Thêm .card-img-top hoặc .card-img-bottom vào một <img> để đặt ảnh ở phía trên cùng hoặc dưới trong thẻ. Lưu ý chúng ta đã thêm ảnh bên ngoài .card-body để kéo dài toàn bộ chiều rộng:

<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>

Ví dụ trên web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Ảnh thẻ</h2>
  <p>Ảnh nằm ở trên (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Quản Trị Mạng</h4>
      <p class="card-text">Quản Trị Mạng chuyên cung cấp thông tin công nghệ hay và chính xác.</p>
      <a href="#" class="btn btn-primary">Xem hồ sơ</a>
    </div>
  </div>
  <br>
  
  <p>Ảnh ở dưới (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Admin QTM</h4>
      <p class="card-text">Admin QuanTriMang đáng yêu và hài hước.</p>
      <a href="#" class="btn btn-primary">Xem hồ sơ</a>
    </div>
    <img class="card-img-bottom" src="../bootstrap4/img_avatar6.png" alt="Card image" style="width:100%">
  </div>
</div>

</body>
</html>

Ảnh thẻ trên và dưới trong Bootstrap 5

Lớp phủ hình ảnh thẻ

Biến ảnh thành hình nền cho thẻ và dùng .card-img-overlay để thêm text vào phía trên cùng của ảnh:

<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>

Ví dụ trên web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">QuanTriMang.com</h4>
      <p class="card-text">Quản Trị Mạng là kênh cập nhật thông tin công nghệ được yêu thích nhất hiện nay. QuanTriMang.com có thiết kế đẹp và nội dung hấp dẫn.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
</div>

</body>
</html>

Cách làm chữ phủ lên ảnh trong Bootstrap 5

Trên đây là các cách dùng hay tạo Card trong Bootstrap 5. Phần mềm lập trình này còn nhiều điều thú vị khác. Hãy cùng QuanTriMang.com tiếp tục tìm hiểu ở những bài tiếp theo nhé!

Thứ Sáu, 02/12/2022 11:49
5 ★ 1 👨 1.085
#Bootstrap

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
    ❖ Bootstrap

    Cũ vẫn chất

    Xem thêm
    Bootstrap 5