[Bài đọc] Bootstrap Cards

Cards là một thùng 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 các tiêu đề và chân trang, 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, Cards sẽ thay thế cho Panel với chức năng tương tự.

Cards có Tiêu đề

Có hai cách để có card có tiêu đề:

1. Sử dụng class .card-header để dễ dàng thêm tiêu đề vào thành phần Container của bạn.
2. Sử dụng bất kỳ thẻ <h1> đến <h6> với một class .card-title để thêm một tiêu đề.

Xem ví dụ dưới đây:

HTML :

<div class="card">
  <div class="card-header">Panel heading without title</div>
  <div class="card-body">Panel content</div>
</div>
<div class="card">
  <div class="card-header">
    <h3 class="card-title">

      Panel With title

    </h3>
  </div>
  <div class="card-body">Panel content</div>
</div>

Cards có footer

Bạn có thể thêm footer vào cards bằng cách bọc các nút hoặc text trong thẻ <div> có class .card-footer. Xem ví dụ dưới đây:

HTML:

<div class="card">
    <div class="card-body">This is a Basic panel</div>
    <div class="card-footer">Panel footer</div>
</div>

Cards và bảng

Bạn có thể thêm bất kỳ phần tử .table không có đường viền nào vào bên trong một card để đảm bảo tính thống nhất về giao diện. Nếu như có một card-body cùng với bảng, chúng ta sẽ thêm một đường viền trên cho bảng để phân tách nội dung.

Ví dụ :

HTML:

<div class="card">
    <div class="card-header">
         <h3 class="card-title">Panel title</h3>
    </div>
    <div class="card-body">This is a Basic panel</div>
    <table class="table">
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Product A</td>
            <td>200</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>400</td>
        </tr>
    </table>
</div>
<div class="panel panel-default">
    <div class="card-header">Panel Heading</div>
    <table class="table">
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Product A</td>
            <td>200</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>400</td>
        </tr>
    </table>
</div>

Cards và nhóm các danh sách

Bạn có thể thêm các nhóm danh sách trong bất kỳ card nào. Tạo card bằng cách thêm lớp .card vào phần tử <div>. Bây giờ trong card này bao gồm các nhóm danh sách của bạn.

HTML:

<div class="card">
  <div class="card-header">Panel heading</div>
  <div class="card-body">
    <p>This is a Basic panel content. This is a Basic panel content. This is
      a Basic panel content. This is a Basic panel content. This is a Basic panel
      content. This is a Basic panel content. This is a Basic panel content.</p>
  </div>
  <ul class="list-group">
    <li class="list-group-item">Free Domain Name Registration</li>
    <li class="list-group-item">Free Window Space hosting</li>
    <li class="list-group-item">Number of Images</li>
    <li class="list-group-item">24*7 support</li>
    <li class="list-group-item">Renewal cost per year</li>
  </ul>
</div>