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)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) { ... }

Kết

Như vậy, về cơ bản chúng ta đã hiểu được cách sử dụng và làm thế nào để áp dụng Grid System khi thiết kế giao diện cho một website. Bài sau, tôi sẽ tiếp tục giới thiệu cho các bạn về phần Typography trong bootstrap. Hẹn gặp lại các bạn ở bài sau!