Hãy sử dụng hệ thống lưới flexbox mạnh mẽ, ưu tiên cho thiết bị di động của chúng tôi để xây dựng các bố cục ở mọi hình dạng và kích thước nhờ vào một hệ thống 12 cột, sáu tầng responsive mặc định, các biến và các mixin của Sass, và hàng tá class đã được định nghĩa trước.
Ví dụ:
Hệ thống lưới của Bootstrap sử dụng một loạt các container, row, và column để bố trí và căn chỉnh nội dung. Nó được xây dựng bằng flexbox và hoàn toàn là responsive. Bên dưới là một ví dụ và một sự giải thích rất chi tiết về cách hệ thống lưới kết hợp với nhau.
Ví dụ bên trên sẽ tạo ra ba cột có chiều rộng bằng nhau trên tất cả các thiết bị và viewport bằng cách sử dụng các class lưới đã được định nghĩa trước của chúng tôi. Các cột đó được căn giữa trong trang với phần tử cha là .container.
Cách nó làm việc
Chia nhỏ nó ra, đây là cách hệ thống lưới kết hợp với nhau:
- Hệ thống lưới của chúng tôi hỗ trợ sáu responsive breakpoint. Các breakpoint thì dựa trên min-width media query, có nghĩa là chúng ảnh hưởng đến breakpoint đó và tất cả các breakpoint bên trên nó (ví dụ, .col-sm-4 áp dụng cho sm, md, lg, xl, và xxl). Điều này có nghĩa là bạn có thể kiểm soát container và kích thước của cột và cách hoạt động bởi mỗi breakpoint.
- Các container đặt nội dung của bạn vào giữa và đệm nội dung đó theo chiều ngang. Hãy sử dụng .container cho một chiều rộng tính bằng pixel, .container-fluid cho chiều rộng: 100% trên tất cả các viewport và thiết bị, hoặc một responsive container (ví dụ, .container-md) cho một sự kết hợp của fluid và chiều rộng được tính bằng pixel.
- Row là cái bao bọc bên ngoài cho các column. Mỗi column đều có padding theo chiều ngang (được gọi là gutter) để kiểm soát không gian giữa chúng. Padding này sau đó được trung hòa trên row với giá trị margin âm để bảo đảm rằng nội dung trong các column của bạn được căn chỉnh trực quan xuống cạnh bên trái. Row cũng hỗ trợ các modifier class để áp dụng giống nhau kích thước column và các gutter class để thay đổi khoảng cách của nội dung của bạn.
- Các column thì linh hoạt đến nỗi không ngờ. Có 12 column mẫu có sẵn cho mỗi row, cho phép bạn tạo ra các sự kết hợp khác nhau của các phần tử, cho phép bạn nhóm bất kỳ số lượng column nào lại với nhau. Các column class cho biết số lượng column mẫu để nhóm lại với nhau (ví dụ, col-4 sẽ nhóm bốn column mẫu lại với nhau). Chiều rộng được thiết lập bằng giá trị phần trăm vì vậy bạn luôn luôn có cùng một kích thước tương đối.
- Gutter cũng là responsive và có thể tùy chỉnh. Các gutter class thì có sẵn trên tất cả các breakpoint, với tất cả cùng một kích thước giống nhau như khoảng cách margin và padding của chúng tôi. Thay đổi các gutter theo chiều ngang với các .gx-* class, thay đổi các gutter theo chiều dọc với các .gy-* class, hoặc thay đổi tất cả các gutter với các .g-* class. .g-0 thì cũng có sẵn để loại bỏ các gutter.
- Các biến, các map, và các mixin của Sass cung cấp sức mạnh cho hệ thống lưới. Nếu như bạn không muốn sử dụng các class lưới được định nghĩa trước của Bootstrap, thì bạn có thể sử dụng mã nguồn Sass của chúng tôi để tạo ra các class lưới của riêng mình với nhiều đánh dấu ngữ nghĩa hơn. Chúng tôi cũng bao gồm một số thuộc tính CSS tùy chỉnh để dùng các biến Sass này nhằm mang lại sự linh hoạt hơn nữa cho bạn.
Hãy có kiến thức về sự hạn chế và bug xung quanh flexbox, như không có khả năng sử dụng một số phần tử HTML như là các flex container.
Grid options
Hệ thống lưới của Bootstrap có thể thích ứng với cả sáu breakpoint mặc định, và bất kỳ breakpoint nào mà bạn tùy chỉnh. Sáu tầng lưới mặc định như sau:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
Như đã lưu ý ở trên, mỗi breakpoint này đều có container của riêng chúng, class prefix duy nhất, và các bổ ngữ. Sau đây là cách hệ thống lưới thay đổi trên các breakpoint này:
Các cột tự động bố trí
Chiều rộng bằng nhau
Ví dụ, đây là hai bố cục lưới áp dụng cho mọi thiết bị và viewport, từ xs đến xxl. Hãy thêm bất kỳ số lượng class không có đơn vị nào vào cho mỗi breakpoint bạn cần và mọi column sẽ có chiều rộng giống hệt nhau.
Thiết lập chiều rộng cho một column
Tính năng bố cục tự động cho các cột của lưới flexbox cũng có nghĩa là bạn có thể thiết lập chiều rộng của một cột và để các cột anh em của nó tự động thay đổi kích thước quanh nó. Bạn có thể sử dụng các class lưới được định nghĩa trước, các mixin, hoặc các chiều rộng được chỉ định trên phần tử. Lưu ý rằng các cột khác sẽ thay đổi kích thước mà không quan trọng chiều rộng của cột ở giữa.
Nội dung có chiều rộng hay thay đổi
Hãy sử dụng các class có dạng col-{breakpoint}-auto để chỉ định kích thước của các cột dựa vào chiều rộng tự nhiên của nội dung của chúng.
Responsive classes
Hệ thống lưới của Bootstrap bao gồm sáu tầng của các class được định nghĩa trước để xây dựng các responsive layout phức tạp. Nó tùy chỉnh kích thước của các cột của bạn trên các thiết bị cực nhỏ, nhỏ, trung bình, lớn, hoặc cực lớn bằng bất cứ cách nào bạn thấy phù hợp.
Tất cả các breakpoint
Đối với các lưới giống nhau từ các thiết bị nhỏ nhất đến lớn nhất, hãy sử dụng các class .col và .col-*. Chỉ định một class được đánh số khi bạn cần một cột có kích thước đặc biệt; nếu không thì, hãy thoải mái sử dụng .col.
Xếp chồng lên nhau theo chiều ngang
Bằng cách sử dụng một tập hợp các class có dạng .col-sm-*, bạn có thể tạo ra một hệ thống lưới cơ bản bắt đầu được xếp chồng lên nhau và trở thành nằm ngang tại small breakpoint (sm).
Pha trộn và kết hợp
Bạn không muốn các cột của mình chỉ xếp chồng lên nhau trên một số tầng lưới? Hãy sử dụng một sự kết hợp của các class khác nhau cho mỗi tầng nếu cần. Hãy xem ví dụ bên dưới để hiểu rõ hơn về cách thức hoạt động của tất cả chúng.
Các cột của hàng
https://getbootstrap.com/docs/5.3/layout/grid/#row-columns
