Bootstrap - Hệ thống Lưới: Hướng dẫn Dễ Dàng 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ẽ bắt đầu một hành trình thú vị vào thế giới của Hệ thống Lưới Bootstrap. Đừ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ẽ ở đây cùng bạn, giải thích mọi thứ từng bước một. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng nhảy vào!

Hệ thống Lưới Bootstrap là gì?

Trước khi chúng ta bắt đầu, hãy để tôi kể cho bạn một câu chuyện ngắn. Hãy tưởng tượng bạn đang cố gắng sắp xếp kệ sách của mình. Bạn muốn sắp xếp sách một cách ngăn nắp, nhưng chúng lại có kích thước khác nhau. Thật khó khăn, phải không? Hệ thống Lưới Bootstrap chính là như một kệ sách ma thuật tự động sắp xếp nội dung của bạn, bất kể kích thước hoặc hình dạng của nó!

Trong thiết kế web, Hệ thống Lưới là một công cụ布局 mạnh mẽ giúp bạn tạo ra các trang web responsive và có cấu trúc tốt. Nó giống như có một trợ lý cá nhân sắp xếp nội dung trang web của bạn một cách hoàn hảo, dù được xem trên màn hình máy tính để bàn lớn hay màn hình điện thoại nhỏ.

Ví dụ Cơ bản

Hãy bắt đầu với một ví dụ đơn giản để làm quen. Đây là cấu trúc cơ bản của Hệ thống Lưới Bootstrap:

<div class="container">
<div class="row">
<div class="col-sm">
Một trong ba cột
</div>
<div class="col-sm">
Một trong ba cột
</div>
<div class="col-sm">
Một trong ba cột
</div>
</div>
</div>

Đang xảy ra điều gì ở đây? Hãy phân tích:

1. Chúng ta bắt đầu với lớp container. Đây giống như hộp ngoài cùng chứa mọi thứ.
2. Bên trong container, chúng ta có lớp row. Hãy tưởng tượng này như một kệ trong ví dụ kệ sách.
3. Bên trong row, chúng ta có ba lớp col-sm. Đây là những cuốn sách của chúng ta, nằm cạnh nhau trên kệ.

Cách 它运作

Hệ thống Lưới Bootstrap dựa trên một bố cục 12 cột. Tại sao lại là 12? Đó là một con số kỳ diệu trong thiết kế web vì nó chia hết cho 1, 2, 3, 4 và 6, mang lại cho chúng ta nhiều sự linh hoạt!

Dưới đây là biểu đồ trực quan:

1	2	3	4	5	6	7	8	9	10	11	12
Cột	Cột	Cột	Cột	Cột	Cột	Cột	Cột	Cột	Cột	Cột	Cột

Mỗi cột này có thể được kết hợp để tạo ra các khu vực nội dung rộng hơn. Ví dụ, bạn có thể có một bố cục với hai cột mỗi cột 6 đơn vị, hoặc ba cột mỗi cột 4 đơn vị. Nó giống như chơi với các khối xây dựng!

Cột Tự Động

Bây giờ, hãy xem một số mẹo hay. Bootstrap có thể tự động xử lý chiều rộng cột cho bạn. Hãy xem xét:

<div class="container">
<div class="row">
<div class="col">
1 của 2
</div>
<div class="col">
2 của 2
</div>
</div>
<div class="row">
<div class="col">
1 của 3
</div>
<div class="col">
2 của 3
</div>
<div class="col">
3 của 3
</div>
</div>
</div>

Trong ví dụ này, chúng ta không chỉ định chiều rộng cột. Bootstrap thông minh đủ để chia đều không gian giữa các cột. Nó giống như có một robot sắp xếp kệ sách cho bạn!

Cột Cùng Chiều Rộng

Muốn tất cả các cột có cùng chiều rộng, bất kể nội dung? Dễ ợt!

<div class="container">
<div class="row">
<div class="col">
1 của 3
</div>
<div class="col">
2 của 3 (rộng hơn)
</div>
<div class="col">
3 của 3
</div>
</div>
</div>

