Bootstrap Grid cung cấp một cách dễ dàng và mạnh mẽ để tạo các trang web cục bộ thích ứng với mọi hình dạng và kích thước. Nó được xây dựng bằng flexbox với cách tiếp cận thiết bị di động ưu tiên. Ngoài ra, nó hoàn toàn trả lời câu hỏi và sử dụng hệ thống mười hai cột (12 cột có sẵn trên mỗi hàng) và sáu cấp độ phản hồi mặc định Show
Bạn có thể sử dụng các lớp được xác định trước của Bootstrap để nhanh chóng tạo ra một tổ chức cục bộ cho các loại thiết bị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay, máy tính để bàn, v.v. v. Ví dụ. bạn có thể sử dụng các lớp Tương tự như vậy, bạn có thể sử dụng các lớp Bảng sau đây tóm tắt các tính năng chính của Bootstrap Grid Đặc trưng Bootstrap Grid SystemX-Small (xs)<576pxSmall (sm)≥576pxMedium (md)≥768pxLarge (lg)≥992pxX-Large (xl)≥1200pxXX-Large (xxl)≥1400pxContainer max-widthNone (auto)540px720px960px1140px1320pxClass prefix Bảng trên cho thấy một điều quan trọng, việc áp dụng bất kỳ lớp Tương tự như vậy, lớp Bây giờ câu hỏi đặt ra là làm thế nào để tạo hàng và cột bằng cách sử dụng hệ thống lưới thích ứng 12 cột này. Câu trả lời khá đơn giản, lúc đầu hãy tạo một container hoạt động như một trình bao bọc cho các hàng và cột của bạn bằng cách sử dụng bất kỳ lớp container nào Các cột là khu vực nội dung thực tế nơi chúng ta sẽ đặt nội dung của mình. Trong các phần sau, chúng tôi sẽ đưa tất cả những thứ này vào hành động thực tế và xem nó thực sự hoạt động như thế nào Tạo hai cột cục bộVí dụ sau sẽ hướng dẫn bạn cách sắp xếp cục bộ hai cột cho các thiết bị vừa, lớn và cực lớn như máy tính bảng, máy tính xách tay và máy tính để bàn, v. v. Tuy nhiên, trên điện thoại di động ( chiều rộng màn hình nhỏ hơn 768px), các cột sẽ tự động trở thành chiều ngang (2 hàng , 1 cột) Lưu ý. Trong lưới bố cục dạng lưới, nội dung phải được đặt bên trong các cột (9 và mẹo. Chiều rộng cột lưới được đặt theo Tỷ lệ phần trăm, vì vậy chúng luôn hoạt động và có kích thước tương ứng với phần tử cha của chúng. Ngoài ra, mỗi cột có phần đệm ngang (được gọi là máng xối) để kiểm tra không gian giữa các cột riêng lẻ Vì Bootstrap Grid dựa trên 12 cột, do đó để giữ các cột trong một hàng (tức là nằm cạnh nhau trên một hàng), tổng số cột của lưới trong một hàng không lớn hơn 12. Nếu bạn xem qua ví dụ về mã ví dụ một cách thận trọng, bạn sẽ thấy tổng số cột của lưới (tức là Tạo ba cột cục bộTương tự, bạn có thể tạo các bố cục cục bộ khác dựa trên nguyên tắc trên. Ví dụ, ví dụ sau thường sẽ tạo bố cục ba cột cho màn hình máy tính xách tay và máy tính để bàn. Nó hoạt động trong bảng máy tính ở chế độ ngang nếu độ phân giải màn hình lớn hơn hoặc bằng 992 pixel (ví dụ:. Apple ipad). Tuy nhiên, ở chế độ dọc, các cột lưới sẽ nằm ngang như bình thường Lưu ý. Nếu nhiều hơn 12 cột của lưới được đặt trong một hàng, thì tổng thể mỗi nhóm cột bổ sung sẽ nằm trên một dòng mới Sắp xếp các cột tự độngBạn có thể tạo các cột có chiều rộng bằng nhau cho tất cả các thiết bị (x-nhỏ, nhỏ, trung bình, lớn, x-lớn và xx-lớn) chỉ bằng cách sử dụng Lớp Hãy thử ví dụ sau để hiểu cách hoạt động chính xác của nó Ngoài ra, bạn cũng có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó bằng nhau. Bạn có thể sử dụng các lớp lưới được định nghĩa trước hoặc độ rộng nội tuyến Nếu bạn thử ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp Hành vi gói cộtBây giờ chúng ta sẽ tạo các bố cục cục bộ linh hoạt hơn là thay đổi hướng các cột dựa trên kích thước khung nhìn. Ví dụ sau sẽ tạo bố cục ba cột trên các thiết bị lớn như máy tính xách tay và máy tính để bàn, cũng như trên bảng máy tính (ví dụ:. Apple iPad) ở chế độ ngang, nhưng trên các thiết bị trung bình như bảng tính máy ở chế độ dọc (768px ≤ chiều rộng màn hình <992px), nó sẽ thay đổi cấu trúc hai cột cục bộ trong cột thứ ba di chuyển đó Như bạn có thể thấy trong ví dụ trên, tổng số cột của lưới trung bình (tức là thứ ba với lớp Tương tự, bạn có thể tạo nhiều bố cục cục bộ thích ứng hơn cho các trang web của mình bằng cách sử dụng gói cột lưới tính năng của Bootstrap Tạo nhiều cột cục bộ với BootstrapVới hệ thống lưới flexbox đầu tiên dành cho thiết bị di động Bootstrap, bạn có thể dễ dàng kiểm tra cách bố trí trang web cục bộ của mình sẽ hiển thị trên các loại thiết bị khác nhau có kích thước màn hình hoặc các khung nhìn khác nhau như thế nào. . v. Please view minh họa sau  Trong hình minh họa trên, có tổng cộng 12 hộp nội dung trong tất cả các thiết bị, nhưng vị trí của nó thay đổi tùy theo kích thước màn hình thiết bị, giống như trong thiết bị di động, bố cục được hiển thị bên dưới Hơn nữa, trong các thiết bị có kích thước màn hình lớn như máy tính xách tay và máy tính để bàn, nó được hiển thị dưới dạng lưới bố cục cục bộ 3 cột và 4 hàng và cuối cùng trong các thiết bị có màn hình cực lớn như Bây giờ câu hỏi đặt ra là làm thế nào chúng ta có thể tạo ra các bố cục cục bộ thích ứng như vậy bằng cách sử dụng hệ thống lưới flexbox Bootstrap này. Please started with the main target device. Giả sử mục tiêu chính của thiết bị là máy tính xách tay hoặc máy tính để bàn thông thường. Vì bố cục cục bộ máy tính xách tay của chúng ta có 3 cột và 4 hàng, tức là bố cục lưới 3x4, vì vậy mã HTML để tạo cấu trúc lưới như vậy sẽ trông giống như thế này mẹo. Lớp9 làm cho vùng chứa mở rộng 100% nếu chiều rộng của khung nhìn nhỏ hơn 992px, do đó sử dụng toàn bộ chiều rộng có sẵn trên màn hình nhỏ hơn Nếu bạn thấy đầu ra của ví dụ trên một thiết bị lớn như máy tính xách tay hoặc máy tính để bàn có chiều rộng màn hình hoặc khung nhìn lớn hơn hoặc bằng 1200px nhưng nhỏ hơn 1400px, thì bạn sẽ thấy bố cục cục bộ có 3 hàng Bây giờ đã đến lúc tùy chỉnh bố cục của chúng ta cho các thiết bị khác. Trước tiên, hãy bắt đầu bằng cách tùy chỉnh nó cho các thiết bị trung bình như bảng máy tính (768px ≤ chiều rộng khung nhìn < 1200px). Do trên bảng máy tính, bố cục cục bộ của chúng ta được hiển thị dưới dạng lưới 2x6 (tức là 2 cột và 6 hàng). Vì vậy, hãy tiếp tục và thêm lớp mẹo. Để thuận tiện, hãy chọn mục tiêu chính của bạn và sắp xếp cục bộ cho thiết bị đó trước khi thêm các lớp để làm cho thiết bị thích ứng với các thiết bị khác Tương tự, bạn có thể tùy chỉnh bố cục cục bộ cho các thiết bị cực lớn, chẳng hạn như màn hình máy tính để bàn lớn bằng cách thêm lớp mẹo. Theo hình minh họa trên, không cần thiết phải tùy chỉnh bố cục cho điện thoại di động; Các cột lồng nhauCác cột của Bootstrap Grid cũng có thể lồng vào nhau, có nghĩa là bạn có thể đặt các hàng và cột bên trong một cột hiện có. Tuy nhiên, công thức đặt các cột sẽ giống nhau, tức là cột số phải bằng 12 hoặc nhỏ hơn trong một hàng Tạo các cột có chiều rộng biến đổiBạn có thể sử dụng lớp Edit the columnBạn có thể sử dụng tiện ích căn chỉnh flexbox để chỉnh sửa các cột theo chiều dọc và chiều ngang trong vùng chứa. Hãy thử các ví dụ sau để hiểu cách hoạt động của nó Căn chỉnh theo chiều dọc của cộtBạn có thể sử dụng các lớp Các cột riêng lẻ bên trong một hàng cũng có thể được căn chỉnh theo chiều dọc. This is a ví dụ Lưu ý. Bạn có thể bỏ qua số trong lớp0 và chỉ sử dụng lớp Căn chỉnh theo chiều ngang của cộtBạn có thể sử dụng các lớp Ngoài ra, bạn có thể sử dụng Lớp Sắp xếp thứ tự các cộtThậm chí bạn có thể thay đổi thứ tự trực quan của các cột của mình mà không thay đổi thứ tự của chúng trong mã. Sử dụng lớp Bạn cũng có thể sử dụng các lớp Bù cộtBạn có thể di chuyển các cột bên phải cho mục đích căn chỉnh bằng cách sử dụng các lớp bù cột như Các lớp này bù trừ các cột bằng cách tăng lề trái của nó theo số cột được chỉ định. Ví dụ, lớp Bạn cũng có thể loại trừ các cột bằng cách sử dụng lề tiện ích của các lớp. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không được định nghĩa. This is a ví dụ Lưu ý. Bạn có thể sử dụng lớp3 để tạo các cột chỉ chiếm nhiều không gian khi cần thiết, tức là các cột có kích thước dựa trên nội dung Tạo các cột thu gọnBạn có thể loại bỏ máng xối mặc định giữa các cột để tạo bố cục nhỏ gọn bằng cách thêm lớp Ngắt các cột thành một hàng mớiBạn có thể tạo các cột có chiều rộng bằng cách kéo dài nhiều hàng khác nhau bằng cách chèn thẻ cũng như với lớp Chúng tôi hy vọng bạn đã hiểu những điều cơ bản về Bootstrap 5 Grid mới. Trong vài chương trình tiếp theo, bạn sẽ học cách tổ chức cục bộ trang web cơ bản bằng cách sử dụng hệ thống lưới flexbox này |
