Cards trong bootstrap 5

Công nghệ Lập trình Bootstrap 5

12/12
Thạch
Bootstrap 5
0
403

Tiếp tục bài học về Bootstrap 5, hãy cùng Sinitc.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.

Bài 16: List Groups trong Bootstrap 5

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 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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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">Sinitc.com</div>
  </div>
</div>

</body>
</html>

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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.com</div> 
    <div class="card-footer">Footer</div>
  </div>
</div>

</body>
</html>

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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
</div>

</body>
</html>

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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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">Sinitc.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>

Ả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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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="photos/image/2022/3.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Sinitc.com</h4>
      <p class="card-text">Sinitc.com 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 Sinitc.com</h4>
      <p class="card-text">Admin Sinitc.com đá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="photos/image/2022/1.jpg" alt="Card image" style="width:100%">
  </div>
</div>

</body>
</html>

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="photos/image/2022/1.jpg" 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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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="photos/image/2022/3.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Sinitc.com</h4>
      <p class="card-text">Sinitc.com là kênh cập nhật thông tin công nghệ được yêu thích nhất hiện nay. Sinitc.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>

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 Sinitc.com tiếp tục tìm hiểu ở những bài tiếp theo nhé!

Bài 18: Tạo menu xổ xuống trong Bootstrap 5