thẻ

Các thẻ của Bootstrap cung cấp một vùng chứa nội dung linh hoạt và có thể mở rộng với nhiều biến thể và tùy chọn.

Trên trang này

Về

Thẻ là một nơi chứa nội dung linh hoạt và có thể mở rộng . Nó bao gồm các tùy chọn cho đầu trang và chân trang, nhiều loại nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Nếu bạn đã quen thuộc với Bootstrap 3, thẻ sẽ thay thế các bảng điều khiển, giếng và hình thu nhỏ cũ của chúng tôi. Chức năng tương tự với các thành phần đó có sẵn dưới dạng các lớp bổ trợ cho thẻ.

Thí dụ

Các thẻ được tạo với ít đánh dấu và kiểu dáng nhất có thể, nhưng vẫn quản lý để cung cấp rất nhiều quyền kiểm soát và tùy chỉnh. Được xây dựng với flexbox, chúng cung cấp khả năng căn chỉnh dễ dàng và kết hợp tốt với các thành phần Bootstrap khác. Chúng không có margintheo mặc định, vì vậy hãy sử dụng các tiện ích giãn cách nếu cần.

Dưới đây là ví dụ về thẻ cơ bản có nội dung hỗn hợp và chiều rộng cố định. Các thẻ không có chiều rộng cố định để bắt đầu, vì vậy chúng sẽ tự nhiên lấp đầy toàn bộ chiều rộng của phần tử mẹ của nó. Điều này có thể dễ dàng tùy chỉnh với các tùy chọn kích thước khác nhau của chúng tôi .

Tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Đi đâu đó

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Loại nội dung

Thẻ hỗ trợ nhiều loại nội dung, bao gồm hình ảnh, văn bản, nhóm danh sách, liên kết, v.v. Dưới đây là ví dụ về những gì được hỗ trợ.

Thân hình

Khối xây dựng của một thẻ là .card-body. Sử dụng nó bất cứ khi nào bạn cần một phần đệm trong thẻ.

Đây là một số văn bản trong nội dung thẻ.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tiêu đề, văn bản và liên kết

Tiêu đề thẻ được sử dụng bằng cách thêm .card-titlevào <h*>thẻ. Theo cách tương tự, các liên kết được thêm vào và đặt cạnh nhau bằng cách thêm .card-linkvào <a>thẻ.

Phụ đề được sử dụng bằng cách thêm .card-subtitlevào <h*>thẻ. Nếu .card-titlevà các .card-subtitlemục được đặt trong một .card-bodymục, tiêu đề thẻ và tiêu đề phụ sẽ được căn chỉnh một cách đẹp mắt.

Tiêu đề thẻ

Phụ đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Liên kết thẻ Một liên kết khác

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Hình ảnh

.card-img-topđặt một hình ảnh lên đầu thẻ. Với .card-text, văn bản có thể được thêm vào thẻ. Văn bản bên trong .card-textcũng có thể được tạo kiểu bằng các thẻ HTML tiêu chuẩn.

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Liệt kê các nhóm

Tạo danh sách nội dung trong thẻ với nhóm danh sách phẳng.

Một món đồ
Một mặt hàng thứ hai
Một mặt hàng thứ ba

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Đặc sắc

Một món đồ
Một mặt hàng thứ hai
Một mặt hàng thứ ba

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Một món đồ
Một mặt hàng thứ hai
Một mặt hàng thứ ba

Chân thẻ

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Bồn rửa chén

Trộn và kết hợp nhiều loại nội dung để tạo thẻ bạn cần hoặc ném mọi thứ vào đó. Dưới đây là các kiểu hình ảnh, khối, kiểu văn bản và một nhóm danh sách — tất cả được bao bọc trong một thẻ có chiều rộng cố định.

Tiêu đề thẻ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Một món đồ
Một mặt hàng thứ hai
Một mặt hàng thứ ba

Liên kết thẻ Một liên kết khác

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Đầu trang và cuối trang

Thêm đầu trang và / hoặc chân trang tùy chọn trong thẻ.

Đặc sắc

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tiêu đề thẻ có thể được tạo kiểu bằng cách thêm .card-headervào <h*>các phần tử.

Đặc sắc

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Trích dẫn

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

Ai đó nổi tiếng trong Tiêu đề nguồn

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Đặc sắc

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

2 ngày trước

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Định cỡ

Các thẻ giả định không widthbắt đầu cụ thể, vì vậy chúng sẽ rộng 100% trừ khi có quy định khác. Bạn có thể thay đổi điều này nếu cần với CSS tùy chỉnh, các lớp lưới, kết hợp Sass lưới hoặc các tiện ích.

