Bootstrap - Căn chỉnh Vertically: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên cho các bạn trong hành trình thú vị vào thế giới của Bootstrap và căn chỉnh Vertically. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng việc thành thạo căn chỉnh Vertically giống như học đi xe đạp - nó có thể trông khó khăn ban đầu, nhưng một khi bạn đã làm quen, bạn sẽ nhanh chóng điềm nhiên di chuyển!

Hiểu về Căn chỉnh Vertically trong Bootstrap

Trước khi chúng ta đi sâu vào chi tiết, hãy dành một chút thời gian để hiểu về căn chỉnh Vertically là gì. Hãy tưởng tượng bạn đang sắp xếp sách trên kệ. Đôi khi bạn muốn chúng được排列整齐 ở dưới, có khi bạn muốn chúng ở giữa, hoặc thậm chí căn chỉnh ở trên. Đó chính là điều chúng ta đang làm với các yếu tố trên trang web, nhưng thay vì sách, chúng ta đang làm việc với văn bản, hình ảnh và các nội dung khác.

Tại sao Căn chỉnh Vertically Quan trọng

Bạn có thể tự hỏi, "Tại sao tôi nên quan tâm đến căn chỉnh Vertically?" Well, để tôi kể cho bạn một câu chuyện nhỏ. Tôi từng có một học sinh đã tạo ra một trang web đẹp mắt, nhưng tất cả các nội dung đều bị nén ở trên cùng mỗi phần. Nó trông như thể trang web đang mặc quần quá cao! Căn chỉnh Vertically đúng cách có thể tạo ra sự khác biệt giữa một trang web chuyên nghiệp và một trang web trông một chút... kỳ lạ.

Các Lớp Căn chỉnh Vertically của Bootstrap

Bootstrap, framework CSS gần gũi của chúng ta, cung cấp một bộ các lớp để làm cho căn chỉnh Vertically trở nên dễ dàng. Hãy cùng xem các lớp này và cách sử dụng chúng.

Lớp Căn chỉnh Items

Bootstrap cung cấp các lớp để căn chỉnh các items trong một flex container. Dưới đây là bảng các lớp và hiệu ứng của chúng:

Lớp	Hiệu ứng
.align-items-start	Căn chỉnh items vào đầu của container
.align-items-center	Căn chỉnh items dọc giữa trong container
.align-items-end	Căn chỉnh items vào cuối của container
.align-items-baseline	Căn chỉnh items vào baseline của container
.align-items-stretch	Kéo giãn items để.fill container (mặc định)

Hãy xem chúng trong hành động với một số ví dụ mã:

<div class="d-flex align-items-start" style="height: 200px;">
<div>Start</div>
<div>Aligned</div>
<div>Content</div>
</div>

Trong ví dụ này, chúng ta sử dụng d-flex để tạo một flex container, và align-items-start để căn chỉnh items vào đỉnh của container. style="height: 200px;" chỉ là để cho container của chúng ta có một chút cao để chúng ta có thể thấy hiệu ứng căn chỉnh.

Bây giờ, hãy thử căn chỉnh nội dung của chúng ta:

<div class="d-flex align-items-center" style="height: 200px;">
<div>Centered</div>
<div>Vertically</div>
<div>Aligned</div>
</div>

Thấy dễ dàng thế nào? Chỉ cần thay đổi start thành center, và bây giờ nội dung của chúng ta được căn chỉnh dọc hoàn hảo.

Lớp Căn chỉnh Self

Đôi khi, bạn có thể muốn căn chỉnh các items riêng lẻ khác nhau trong một container. Đó là khi align-self classes trở nên hữu ích. Dưới đây là bảng các lớp:

Lớp	Hiệu ứng
.align-self-start	Căn chỉnh item vào đầu của container
.align-self-center	Căn chỉnh item dọc giữa trong container
.align-self-end	Căn chỉnh item vào cuối của container
.align-self-baseline	Căn chỉnh item vào baseline của container
.align-self-stretch	Kéo giãn item để.fill container (mặc định)

Hãy xem một ví dụ:

<div class="d-flex" style="height: 200px;">
<div class="align-self-start">Start</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">End</div>
</div>

Trong ví dụ này, mỗi div được căn chỉnh khác nhau trong cùng một container. Nó giống như có ba cuốn sách trên kệ, mỗi cuốn ngồi ở một độ cao khác nhau!

Căn chỉnh Vertically với Flexbox Utilities

Bootstrap's flexbox utilities cung cấp thêm nhiều kiểm soát hơn đối với căn chỉnh Vertically. Hãy khám phá một số trong số này.

Lớp Căn chỉnh Nội dung

Những lớp này cho phép bạn căn chỉnh items theo trục chính của một flex container. Dưới đây là bảng các lớp:

Lớp	Hiệu ứng
.justify-content-start	Căn chỉnh items vào đầu của container
.justify-content-center	Căn chỉnh items dọc giữa trong container
.justify-content-end	Căn chỉnh items vào cuối của container
.justify-content-between	Phân phối items đều với khoảng trống giữa
.justify-content-around	Phân phối items đều với khoảng trống xung quanh

Hãy xem một ví dụ:

<div class="d-flex justify-content-center" style="height: 200px;">
<div>Centered</div>
<div>Horizontally</div>
</div>

Điều này sẽ căn chỉnh nội dung của chúng ta theo chiều ngang trong container.

Kết hợp Căn chỉnh Vertically và Horizontally

Bây giờ, hãy xem điều kỳ diệu xảy ra. Chúng ta có thể kết hợp các lớp này để đạt được căn chỉnh hoàn hảo cả Vertically và Horizontally. Hãy kiểm tra này:

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<div>Perfectly</div>
<div>Centered</div>
</div>

Mã này sẽ tạo một container nơi nội dung được căn chỉnh hoàn hảo cả Vertically và Horizontally. Nó giống như bullseye trong dart, nhưng dễ dàng hơn nhiều để đạt được!

Căn chỉnh T响应

Bootstrap sẽ không phải là Bootstrap nếu không có tính năng响应. Bạn có thể làm cho căn chỉnh của bạn响应 bằng cách thêm các tiền tố breakpoint vào các lớp. Ví dụ:

<div class="d-flex align-items-start align-items-sm-center align-items-md-end" style="height: 200px;">
<div>Responsive</div>
<div>Alignment</div>
</div>

Điều này sẽ căn chỉnh nội dung vào đỉnh trên các thiết bị extra small, căn chỉnh giữa trên các thiết bị small, và căn chỉnh vào cuối trên các thiết bị medium và lớn hơn. Nó giống như nội dung của bạn đang làm yoga, co duỗi và kéo giãn để phù hợp với các kích thước màn hình khác nhau!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của Bootstrap vertical alignment, từ các khái niệm cơ bản đến các kỹ thuật nâng cao. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo. Đừng ngại thử nghiệm với các lớp này và xem chúng ảnh hưởng như thế nào đến các bố cục của bạn.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi rằng học Bootstrap giống như học một ngôn ngữ mới. Ban đầu, nó có vẻ đáng sợ, nhưng một khi cô ấy đã làm quen, cô ấy cảm thấy như thể cô ấy có thể truyền đạt ý tưởng thiết kế của mình một cách hiệu quả hơn bao giờ hết.

Vậy hãy tiến lên, các bạn trẻ, và chúc may mắn với sức mạnh của căn chỉnh hoàn hảo! Hãy mã hóa vui vẻ!

Credits: Image by storyset