container-fluid bootstrap 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 khả năng đọ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 thông tin về Grid System trong Bootstrap.

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à 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.

Grid system vận hành như thế nào?

Mỗi một hàng, phải được bao bọc bởi class .container hoặc .container-fluid để canh giữa và cách khoảng cách lề.Mỗi một hàng gồm các nhóm cột.Nội dung nằm trong cột, mỗi cột khả năng chứa 12 cột con khác.Giữa các cột sẽ có khoảng padding. Khoảng padding của cột đầu và cuối sẽ được quy định bởi .rows.Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau. Ví dụ ta có lớp .col-md- sẽ không hiển thị đúng cột nếu màn hình cỡ lớn và .col-lg- sẽ không áp dụng nếu bạn đang xem bằng màn hình cỡ vừa.

Xem thêm: Mfg Là Gì

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 tổng giá trị margin cho các col thì sẽ kéo theo 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à tổng 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 đem 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.

Media Queries là giúp bạn tùy biến code CSS ứng với kích thước trình duyệt nhất định. Chẳng hạn như bạn chia một trang web thành cột với 2 div nhưng khi bạn muốn xem trang web trên thiết bị di độngthì 1 cột sẽ ẩn đi chỉ còn 1 cột thì lúc này bạn khả năng dùng Media Queries để làm điều đó.

Xem thêm: Space Là Gì Coworking Là Gì

mặc khác, Media Queries chỉ 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 khả năng 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 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!

Chuyên mục: Hỏi Đáp