Sử dụng đánh dấu lưới

Sử dụng lưới, bọc các thẻ thành các cột và hàng nếu cần.

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Sử dụng các tiện ích

Sử dụng một số tiện ích định cỡ sẵn có của chúng tôi để nhanh chóng thiết lập chiều rộng của thẻ.

Tiêu đề thẻ

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Cái nút

Tiêu đề thẻ

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Cái nút

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Sử dụng CSS tùy chỉnh

Sử dụng CSS tùy chỉnh trong các bảng định kiểu của bạn hoặc dưới dạng các kiểu nội tuyến để đặt chiều rộng.

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Căn chỉnh văn bản

Bạn có thể nhanh chóng thay đổi căn chỉnh văn bản của bất kỳ thẻ nào — toàn bộ hoặc từng phần cụ thể — với các lớp căn chỉnh văn bản của chúng tôi .

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Thêm một số điều hướng vào tiêu đề (hoặc khối) của thẻ với các thành phần điều hướng của Bootstrap .

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Xử lý danh hiệu đặc biệt

Với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên đến nội dung bổ sung.

Đi đâu đó

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Hình ảnh

Thẻ bao gồm một số tùy chọn để làm việc với hình ảnh. Chọn từ việc thêm "mũ hình ảnh" vào một trong hai đầu của thẻ, chồng hình ảnh với nội dung thẻ hoặc chỉ cần nhúng hình ảnh vào thẻ.

Mũ hình ảnh

Tương tự như đầu trang và chân trang, thẻ có thể bao gồm "chữ viết hoa hình ảnh" trên cùng và dưới cùng — hình ảnh ở đầu hoặc cuối thẻ.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Lớp phủ hình ảnh

Biến hình ảnh thành nền thẻ và phủ văn bản trên thẻ của bạn. Tùy thuộc vào hình ảnh, bạn có thể cần hoặc không cần thêm kiểu dáng hoặc tiện ích.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Lưu ý rằng nội dung không được lớn hơn chiều cao của hình ảnh. Nếu nội dung lớn hơn hình ảnh, nội dung sẽ được hiển thị bên ngoài hình ảnh.

Nằm ngang

Sử dụng kết hợp lưới và các lớp tiện ích, thẻ có thể được tạo theo chiều ngang theo cách thân thiện với thiết bị di động và đáp ứng. Trong ví dụ dưới đây, chúng tôi loại bỏ các rãnh lưới .g-0và sử dụng .col-md-*các lớp để làm cho thẻ nằm ngang tại mdđiểm ngắt. Có thể cần điều chỉnh thêm tùy thuộc vào nội dung thẻ của bạn.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kiểu thẻ

Thẻ bao gồm các tùy chọn khác nhau để tùy chỉnh hình nền, đường viền và màu sắc của chúng.

Nền và màu sắc

Đã thêm vào v5.2.0

Đặt background-colortiền cảnh tương phản colorvới những .text-bg-{color}người trợ giúp của chúng tôi . Trước đây, cần phải ghép nối thủ công lựa chọn của bạn .text-{color}và .bg-{color}các tiện ích để tạo kiểu, bạn vẫn có thể sử dụng tùy chọn này nếu muốn.

Tiêu đề

Tiêu đề thẻ chính

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ phụ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ nguy hiểm

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ cảnh báo

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ thông tin

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ nhẹ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ tối

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .visually-hiddenlớp.

Biên giới

Sử dụng các tiện ích biên giới để chỉ thay đổi border-colorthẻ. Lưu ý rằng bạn có thể đặt .text-{color}các lớp trên cha .cardhoặc một tập hợp con của nội dung thẻ như hình dưới đây.

Tiêu đề

Tiêu đề thẻ chính

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ phụ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ nguy hiểm

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ cảnh báo

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ thông tin

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ nhẹ

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Tiêu đề

Tiêu đề thẻ tối

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Tiện ích Mixins

Bạn cũng có thể thay đổi các đường viền trên đầu trang và chân trang của thẻ nếu cần, và thậm chí xóa chúng background-colorbằng .bg-transparent.

Tiêu đề

Tiêu đề thẻ thành công

Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.

Chân trang

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Bố cục thẻ

Ngoài việc tạo kiểu cho nội dung bên trong thẻ, Bootstrap còn bao gồm một số tùy chọn để đặt hàng loạt thẻ. Hiện tại, các tùy chọn bố cục này vẫn chưa được đáp ứng .

Nhóm thẻ

