Bài trước, bản thân đã trình làng cho các bạn về Bootstrap. Nếu vẫn quên, bạn cũng có thể đọc lại trên đây.

Bạn đang xem: Container-fluid là gì

Bạn đã xem: Container-fluid là gì

Bạn đang xem: Container-fluid là gì

Bài 1: Bootstrap là gì? trình làng về Bootstrap

Hôm nay, nhằm đi sâu hơn, chúng ta sẽ mày mò 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 cái và nhiều cột, con số dòng bao nhiêu tùy nằm trong vào thiết kế của công ty nhưng con số cột trên từng dòng luôn luôn luôn là 12. Kích cỡ trong Grid System tính bởi cột, từng cột này sẽ chỉ chiếm một % nhất định kích thước của layout. Thay vì chưng chỉ định rõ ràng kích thước là 200px, 300px, … thì giờ bọn họ sẽ dùng đơn vị là cột. Số phần % của từng cột đã được quan niệm sẵn trong bootstrap. Vấn đề của bọn chúng ta bây giờ chỉ đơn giản dễ dàng là áp dụng nó.

Vậy thì Cột (Column) cùng Dòng (Row) ở đó là gì?

Dòng (row): là khối béo nhất. Khi bọn họ tạo một hàng, nó chiếm toàn thể chiều rộng lớn của thành phần đựng nó.Cột (Column): Vị trí những thành phần theo chiều dọc củ được diễn đạt dựa trên những cột. Duy nhất các cột được để trong hàng, đặt nội dung trực tiếp trong mặt hàng sẽ làm vỡ bố cục.

Grid system chuyển động như cố nào?


*

Sử dụng OffsetMột thắc mắc tiếp tục được đưa ra khi làm giao diện là bạn muốn một yếu tố nào kia hiển thị cách ra 1 khoảng tầm so cùng với thành phần cơ thì sao ?

Nếu xử lý bằng cách khai báo lại cực hiếm margin cho các col thì sẽ dẫn mang lại giao diện sẽ không còn đúng chuẩn nữa. Vào trường hòa hợp này các bạn nên khai báo thêm class: : là giá bán trị từ là một đến 12. protected>

Ví dụ: col-md-offset-4 có nghĩa là cột này đang 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 tác dụng hay đem về độ tùy biến chuyển cao cho đồ họa khi làm cho Responsive yêu cầu mình ra quyết định đưa như thế nào vào bài viết.

Xem thêm: Tiện Lợi Tiếng Anh Là Gì? Phím Dán Tiếng Anh Thông Dụng, Tiện Lợi

Tuy nhiên, truyền thông media Queries chỉ thực hiện được khi chúng ta dùng LESS nhằm viết CSS. Nếu chưa chắc chắn khái niệm này thì chúng ta cũng có thể không bắt buộc xem phần này nhưng hãy khám phá cách cần sử 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 truyền thông media query since this is the default in Bootstrap *//* Small devices (tablets, 768px & 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 cố kỉnh nào để áp dụng Grid System khi xây cất giao diện cho 1 website. Bài xích sau, tôi sẽ tiếp tục giới thiệu cho chúng ta về phần Typography vào bootstrap. Hẹn gặp gỡ lại các bạn ở bài bác sau!Chuyên mục: Hỏi Đáp