Bootstrap - Grid Demo

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 sâu vào thế giới kỳ diệu của hệ thống lưới Bootstrap. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ hướng dẫn bạn từng bước trong hành trình này. Vậy, hãy mang theo mũ bảo hiểm ảo của bạn, và chúng ta cùng bắt đầu xây dựng nào!

Grid là gì?

Trước khi chúng ta nhảy vào hệ thống lưới của Bootstrap, hãy nói về lưới nói chung. Hãy tưởng tượng bạn đang nhìn vào một bàn cờ vua. Đó là một lưới! Nó là một chuỗi các đường ngang và dọc giao nhau tạo ra một bố cục có cấu trúc. Trong thiết kế web, một lưới có mục đích tương tự - nó giúp chúng ta tổ chức nội dung trên một trang web một cách ngăn nắp,有序.

Phép màu của các lưới web

Trong những ngày đầu của thiết kế web (khi mà các con khủng long vẫn lang thang trên internet), việc sắp xếp một trang web giống như cố gắng xây dựng một ngôi nhà bằng gelatin - bẩn thỉu và không thể đoán trước. Nhưng sau đó, lưới đã xuất hiện, và đột nhiên, chúng ta có một nền tảng vững chắc để làm việc.

Một lưới web thường bao gồm:

Cột: Các phân chia dọc của trang
Hàng: Các phân chia ngang của trang
Khe: Các khoảng trống giữa các cột và hàng

Hãy tưởng tượng nó như một kế hoạch thành phố số, nơi mỗi tòa nhà (phần tử nội dung) có vị trí chỉ định của mình (ô lưới).

Cách hoạt động của hệ thống lưới Bootstrap

Bây giờ chúng ta đã hiểu{lưới là gì}, hãy cùng khám phá hệ thống lưới của Bootstrap. Nó giống như chiếc dao đa năng của các công cụ bố cục web - linh hoạt, đáng tin cậy và rất hữu ích!

Kỳ diệu của 12 cột

Hệ thống lưới của Bootstrap dựa trên một bố cục 12 cột. Tại sao lại là 12, bạn hỏi? Đó là vì nó chia hết cho 2, 3, 4 và 6, điều này cho phép chúng ta tạo ra nhiều bố cục khác nhau. Nó giống như việc có một chiếc pizza mà bạn có thể dễ dàng cắt thành đôi, ba phần hoặc bốn phần - yum!

Hãy xem một ví dụ cơ bản:

<div class="container">
<div class="row">
<div class="col-md-6">Cột 1</div>
<div class="col-md-6">Cột 2</div>
</div>
</div>

Trong đoạn mã này:

container tạo một container có độ rộng cố định và căn giữa cho nội dung của chúng ta.
row thiết lập một nhóm cột ngang.
col-md-6 tạo hai cột có độ rộng bằng nhau trên màn hình cỡ trung và lớn hơn.

Khi bạn chạy đoạn mã này, bạn sẽ thấy hai cột bên nhau, mỗi cột chiếm nửa宽度 của container. Nó giống như việc chia bánh sandwich với bạn - hoàn hảo!

Thiết kế响应式: Một kích thước không phù hợp với tất cả

Một trong những điều tuyệt vời nhất về hệ thống lưới của Bootstrap là tính响应式. Nó giống như việc có một website biến đổi màu sắc để phù hợp với môi trường xung quanh!

Hãy cải thiện ví dụ trước:

<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">Cột 1</div>
<div class="col-sm-12 col-md-6 col-lg-4">Cột 2</div>
<div class="col-sm-12 col-md-12 col-lg-4">Cột 3</div>
</div>
</div>

Đoạn mã này tạo ra một bố cục thay đổi theo kích thước màn hình:

Trên màn hình nhỏ (sm), mỗi cột chiếm toàn bộ chiều rộng (12 cột).
Trên màn hình cỡ trung (md), hai cột đầu chia sẻ chiều rộng, trong khi cột thứ ba chiếm toàn bộ chiều rộng.
Trên màn hình lớn (lg), tất cả ba cột chia sẻ chiều rộng bằng nhau.

Nó giống như việc có một website có thể thay đổi hình dạng! ?

N nesting: Lưới trong lưới

Ngay khi bạn nghĩ rằng nó không thể tuyệt vời hơn, Bootstrap cho phép bạn đặt lưới trong lưới. Nó giống như việc chơi với các búp bê Nga, nhưng thú vị hơn!

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

<div class="container">
<div class="row">
<div class="col-md-9">
Cấp độ 1: .col-md-9
<div class="row">
<div class="col-md-6">Cấp độ 2: .col-md-6</div>
<div class="col-md-6">Cấp độ 2: .col-md-6</div>
</div>
</div>
</div>
</div>

Điều này tạo ra một cột chiếm 9/12 của chiều rộng, và trong đó, chúng ta có hai cột bằng nhau. Nó giống như sự nhập vai, nhưng với lưới!

Đẩy cột: Nghệ thuật khoảng cách

Đôi khi, bạn cần thêm một chút không gian cho bố cục của mình. Đó là khi việc đẩy cột trở nên hữu ích. Nó giống như khoảng cách xã hội cho các phần tử web của bạn!

<div class="container">
<div class="row">
<div class="col-md-4">Cột 1</div>
<div class="col-md-4 offset-md-4">Cột 2</div>
</div>
</div>

Đoạn mã này tạo ra hai cột với một khoảng cách giữa chúng. Class offset-md-4 đẩy cột thứ hai sang phải bằng 4 cột. Đây là một cách tuyệt vời để tạo ra các bố cục trực quan!

Bảng备忘录 các phương thức lưới

Dưới đây là bảng备忘录 các phương thức lưới phổ biến nhất trong Bootstrap:

Phương thức	Mô tả
.container	Tạo một container có độ rộng cố định và căn giữa
.container-fluid	Tạo một container có 全宽
.row	Tạo một nhóm cột ngang
.col-*	Tạo một cột (* có thể là sm, md, lg, xl)
.offset-*	Đẩy cột sang phải
.order-*	Thay đổi thứ tự trực quan của cột

Nhớ rằng, thực hành là cách tốt nhất để trở thành thạo! Đừng ngại thử nghiệm với các phương thức này và tạo ra bố cục độc đáo của riêng bạn.

Tóm lại, hệ thống lưới của Bootstrap giống như một siêu năng lực cho các nhà phát triển web. Nó cho phép chúng ta tạo ra các bố cục linh hoạt,灵活 với dễ dàng. Khi bạn tiếp tục hành trình trong lĩnh vực phát triển web, bạn sẽ thấy mình thường xuyên sử dụng công cụ này.

Vậy, tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Ai biết được, website tiếp theo lớn có thể chỉ cách một lưới. Chúc may mắn, các phù thủy web tương lai! ?‍♂️?

Credits: Image by storyset