Bài trước, mình đã trình làng đến chúng ta về Bootstrap. Nếu đã quên, chúng ta có thể đọc lại tại đây.quý khách đã xem: Col-md-offset là gì

Bài 1: Bootstrap là gì? Giới thiệu về Bootstrap

Hôm nay, để đi sâu hơn, bọn họ đang mày mò về Grid System vào Bootstrap.

Bạn đang xem: Col-md-offset là gì

Grid system là gì

Grid System là 1 khối hệ thống lưới với bao gồm những dòng cùng các cột, số lượng dòng bao nhiêu tùy thuộc vào xây đắp của người sử dụng cơ mà số lượng cột trên mỗi mẫu luôn luôn luôn luôn là 12. Kích thước vào Grid System tính bằng cột, mỗi cột này đã chiếm phần một % nhất định kích thước của layout. Ttuyệt vày hướng dẫn và chỉ định cụ thể form size là 200px, 300px, … thì giờ họ vẫn dùng đơn vị chức năng là cột. Số phần % của mỗi cột đã làm được khái niệm sẵn trong bootstrap. Việc của họ hôm nay chỉ đơn giản và dễ dàng là sử dụng nó.

Vậy thì Cột (Column) cùng Dòng (Row) làm việc đấy là gì?

Dòng (row): là kân hận lớn số 1. Lúc chúng ta sản xuất một hàng, nó chiếm tổng thể chiều rộng lớn của yếu tắc đựng nó.Cột (Column): Vị trí những yếu tố theo chiều dọc được trình bày dựa trên các cột. Duy tuyệt nhất những cột được đặt trong mặt hàng, đặt câu chữ trực tiếp trong hàng vẫn làm vỡ tung bố cục tổng quan.

Xem thêm: Quân Ap Cao Bao Nhiêu

Grid system hoạt động như thế nào?


*

Sử dụng OffsetMột câu hỏi liên tục được đề ra Lúc có tác dụng giao diện là bạn có nhu cầu một nhân tố như thế nào đó hiển thị cách ra 1 khoảng đối với yếu tắc cơ thì sao ?

Nếu xử trí bằng phương pháp khai báo lại quý giá margin cho các col thì vẫn dẫn mang lại hình ảnh sẽ không thể chính xác nữa. Trong trường thích hợp này chúng ta buộc phải khai báo thêm class: : là cực hiếm từ là 1 đến 12.Ví dụ: col-md-offset-4 có nghĩa là cột này đang thụt vào trong 1 khoảng chừng bởi 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 nlỗi sau:

Media queries

Media Queries cũng là một trong tác dụng tốt mang lại độ tùy biến hóa cao mang đến giao diện Khi có tác dụng Responsive cần mình ra quyết định chuyển làm sao vào bài viết.

Tuy nhiên, Media Queries chỉ thực hiện được khi chúng ta sử dụng LESS để viết CSS. Nếu chưa chắc chắn tư tưởng này thì bạn có thể không bắt buộc xem phần này mà hãy khám phá giải pháp Dùng LESS viết CSS trước.

Cú pháp của Media Queries dạng nlỗi sau:

/* Extra small devices (phones, less than 768px) *//* No truyền thông query since this is the mặc định in Bootstrap *//* Small devices (tablets, 768px và up) */screen-lg-min) ...

Kết

Như vậy, về cơ bạn dạng bọn họ sẽ đọc được bí quyết thực hiện và có tác dụng gắng làm sao để áp dụng Grid System lúc xây cất đồ họa cho một website. Bài sau, tôi đang thường xuyên ra mắt mang đến các bạn về phần Typography vào bootstrap. Hẹn gặp lại chúng ta sinh hoạt 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 *