Dù cột giữa có nhiều nội dung hơn, tất cả ba cột sẽ vẫn giữ cùng chiều rộng. Nó giống như có những cuốn sách giãn nở để luôn phù hợp với kệ!

Đặt Chiều Rộng Cột

Đôi khi, bạn muốn một cột có chiều rộng cụ thể và để các cột khác tự điều chỉnh. Đây là cách làm:

<div class="container">
<div class="row">
<div class="col">
1 của 3
</div>
<div class="col-6">
2 của 3 (rộng hơn)
</div>
<div class="col">
3 của 3
</div>
</div>
</div>

Trong trường hợp này, cột giữa sẽ chiếm 6 đơn vị (nửa rộng), và hai cột còn lại sẽ chia đều không gian còn lại.

Nội dung Chiều Rộng Thay Đổi

Nếu bạn muốn một cột điều chỉnh chiều rộng dựa trên nội dung của nó, Bootstrap cũng có thể giúp bạn:

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 của 3
</div>
<div class="col-md-auto">
Nội dung chiều rộng thay đổi
</div>
<div class="col col-lg-2">
3 của 3
</div>
</div>
</div>

Lớp col-md-auto cho phép cột đó giãn hoặc thu nhỏ dựa trên nội dung của nó. Nó giống như một cuốn sách có thể thay đổi kích thước để phù hợp với các cuốn sách lân cận!

Lớp Responsive

Bây giờ, hãy nói về việc làm cho bố cục của chúng ta responsive. Bootstrap sử dụng các điểm breakpoints để điều chỉnh bố cục dựa trên kích thước màn hình. Dưới đây là các breakpoint chính:

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Tất Cả Các Breakpoints

Dưới đây là cách sử dụng các breakpoint:

<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

Bố cục này sẽ giữ nguyên trên tất cả các kích thước màn hình. Nó giống như một kệ sách trông như nhau dù bạn nhìn từ xa hay gần!

Đ.Stacked to Horizontal

Nhưng nếu chúng ta muốn bố cục thay đổi dựa trên kích thước màn hình? Hãy xem:

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

Trên màn hình nhỏ và lớn hơn, các cột này sẽ nằm cạnh nhau. Trên màn hình extra small, chúng sẽ chồng叠 vertically. Nó giống như một kệ sách có thể biến thành tháp sách khi không gian hẹp!

Trộn Lẫn và Kết Hợp

Bạn cũng có thể trộn lẫn và kết hợp kích thước cột cho các kích thước màn hình khác nhau:

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

Bố cục này sẽ trông khác nhau trên màn hình nhỏ so với màn hình trung bình và lớn hơn. Nó giống như một kệ sách có thể thay đổi hình dạng!

Cột Trong Row

Muốn tạo ra các cột có cùng chiều rộng nhanh chóng? Sử dụng cột trong row:

<div class="container">
<div class="row row-cols-2">
<div class="col">Cột</div>
<div class="col">Cột</div>
<div class="col">Cột</div>
<div class="col">Cột</div>
</div>
</div>

Điều này tạo ra một row với hai cột, bất kể số lượng col div bạn có. Nó giống như một kệ sách luôn sắp xếp sách thành đôi!

Nests

Cuối cùng, bạn có thể nests lưới trong lưới:

<div class="container">
<div class="row">
<div class="col-sm-3">
Cấp 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Cấp 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Cấp 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

Điều này tạo ra một lưới trong lưới. Nó giống như có những kệ sách nhỏ trong một kệ sách lớn!

Và thế là bạn đã bước những bước đầu tiên vào thế giới của Hệ thống Lưới Bootstrap. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo. Hãy thử chơi với các ví dụ này, trộn lẫn và kết hợp các lớp khác nhau, và xem会发生什么. Trước khi bạn biết điều đó, bạn sẽ tạo ra những bố cục đẹp mắt, responsive như một chuyên gia!

Chúc các bạn may mắn và mong rằng các trang web của bạn luôn được tổ chức hoàn hảo!

Credits: Image by storyset