Container-fluid là gì
Bài trước, mình đã giới thiệu cho các bạn về Bootstrap. Nếu đã quên, bạn có thể đọc lại tại đây.Bạn đang xem: Container-fluid là gì
Bài 1: Bootstrap là gì? Giới thiệu về Bootstrap
Hôm nay, để đi sâu hơn, chúng ta sẽ tìm hiểu về Grid System trong Bootstrap.
Bạn đang 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à nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout. Thay vì chỉ định rõ ràng kích thước là 200px, 300px, … thì giờ chúng ta sẽ dùng đơn vị là cột. Số phần % của mỗi cột đã được định nghĩa sẵn trong bootstrap. Việc của chúng ta lúc này chỉ đơn giản là sử dụng nó.
Vậy thì Cột (Column) và Dòng (Row) ở đây là gì?
Dòng (row): là khối lớn nhất. Khi chúng ta tạo một hàng, nó chiếm toàn bộ chiều rộng của thành phần chứa nó.Cột (Column): Vị trí các thành phần theo chiều dọc được thể hiện dựa trên các cột. Duy nhất các cột được đặt trong hàng, đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục.Xem thêm: Gợi Ý Cách Tính Chi Phí Thiết Kế Kiến Trúc Nhanh, Chính Xác, Bảng Giá Chi Phí Thiết Kế Nhà
Grid system hoạt động như thế nào?
Sử dụng OffsetMột câu hỏi tiếp tục được đặt ra khi làm giao diện là bạn muốn một thành phần nào đó hiển thị cách ra 1 khoảng so với thành phần kia thì sao ?
Nếu xử lý bằng cách khai báo lại giá trị margin cho các col thì sẽ dẫn đến giao diện sẽ không còn đúng chuẩn nữa. Trong trường hợp này các bạn nên khai báo thêm class: : là giá trị từ 1 đến 12.Ví dụ: col-md-offset-4 tức là cột này sẽ thụt vào trong 1 khoảng 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 quả hiển thị sẽ được như sau:
Media queries
Media Queries cũng là một chức năng hay mang lại độ tùy biến cao cho giao diện khi làm Responsive nên mình quyết định đưa nào vào bài viết.
Xem thêm: Nguyên Nhân Và Cách Mở Khóa Điện Thoại Viettel Dùng Sim Mạng Khác
Tuy nhiên, Media Queries chỉ sử dụng được khi bạn dùng LESS để viết CSS. Nếu chưa biết khái niệm này thì bạn có thể không cần xem phần này mà hãy tìm hiểu cách Dùng LESS viết CSS trước.
Cú pháp của Media Queries dạng như sau:
/* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap *//* Small devices (tablets, 768px and up) */screen-lg-min) { ... }
