Bootstrap chia bố cục lưới thành tối đa bao nhiêu cột?
Bố cục lưới hai cột cho mọi thiết bịXem ví dụ Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm để thuận tiện cho việc xây dựng bố cục, cùng với đó . Giới thiệuCác hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động:
Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn. Media queryChúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi. Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính Các tùy chọn của lướiHãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau. Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpointsContainer widthNone (auto)750px970px1170pxClass prefix Ví dụ: Chồng theo hàng ngangSử dụng một tập hợp các class .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6 Ví dụ: Fluid containerChuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width bằng cách thay đổi Ví dụ: Điện thoại di động và máy tính để bànBạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu nhỏ và trung bình bằng cách thêm .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6 Ví dụ: Điện thoại, máy tính bảng, máy tính để bànBạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class dành cho máy tính bảng .col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 .col-xs-6 .col-sm-4 Reset cột responsiveKhi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống lưới, bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể sẽ có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử dụng một class .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn. Di chuyển cộtDi chuyển cột sang phía bên phải bằng cách sử dụng các class .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-6 .col-md-offset-3 Các cột lồng nhauĐể tạo ra các cột lồng nhau, Hãy thêm một Level 1: .col-md-9 Level 2: .col-md-6 Level 2: .col-md-6 Thứ tự cộtDễ dàng thay đổi thứ tự của các cột trong hệ thống lưới bằng cách sử dụng các class .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9 Các biến số và mixin LessNgoài để thuận tiện cho việc dựng bố cục một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Less để tạo ra các bố cục ngữ nghĩa đơn giản của riêng bạn. Biến sốCác biến số xác định số lượng cột, độ rộng và mốc kích thước media query. Chúng tôi sử dụng những biến này để tạo ra các class lưới (đã đề cập ở phía trên) cũng như là các mixin được liệt kê bên dưới đây. MixinsMixin được sử dụng để liên kết với các biến số , mục đích là để tạo ra CSS ngữ nghĩa cho các cột riêng lẻ trong hệ thống lưới. Ví dụ áp dụngBạn có thể thay đổi giá trị các biến số về các giá trị tùy biến của riêng bạn, nếu không hãy sử dụng các mixin cùng với các giá trị mặc định của nó.Đây là một ví dụ về việc sử dụng các thiết lập mặc định để tạo ra một bố cục 2 cột với khoảng trắng ở giữa. |
