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

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ khám phá thế giới tuyệt vời của Bootstrap Stacks. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình thú vị này. Cuối cùng của bài hướng dẫn này, bạn sẽ xếp các yếu tố như một chuyên gia!

Bootstrap Stacks là gì?

Trước khi chúng ta bắt đầu, hãy nói về stacks là gì trong Bootstrap. Hãy tưởng tượng bạn đang xây dựng một tháp bằng các khối Lego. Bạn có thể xếp chúng theo chiều dọc (đ上位 trên nhau) hoặc theo chiều ngang (bên cạnh nhau). Bootstrap stacks hoạt động theo cách tương tự, nhưng thay vì các khối Lego, chúng ta đang sắp xếp các yếu tố HTML trên trang web.

Bây giờ, hãy khám phá hai loại stacks chính trong Bootstrap:

Stack dọc

Một stack dọc giống như một chồng bánh pancake - mỗi yếu tố nằm trên yếu tố bên dưới nó. Trong Bootstrap, chúng ta tạo stack dọc bằng cách sử dụng lớp .vstack.

Stack dọc cơ bản

Hãy bắt đầu với một ví dụ đơn giản:

<div class="vstack gap-3">
<div class="p-2">Yếu tố đầu tiên</div>
<div class="p-2">Yếu tố thứ hai</div>
<div class="p-2">Yếu tố thứ ba</div>
</div>

Trong đoạn mã này:

• Chúng ta tạo một容器 <div> với lớp vstack.
• gap-3 thêm một khoảng cách giữa các yếu tố xếp chồng.
• Mỗi yếu tố là một <div> với lớp p-2 để thêm padding.

Khi bạn chạy đoạn mã này, bạn sẽ thấy ba hộp xếp chồng theo chiều dọc, mỗi hộp chứa văn bản. Đó là tất cả!

Stack dọc với nội dung khác nhau

Hãy làm cho mọi thứ thú vị hơn một chút:

<div class="vstack gap-3">
<button class="btn btn-secondary">Nhấp vào tôi!</button>
<div class="bg-light border">Tôi là một hộp</div>
<div class="bg-light border">
<h3>Tôi là một tiêu đề</h3>
<p>And tôi là một đoạn văn bản</p>
</div>
</div>

Ở đây, chúng ta đã trộn các loại nội dung khác nhau:

• Một nút (sử dụng các lớp nút của Bootstrap)
• Một div với nền sáng và viền
• Một div phức tạp hơn với tiêu đề và đoạn văn bản

Điều này cho thấy stack dọc có thể linh hoạt như thế nào. Bạn không bị giới hạn chỉ với các hộp văn bản đơn giản!

Stack ngang

Bây giờ, hãy thay đổi hướng và nói về stack ngang. Nếu stack dọc giống như bánh pancake, stack ngang giống như một hàng domino - các yếu tố được sắp xếp bên cạnh nhau. Chúng ta sử dụng lớp .hstack cho điều này.

Stack ngang cơ bản

Dưới đây là một ví dụ đơn giản:

<div class="hstack gap-3">
<div class="p-2">Đầu tiên</div>
<div class="p-2">Thứ hai</div>
<div class="p-2">Thứ ba</div>
</div>

Đoạn mã này rất giống với stack dọc của chúng ta, nhưng chúng ta sử dụng hstack thay vì vstack. Kết quả? Ba hộp được sắp xếp theo chiều ngang!

Stack ngang với căn chỉnh

Hãy làm cho mọi thứ thú vị hơn:

<div class="hstack gap-3">
<div class="bg-light border">Yếu tố đầu tiên</div>
<div class="bg-light border ms-auto">Yếu tố thứ hai</div>
<div class="bg-light border">Yếu tố thứ ba</div>
</div>

Trong ví dụ này:

• Chúng ta đã thêm nền sáng và viền cho các yếu tố.
• Lớp ms-auto trên yếu tố thứ hai đẩy nó sang phải, tạo ra khoảng cách giữa yếu tố đầu tiên và thứ hai.

Điều này cho thấy chúng ta có thể kiểm soát vị trí trong stack ngang như thế nào.

Kết hợp stack dọc và ngang

Bây giờ, hãy đến phần kỳ diệu. Chúng ta có thể kết hợp stack dọc và ngang để tạo ra các bố cục phức tạp:

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Thêm mục của bạn ở đây...">
<button type="button" class="btn btn-secondary">Gửi</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Đặt lại</button>
</div>
<div class="bg-light border">Mục tùy chỉnh</div>
<div class="bg-light border">Mục tùy chỉnh</div>
</div>

Ví dụ phức tạp này cho thấy:

• Một stack dọc làm容器 chính
• Một stack ngang trong stack dọc (ô nhập liệu và các nút)
• Các mục khác trong stack dọc bên dưới

Kết quả là một cấu trúc giống như biểu mẫu với các yếu tố bổ sung bên dưới - một mẫu phổ biến trong thiết kế web!

Bảng tóm tắt phương thức và lớp

Dưới đây là bảng tóm tắt các lớp và phương thức chính mà chúng ta đã thảo luận:

Lớp/Phương thức	Mô tả	Ví dụ
.vstack	Tạo một stack dọc	<div class="vstack">
.hstack	Tạo một stack ngang	<div class="hstack">
gap-{size}	Thêm khoảng cách giữa các yếu tố stack	<div class="vstack gap-3">
ms-auto	Đẩy một yếu tố sang phải trong hstack	<div class="ms-auto">
.vr	Tạo một vạch vertial (phân cách) trong hstack	<div class="vr"></div>

Kết luận

Và đây bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của Bootstrap Stacks, từ các xếp chồng đơn giản đến các kết hợp phức tạp của stack ngang và dọc. Nhớ rằng, thiết kế web giống như xây dựng bằng Lego - bắt đầu với những mảnh đơn giản, và sớm bạn sẽ tạo ra các cấu trúc tuyệt vời!

Thực hành với các ví dụ này, thử nghiệm với các kết hợp khác nhau, và đừng sợ phạm lỗi. Đó là cách chúng ta học hỏi và phát triển như những nhà phát triển. Trước khi bạn biết, bạn sẽ xếp các yếu tố như một chuyên gia!

Chúc các bạn may mắn và các stack của bạn luôn align hoàn hảo! ?

Credits: Image by storyset