Sử dụng nhóm thẻ để hiển thị thẻ dưới dạng một phần tử đính kèm duy nhất với các cột chiều rộng và chiều cao bằng nhau. Các nhóm thẻ bắt đầu được xếp chồng lên nhau và sử dụng display: flex;để gắn với các kích thước đồng nhất bắt đầu từ smđiểm ngắt.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Thẻ này thậm chí còn có nội dung dài hơn thẻ đầu tiên để hiển thị hành động có chiều cao bằng nhau.

Cập nhật lần cuối cách đây 3 phút

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Khi sử dụng nhóm thẻ có chân trang, nội dung của chúng sẽ tự động xếp hàng.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Cập nhật lần cuối cách đây 3 phút

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Thẻ lưới

Sử dụng hệ thống lưới Bootstrap và các .row-colslớp của nó để kiểm soát số lượng cột lưới (bao quanh thẻ của bạn) mà bạn hiển thị trên mỗi hàng. Ví dụ: đây là .row-cols-1bố trí các thẻ trên một cột và .row-cols-md-2chia bốn thẻ thành chiều rộng bằng nhau trên nhiều hàng, từ điểm ngắt trung bình trở lên.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Thay đổi nó thành .row-cols-3và bạn sẽ thấy bọc thẻ thứ tư.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Khi bạn cần chiều cao bằng nhau, hãy thêm .h-100vào các thẻ. Nếu bạn muốn chiều cao bằng nhau theo mặc định, bạn có thể đặt $card-height: 100%trong Sass.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Tiêu đề thẻ

Đây là một thẻ ngắn.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Tiêu đề thẻ

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cũng giống như với nhóm thẻ, chân thẻ sẽ tự động xếp hàng.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như một hướng dẫn tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút

Tiêu đề thẻ

Cập nhật lần cuối cách đây 3 phút

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Nề

Trong v4chúng tôi đã sử dụng một kỹ thuật chỉ CSS để bắt chước hành vi của các cột giống Masonry , nhưng kỹ thuật này có rất nhiều tác dụng phụ khó chịu . Nếu bạn muốn có kiểu bố cục này v5, bạn có thể sử dụng plugin Masonry. Masonry không được bao gồm trong Bootstrap , nhưng chúng tôi đã tạo một ví dụ demo để giúp bạn bắt đầu.

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, các thẻ hiện sử dụng các biến CSS cục bộ trên .cardđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Biến Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

thẻ

Về

Thí dụ

Tiêu đề thẻ

Loại nội dung

Thân hình

Tiêu đề, văn bản và liên kết

Tiêu đề thẻ

Phụ đề thẻ

Hình ảnh

Liệt kê các nhóm

Bồn rửa chén

Tiêu đề thẻ

Đầu trang và cuối trang

Xử lý danh hiệu đặc biệt

Đặc sắc

Xử lý danh hiệu đặc biệt

Xử lý danh hiệu đặc biệt

Định cỡ

Sử dụng đánh dấu lưới

Xử lý danh hiệu đặc biệt

Xử lý danh hiệu đặc biệt

Sử dụng các tiện ích

Tiêu đề thẻ

Tiêu đề thẻ

Sử dụng CSS tùy chỉnh

Xử lý danh hiệu đặc biệt

Căn chỉnh văn bản

Xử lý danh hiệu đặc biệt

Xử lý danh hiệu đặc biệt

Xử lý danh hiệu đặc biệt

dẫn đường

Xử lý danh hiệu đặc biệt

Xử lý danh hiệu đặc biệt

Hình ảnh

Mũ hình ảnh

Tiêu đề thẻ

Tiêu đề thẻ

Lớp phủ hình ảnh

Tiêu đề thẻ

Nằm ngang

Tiêu đề thẻ

Kiểu thẻ

Nền và màu sắc

Tiêu đề thẻ chính

Tiêu đề thẻ phụ

Tiêu đề thẻ thành công

Tiêu đề thẻ nguy hiểm

Tiêu đề thẻ cảnh báo

Tiêu đề thẻ thông tin

Tiêu đề thẻ nhẹ

Tiêu đề thẻ tối

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Biên giới

Tiêu đề thẻ chính

Tiêu đề thẻ phụ

Tiêu đề thẻ thành công

Tiêu đề thẻ nguy hiểm

Tiêu đề thẻ cảnh báo

Tiêu đề thẻ thông tin

Tiêu đề thẻ nhẹ

Tiêu đề thẻ tối

Tiện ích Mixins

Tiêu đề thẻ thành công

Bố cục thẻ

Nhóm thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Thẻ lưới

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ

Tiêu đề thẻ