Bootstrap - Thẻ: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn tương lai của các nhà phát triển web! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của Bootstrap Cards. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Hãy tưởng tượng chúng ta đang cùng nhau xây dựng một cuốn sổ scrapbook số - đó chính là những gì chúng ta sẽ làm với Bootstrap Cards!

Thẻ Bootstrap là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu xem thẻ Bootstrap là gì. Hãy nghĩ về nó như một hộp chứa linh hoạt, nơi bạn có thể đặt các loại nội dung khác nhau - văn bản, hình ảnh, liên kết và hơn thế nữa. Nó giống như một phiên bản số của những thẻ bài bạn có thể đã 收集 khi còn nhỏ, nhưng cooler và linh hoạt hơn!

Cấu trúc thẻ cơ bản

Hãy bắt đầu với cấu trúc thẻ cơ bản nhất:

<div class="card">
<div class="card-body">
<h5 class="card-title">Xin chào, tôi là một thẻ!</h5>
<p class="card-text">Tôi có thể chứa tất cả các loại thông tin thú vị.</p>
</div>
</div>

Mã này tạo ra một thẻ đơn giản với tiêu đề và một chút văn bản. Class card tạo ra hộp chứa, và card-body bao quanh nội dung bên trong.

Loại nội dung

Bây giờ, hãy khám phá các loại nội dung khác nhau mà chúng ta có thể đặt trong thẻ của mình:

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

<div class="card">
<div class="card-body">
<h5 class="card-title">Tiêu đề thẻ</h5>
<h6 class="card-subtitle mb-2 text-muted">Phụ đề thẻ</h6>
<p class="card-text">Một đoạn văn bản mẫu để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.</p>
<a href="#" class="card-link">Liên kết thẻ</a>
<a href="#" class="card-link">Một liên kết khác</a>
</div>
</div>

Ví dụ này cho thấy cách chúng ta có thể thêm phụ đề, nhiều văn bản hơn và liên kết vào thẻ của mình. Nó giống như thêm các phần khác nhau vào trang scrapbook số của chúng ta!

Hình ảnh

Hãy thêm một chút vẻ đẹp thị giác với hình ảnh:

<div class="card">
<img src="đường/dẫn/đến/hình/ảnh/của/bạn.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Hãy nhìn hình ảnh đẹp này!</p>
</div>
</div>

Class card-img-top đặt hình ảnh ở đỉnh của thẻ. Nó giống như dán một hình ảnh lên đỉnh trang scrapbook của bạn!

Danh sách nhóm

Chúng ta thậm chí có thể thêm danh sách vào thẻ của mình:

<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Một mục</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
</ul>
</div>

Điều này tạo ra một thẻ với danh sách bên trong. Hoàn hảo cho danh sách công việc hoặc các điểm liệt kê!

Tất cả trong một

Bây giờ, hãy kết hợp tất cả những gì chúng ta đã học vào một thẻ "tất cả trong một":

<div class="card" style="width: 18rem;">
<img src="đường/dẫn/đến/hình/ảnh/của/bạn.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Tiêu đề thẻ</h5>
<p class="card-text">Một đoạn văn bản mẫu để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Một mục</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Liên kết thẻ</a>
<a href="#" class="card-link">Một liên kết khác</a>
</div>
</div>

Thẻ này có tất cả - hình ảnh, tiêu đề, văn bản, danh sách và liên kết. Nó giống như cây kéo đa năng của thẻ!

Đầu và chân

Chúng ta có thể thêm đầu và chân vào thẻ của mình để có thêm cấu trúc:

<div class="card">
<div class="card-header">
Nổi bật
</div>
<div class="card-body">
<h5 class="card-title">Xử lý tiêu đề đặc biệt</h5>
<p class="card-text">Với văn bản hỗ trợ bên dưới như một dẫn đầu tự nhiên cho nội dung bổ sung.</p>
<a href="#" class="btn btn-primary">Đi đâu đó</a>
</div>
<div class="card-footer text-muted">
2 ngày trước
</div>
</div>

Đầu và chân cho thẻ của chúng ta một的外观 hoàn chỉnh.

Kích thước

Chúng ta có thể kiểm soát kích thước của thẻ bằng cách sử dụng các lớp lưới hoặc CSS tùy chỉnh:

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Tiêu đề thẻ</h5>
<p class="card-text">Thẻ này chiếm 75% rộng.</p>
</div>
</div>

Thẻ này sẽ chiếm 75% chiều rộng của hộp chứa của nó.

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

Chúng ta có thể sử dụng hệ thống lưới của Bootstrap để tổ chức thẻ của mình:

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Xử lý tiêu đề đặc biệt</h5>
<p class="card-text">Với văn bản hỗ trợ bên dưới như một dẫn đầu tự nhiên cho nội dung bổ sung.</p>
<a href="#" class="btn btn-primary">Đi đâu đó</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Xử lý tiêu đề đặc biệt</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>

Điều này tạo ra hai thẻ bên cạnh nhau trên màn hình lớn, và叠放在小屏幕上。

Điều hướng

Chúng ta thậm chí có thể biến thẻ của mình thành các phần tử điều hướng:

<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" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên kết</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Vô hiệu hóa</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Xử lý tiêu đề đặc biệt</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>

Điều này tạo ra một thẻ với các tab điều hướng ở đỉnh.

Styles thẻ

Bootstrap cung cấp nhiều styles khác nhau cho thẻ:

Nền và màu

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Đầu</div>
<div class="card-body">
<h5 class="card-title">Tiêu đề thẻ chính</h5>
<p class="card-text">Một đoạn văn bản mẫu để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.</p>
</div>
</div>

Điều này tạo ra một thẻ xanh với văn bản trắng. Bạn có thể thay thế bg-primary với các lớp màu khác như bg-success, bg-warning, v.v.

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của Bootstrap Cards, từ cấu trúc cơ bản đến các bố cục nâng cao. Nhớ rằng, thực hành làm cho hoàn hảo. Hãy thử kết hợp các yếu tố và styles khác nhau để tạo ra các thẻ duy nhất của bạn. Ai biết được? Bạn có thể tạo ra điều gì đó lớn lao trong thiết kế web! Chúc các bạn may mắn trong việc code!

Credits: Image by storyset