IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Cards

by GokiSoft.Com - 19:29 12/10/2020 3,237 Lượt Xem

Cards

Card ở Bootstrap 4 là một box có viền với một số nội dung bên trong. Nó bao gồm các tùy chọn cho headers, footers, content, colors, vv.

image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Basic Card

Một basic card được tạo bởi class .card, và nội dung bên trong card có class .card-body:

Basic card

Ví dụ


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


Header và Footer

Header
Content

Class .card-header add header cho card và .card-footer add footer cho card:

Ví dụ


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



Contextual Cards

Để add background color cho card, sử dụng thêm các class sau (.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark và .bg-light.

Basic card
Primary card
Success card
Info card
Warning card
Danger card
Secondary card
Dark card
Light card

Titles, text, và links

Card title

Some example text. Some example text.

Card link Another link

Sử dụng .card-title để tạo titles cho header. Class .card-text được dùng để loại bỏ margin-bottom của thẻ <p> nếu nó là last-child (hoặc có duy nhất nó) bên trong .card-body. Class .card-link thêm màu blue cho link, và hiệu ứng hover.

Ví dụ


<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>

Card Images


Add .card-img-top hoặc .card-img-bottom cho thẻ <img> để đặt ảnh trên cùng hoặc dưới cùng bên trong card. Lưu ý rằng thêm hình ảnh bên ngoài .card-body để mở rộng toàn bộ chiều rộng:

Ví dụ


<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>


Stretched Link

Add class .stretched-link vào link bên trong card, và nó sẽ làm cho toàn bộ card có thể nhấp và hover được (thẻ sẽ hoạt động như một link):


Ví dụ


<a href="#" class="btn btn-primary stretched-link">See Profile</a>


Card Image Overlays

Card image

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

Biến hình ảnh thành ảnh nền cho card và sử dụng .card-img-overlay để add text trên cùng của hình ảnh:

Ví dụ


<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>


Card Columns

Some text inside the first card

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Some text inside the fifth card

Some text inside the sixth card

Class .card-columns tạo ra một mạng lưới thẻ (kiểu pinterest). Bố cục sẽ tự động điều chỉnh khi bạn chèn thêm card.

Chú ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (dưới 576px):

Ví dụ


<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>


Card Deck

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Class .card-deck tạo ra một lưới các thẻ có chiều cao và chiều rộng bằng nhau. Bố cục sẽ tự động điều chỉnh khi bạn chèn thêm thẻ.

Chú ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (dưới 576px):

Ví dụ


<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>


Card Group

Some text inside the first card

Some more text to increase the height

Some more text to increase the height

Some more text to increase the height

Some text inside the second card

Some text inside the third card

Some text inside the fourth card

Class .card-group cũng tương tự với .card-deck. Sự khác biệt duy nhất là .card-group loại bỏ margin left và right giữa mỗi card.

Chú ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (dưới 576px), với margin top và bottom:

Ví dụ


<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!