Bài trước, tôi đã ra mắt mang lại các bạn về Bootstrap. Nếu vẫn quên, bạn có thể đọc lại tại phía trên.quý khách đang xem: Container-fluid là gì
Bài 1: Bootstrap là gì? Giới thiệu về Bootstrap
Hôm nay, nhằm đi sâu hơn, bọn họ sẽ khám phá về Grid System trong Bootstrap.Quý khách hàng đã xem: Container-fluid là gì
Grid system là gì
Grid System là một hệ thống lưới và bao gồm nhiều dòng với các cột, số lượng mẫu bao nhiêu tùy thuộc vào kiến thiết của bạn tuy nhiên số lượng cột trên mỗi loại luôn luôn luôn là 12. Kích thước vào Grid System tính bằng cột, từng cột này đã chiếm một % nhất mực form size của layout. Ttuyệt bởi hướng đẫn rõ ràng form size là 200px, 300px, … thời giờ bọn họ đang dùng đơn vị là cột. Số phần % của mỗi cột đã được khái niệm sẵn vào bootstrap.
Bạn đang xem: Container-fluid là gì
Việc của chúng ta hôm nay chỉ đơn giản là áp dụng nó.Vậy thì Cột (Column) và Dòng (Row) ở đấy là gì?
Grid system vận động như vậy nào?
Sử dụng OffsetMột thắc mắc liên tục được đề ra khi có tác dụng giao diện là bạn có nhu cầu một yếu tố như thế nào kia hiển thị cách ra 1 khoảng tầm so với thành phần tê thì sao ?
Nếu giải pháp xử lý bằng phương pháp knhì báo lại quý giá margin cho các col thì sẽ dẫn mang lại bối cảnh sẽ không hề đúng chuẩn nữa. Trong ngôi trường thích hợp này chúng ta cần knhì báo thêm class: : là quý giá từ là 1 cho 12.Ví dụ: col-md-offset-4 Tức là cột này sẽ thụt vào trong 1 khoảng tầm bằng 4 col md.
div class="row"> div class="col-md-4">.col-md-4div> div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4div>div>div class="row"> div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3div> div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3div>div>div class="row"> div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3div>div>Kết trái hiển thị sẽ được như sau:
Media queries
Tuy nhiên, Media Queries chỉ thực hiện được khi bạn sử dụng LESS nhằm viết CSS. Nếu chưa chắc chắn quan niệm này thì chúng ta có thể không nên coi phần này nhưng mà hãy mày mò cách Dùng LESS viết CSS trước.
Cú pháp của Media Queries dạng nhỏng sau:
/* Extra small devices (phones, less than 768px) *//* No truyền thông query since this is the default in Bootstrap *//* Small devices (tablets, 768px & up) */screen-lg-min) ...
