Col-md-offset là gì

     

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

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

Hôm nay, để đi sâu hơn, họ sẽ 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à một hệ thống lưới và bao gồm nhiều chiếc và những cột, số lượng dòng từng nào tùy nằm trong vào thiết kế của người tiêu dùng nhưng con số cột trên mỗi dòng luôn luôn là 12. Size trong Grid System tính bằng cột, từng cột này sẽ chiếm phần một % tuyệt nhất định form size của layout. Thay vày chỉ định ví dụ kích thước là 200px, 300px, … thì giờ chúng ta sẽ dùng đơn vị chức năng là cột. Số phần % của mỗi cột đã được định nghĩa sẵn vào bootstrap. Câu hỏi của chúng ta bây giờ chỉ đơn giản và dễ dàng là áp dụng nó.

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

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

Grid system hoạt động như cố kỉnh nào?

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

Xem thêm: 3 Sọc Là Gì - Cờ Ba Que Hay Ba Que Xỏ Lá Nghĩa Là Gì


*

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

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

Media queries

Media Queries cũng chính là một công dụng hay mang lại độ tùy phát triển thành cao cho bối cảnh khi có tác dụng Responsive nên mình đưa ra quyết định đưa nào vào bài viết.

Media Queries là khiến cho bạn tùy biến chuyển code CSS ứng với kích thước trình để ý nhất định. Chẳng hạn như bạn phân chia một trang web thành cột với 2 div mà lại khi bạn muốn xem trang web trên máy di độngthì 1 cột đã ẩn đi chỉ với 1 cột thì lúc này bạn có thể dùng truyền thông Queries để làm điều đó.

Xem thêm: Ý Nghĩa Của Icon :)), :V Là Gì ? :V Có Ý Nghĩa Gì

Tuy nhiên, truyền thông media Queries chỉ sử dụng được khi bạn dùng LESS nhằm viết CSS. Nếu chưa biết khái niệm này thì bạn có thể không yêu cầu xem phần này mà hãy tò mò cách dùng LESS viết CSS trước.

Cú pháp của truyền thông 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 & up) */screen-lg-min) ...

Kết

Như vậy, về cơ bạn dạng chúng ta vẫn hiểu được cách thực hiện và làm cụ nào để áp dụng Grid System khi kiến tạo giao diện cho 1 website. Bài sau, tôi vẫn tiếp tục reviews cho các bạn về phần Typography vào bootstrap. Hẹn gặp lại các bạn ở bài xích sau!