Col-md-offset là gì

     

Bootstrap là một khung framework frontend được sử dụng rộng rãi nhất hiện nay. Khi kể đến xây dựng trang web reponsive và apps chính là lựa chọn trước tiên của các chuyên gia và tình nhân thích vì chưng nó rất dễ dàng để làm cho việc. Bất kể ai biết HTML, CSS và một chút JavaScript hoàn toàn có thể học Bootstrap trong thời gian ngắn.

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

Đang xem: Col-md-offset là gì

Trong nội dung bài viết này chúng ta sẽ bao gồm các khối hệ thống lưới, trong những khái niệm cơ phiên bản mỗi nhà cách tân và phát triển Bootstrap đề xuất nắm vững. Nó mang lại phép họ tạo ra bố cục trang đáp ứng nhu cầu mà tất cả thể đổi khác và ưng ý ứng tùy ở trong vào size màn hình của thiết bị tín đồ sử dụng.

1. Hàng với cột

Các lưới điện bao hàm hàng với cột. Điều này cho phép chúng ta thoải mái đặt những yếu tố theo theo hướng dọc và chiều ngang.

Hàng là khối. Điều này còn có nghĩa, khi bọn họ tạo ra một hàng, nó chiếm toàn bộ chiều rộng của bộ phận đó . Bạn có thể nghĩ rằng các hàng như là dòng mới vào cách sắp xếp của bạn.

Các link ngang trong lưới điện được thực hiện thông qua những cột. Chỉ có những cột hoàn toàn có thể là con của một mặt hàng và tất cả các nội dung buộc phải ở bên phía trong chúng. Ví như Đặt nội dung trong một hàng vẫn phá vỡ bố cục tổng quan của chúng.

Xem thêm: Pháp Luật Quy Định Như Thế Nào Về Tội Ngộ Sát Là Gì Và Ngộ Sát Có Phải Chịu Tội?

ở vd bên dưới đây: khi đặt nội dung vào row(hàng ở đây là sai pá vỡ bố cục của bootstrap)

div class=“row“> Some content div>

ở lấy ví dụ như này :Khi đặt nội dung ở trong cột nhưng mà cột là bé của sản phẩm là đúng với cha cụ của bootstrap

div class=“row“> div class=“col-md-12“>Content Goes Herediv> div>

– Chú ý

Hàng và cột bao gồm một quan hệ đặc biệt. Cột gồm padding trái và đề nghị là 15px làm thế nào cho nội dung của chúng có khoảng cách đều nhau một biện pháp đúng đắn. Mặc dù nhiên, điều đó đẩy câu chữ cột thứ nhất và sau cuối là 15px từ cha(parent) của nó. Để bù lại, hàng tất cả margin trái với margin đề nghị là -15px. Đây là nguyên nhân tại sao bạn nên đặt những cột trong hàng.

2. Hàng được tạo thành 12 phần

Hàng được phân thành 12 phần bằng nhau. Khi chúng ta đặt một cột trong một hàng, bọn họ phải xác định số lượng của các bộ phận nó đang chiếm.

Điều này được thực hiện bằng phương pháp áp dụng một lớp cụ thể .col-md-NUMBER, NUMBER là một số nguyên từ là 1 đến 12. Tùy thuộc vào số lượng, một cột sẽ chiếm phần một tỷ lệ xác suất của chiều rộng của hàng : 6 cột sẽ là 1/2 (6/12), 3 đang là 25% (3/12) … Ví dụ tiếp sau đây sẽ tạo nên mọi việc cụ thể hơn.

vd:

div class=“row“> div class=“col-md-12“>Full width 100%div> div> div class=“row“> div class=“col-md-3“>25%div> div class=“col-md-3“>25%div> div class=“col-md-6“>50%div> div>

3. Cột

chúng ta luôn luôn phải coi xét, rằng chỉ bao gồm 12 vị trí trống gồm sẵn vào một hàng. Nếu bọn họ tổng hợp các không khí theo yêu ước của một vài cột tức thời kề, và công dụng vượt quá 12, cột cuối cùng trong nhóm này sẽ phải dịch chuyển đến loại kế tiếp. Họ hãy chu đáo một ví dụ thực tế: div class=“row“> div class=“col-xs-8“>div> div class=“col-xs-4“>div> div class=“col-xs-9“>This column will move lớn the next line.div> div> nhì cột trước tiên có size lần lượt là 8 với 4 (8 + 4 = 12), làm cho cho bậc nhất đầu. Không tồn tại đủ không khí cho các cột thứ cha ở đó, vì chưng vậy cột tiếp theo sau nó sẽ yêu cầu vào hàng tiếp theo.

4. Các size màn hình

Hãy nhớ khi shop chúng tôi đã viết .col-md-NUMBER trong mục 2. Ngơi nghỉ trên -md- là viết tắt cho màn hình vừa. Bootstrap có các lớp kích cỡ màn hình không giống nhau: xs – màn hình cực bé dại như điện thoại cảm ứng thông minh. Sử dụng nó : col-xs-NUMBER sm – trang bị màn hình nhỏ dại như máy tính bảng. áp dụng nó: col-sm-NUMBER md – màn hình có form size trung bình như laptop để bàn nhỏ độ phân giải phải chăng và máy vi tính xách tay. Thực hiện nó : col-md-NUMBER lg – màn hình lớn, screen có độ sắc nét cao. Sử dụng nó col-lg-NUMBER Bootstrap có độ sắc nét màn hình với dpi vào những class đã hoạt động. Đây là 1 cách làm khỏe mạnh để kiểm soát cách sắp xếp hiển thị trên những thiết bị không giống nhau. Khi bọn họ xác định một rule cho bất kỳ kích thước, thiết bị, công cụ này sẽ tiến hành thừa tận hưởng và áp dụng cho tất cả các kích cỡ lớn hơn, trừ khi shop chúng tôi ghi đè lên nó bằng một chiếc mới.

xét lấy một ví dụ :

div class=“row“> div class=“col-xs-12 col-md-6“>p>Try resizing the browser to see this text and the image rearrange for optimal viewing. P>div> div class=“col-xs-12 col-md-6“>img src=“city.jpg“ class=“img-responsive“>div> div>

5. Clearfix

Trong một vài tình huống, lúc 1 cột tất cả nội dung nhiều hơn thế nữa và một chiều cao lớn hơn thế thì những loại sau đó, sắp xếp này sẽ phá vỡ. Các cột tất cả sẽ ck chất trên dưới mỗi khác, nuốm vì di chuyển đến dòng sau đó khi bọn họ cần.

Xem thêm: Sub Vocalist Là Gì - Sub Vocal Và Lead Vocal Là Gì

Để ngăn chặn điều này, bootstrap giúp đỡ thêm một div với class là clearfix. Nó sẽ buộc tất cả các cột sau khoản thời gian nó dịch chuyển đến một loại mới, xử lý vấn đề này.

xem ví dụ sau:

div class=“row“> div class=“col-xs-6 tall-column“>A column much taller than the rest.div> div class=“col-xs-6“>div> div class=“clearfix“>div> div class=“col-xs-6“>div> div>

6. Offset

Theo mặc định, các cột kết dính nhau cơ mà không để lại ngẫu nhiên khoảng trống làm sao về phía bên trái. Và họ vẫn thừa không gian về phía mặt phải. Để tạo thành lề về bên cạnh trái của cột chúng ta cũng có thể sử dụng những class offset. Áp dụng một class .col-md-offset-Number cho bất kỳ cột sẽ di chuyển nó sang bên phải, chúng ta có thể có những hiệu số khác biệt cho những màn hình khác nhau kích thước nhờ vào xs, sm, md và lg. Bạn cũng có thể sử dụng offsets để thuận lợi canh giữa các cột: div class=“container“> div class=“row“> div class=“col-xs-5 col-xs-offset-4“>col-xs-5 col-xs-offset-4div> div class=“col-xs-9 col-xs-offset-2“>col-xs-9 col-xs-offset-2div> div class=“col-xs-6 col-xs-offset-1“>col-xs-6 col-xs-offset-1div> div class=“col-xs-4 col-xs-offset-1“>col-xs-4 col-xs-offset-1div> div class=“col-xs-11 col-xs-offset-1“>col-xs-11 col-xs-offset-1div> div class=“col-xs-10“>col-xs-10div> div class=“col-xs-7“>col-xs-7div> div> div class=“row“> div class=“col-xs-5“>col-xs-5div> div> div class=“row“> div class=“col-xs-7“>col-xs-7div> div class=“col-xs-10“>col-xs-10div> div class=“col-xs-11 col-xs-offset-1“>col-xs-11 col-xs-offset-1div> div class=“col-xs-11 col-xs-offset-1“>col-xs-11 col-xs-offset-1div> div class=“col-xs-9 col-xs-offset-2“>col-xs-9 col-xs-offset-2div> div class=“col-xs-5 col-xs-offset-4“>col-xs-5 col-xs-offset-4div> div> div>

thì sẽ có kết quả của đoạn code html như mẫu vẽ này

*

7. Push và Pull

Push với pull là những class cho phép họ sắp xếp những cột tùy trực thuộc vào kích thước màn hình. Push đang đẩy cột về phía bên đề xuất và pull sẽ kéo cột về phía bên trái. Điều này khác với offset là pull và push là đẩy với kéo ở cột cần sử dụng mà ko dịch rời sang cột khác. Class push và pull bao hàm định dạng sau: .col-SIZE-push-NUMBER với .col-SIZE-pull-NUMBER. Quý hiếm size rất có thể sm, xs, md, lg xem ví dụ bên dưới đây: div class=“row“> div class=“col-md-4 col-md-push-8“>colum1div> div class=“col-md-8 col-md-pull-4“>colum2div> div>

và công dụng ta được như hình hình ảnh sau:

*

giả dụ ko có pull vs push thì colum1 sẽ nằm tại vị trí phía trái, colum 2 về ở phía mặt phải. Nhưng lại khi sống ví dụ này sẽ thay đổi vị trí của colum1 cùng colum2, push vẫn đẩy colum1 về phía bắt buộc và pull đang kéo colum2 về phía trái.

kết luận