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ì

Xem thêm: Đức Phật Như Lai Là Ai ? Phật Tổ Như Lai Và Phật Thích Ca Là Một

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

Kết

Như vậy, về cơ bạn dạng chúng ta đã đọc được giải pháp sử dụng và làm cố nào nhằm vận dụng Grid System lúc xây dựng bối cảnh cho một website. Bài sau, tôi sẽ tiếp tục ra mắt mang lại các bạn về phần Typography vào bootstrap. Hẹn gặp gỡ lại chúng ta sống bài sau!

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *