Đối với các lập trình viên hay có hiểu biết cơ bản về HTML, CSS và JavaScript thì đều biết rằng bootstrap vô cùng quan trọng, và ở trong bootstrap thì Column(cột) và Row(dòng) là 2 thành phần quan trọng nhất ở trong hệ thống lưới – grid system. Và ở trong bài viết dưới đây, Blog Getbootstrap sẽ chia sẻ kiến thức về column và row trong bootstrap, mời các bạn tham khảo.
Nội dung chính
ROW – Hàng
Để có thể học bootstrap căn bản thì các bạn cần phải tìm hiểu kỹ hơn về các lớp như container-fluid là gì? hay các class trong bootstrap … và đặc biệt nhất là cột và hàng ở trong bootstrap. Hiện nay hệ thống lưới bao gồm hàng và cột đều cho phép đặt những yếu tố theo chiều dọc và ngang.
ROW(hàng) có nghĩa là khối, và khi chúng ta tạo ra 1 hàng thì nó sẽ chiếm toàn bộ chiều rộng của những phần tử đó.
Nói một cách dễ dàng hơn thì row(hàng) là những dòng mới trong cách bối trí, những liên kết ngang trong hệ thống lưới sẽ được thực hiện thông qua các cột, và nếu như bạn đặt sai vị trí nội dung thì nó sẽ phá vỡ bố cục của tổng thể.
Code html ví dụ: Nếu như bạn đặt sai nội dung ở trong row thì nó sẽ phá vỡ bố cục của bootstrap:
<!– Wrong –>
<div class=”row”>
Some content
</div>
Code html ví dụ: Nếu như bạn đặt đúng vị trí, đặt nội dung ở trong cột(column), đúng với bố cục của bootstrap:
<!– Correct –>
<div class=”row”>
<div class=”col-md-12″>Content Goes Here</div>
</div>
Column – Cột
Như các đã biết thì cột(column) và hàng(row) có quan hệ chặt chẽ với nhau, và theo quy tắc và thiếp lập của cấu trúc website thì các cột sẽ được chia làm 12 phần bằng nhau.
Và trong quá trình bạn thiết lập cột(column) nằm trong 1 hàng, thì bạn cần phải xác định tỷ lệ hợp lý mà những thành phần đấy sẽ chiếm giữ.
Điều này sẽ được thực hiện bằng iệc bạn áp dụng 1 class cụ thể như: .col-md-NUMBER
-> Với: NUMBER: 1 số nguyên từ 1 đến 12.
Khi đó sẽ tuỳ thuộc vào số lượng của những bộ phận mà hàng(row) chiếm, cột(column) một tỷ lệ phần trăm của chiều rộng của hàng.
Với, nếu như 6 cột sẽ là 50%(tỷ lệ 6/12), 3 cột sẽ là 25%(tỷ lệ 3/12).
Code html ví dụ cụ thể:
<div class=”row”>
<div class=”col-md-12″>Full width 100%</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>
Và ở trong bootstrap thì chỉ có 12 chỗ trống có sẵn ở trong 1 hàng, khi tổng hợp các không gian theo yêu cầu của những cột(column) liền kề, nếu như kết quả vượt quá 12 thì cột cuối cùng ở trong nhóm sẽ phải di chuyển đến dòng kế tiếp.
Code html ví dụ cụ thể:
<div class=”row”>
<div class=”col-xs-8″></div>
<div class=”col-xs-4″></div>
<div class=”col-xs-9″>This column will move to the next line.</div>
</div>
Nhìn vào ví dụ ở trên thì các bạn có thể thấy 2 cột đầu tiên sẽ có kích thước là 8 và 4 = 12, nên sẽ không có đủ không gian cho cột thứ 3 ở đó. Cho nên bạn sẽ phải để cột tiếp theo và hàng tiếp theo.
Hi vọng với những thông tin ở trên về cột(column) và hàng(row) ở trong bootstrap sẽ giúp bạn có thêm kiến thức bootstrap nhé. Chúc các bạn thành công.
