Học Bootstrap Grid trong 15 phút

Bootstrap hiện là một Framework được sử dụng rộng rãi trong thiết kế giao diện hiện tại. Khi nói đến việc xây dựng website tương thích với mọi loại thiết bị, thì bootstrap được đánh giá cao, vì dễ sử dụng. Nếu bạn biết HTML, CSS và một chút Javascript thì sẽ không mất nhiều thời gian cho việc học bootstrap.

1. Row và Column

Lưới (grid): bao gồm hàng và cột, điều này cho phép chúng ta thay đổi vị trí các thành phần tự do theo chiều dọc và chiều ngang.
Hàng (row): là khối lớn nhất. Khi chúng ta tạo một hàng, nó chiếm toàn bộ chiều rộng của thành phần chứa nó.
Cột (Column): Vị trí các thành phần theo chiều dọc được thể hiện dựa trên các cột. Duy nhất các cột được đặt trong hàng, đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục.

<!-- Cách viết sai -->
<div class="row">
	Some content
</div>

<!-- Cách viết đúng -->
<div class="row">
	<div class="col-md-12">
		Nội dung....
	</div>
</div>

Lưu ý: Các dòng và cột có mối ràng buộc chặt chẽ, mặc định, mỗi cột có một khoảng đệm padding-left: 15px và padding-right: 15px để giữ khoảng cách giữa lề và nội dung, tuy nhiên điều này đồng nghĩa với việc kích thước hiển thị nội dung bị thu hẹp vào 15px cho lề trái và phải. Để bù lại, mỗi dòng luôn có một khoảng đệm với giá trị âm là padding-left: -15px và padding-right: -15px. Đây là lý do tại sao luôn luôn đặt các cột trong hàng (Xem ví dụ bên trên).

2. Mặc định, mỗi dòng được chia làm 12 cột

Mặc định, dòng được chia thành 12 phần bằng nhau (Bạn cũng có thể tùy biến bootstrap để điều chỉnh lại số lượng 12 phần này, song bài viết này ở mức cơ bản nên chỉ dùng số lượng mặc định của bootstrap).

Điều này được quy định bằng lớp (class) .col-md-NUMBER. NUMBER là một số nguyên từ 1 đến 12. Khi đặt một cột bên trong một hàng, chúng ta phải tính toán sao cho tổng số lượng các cột luôn bằng 12. Tùy thuộc vào NUMBER, mỗi cột sẽ chiếm một tỉ lệ tương ứng trên tổng kích thuớc của dòng. Như 6, sẽ là 50% (12/6), 3 sẽ là 25% (12/3).

Ví dụ dưới đây giúp bạn hiểu rõ hơn:

<div class="row">
	<div class="col-md-12">
		Full width
	</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. Column Wrapping

Chắc chắn mỗi dòng phải chứa đúng số lượng cột như đã quy định. Trong trường hợp các cột nằm liên kề nhau, và tổng số lượng lớn hơn 12, thì cột cuối cùng sẽ tự động đẩy sang dòng tiếp theo.

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

3. Phân loại kích thước màn hình

Xem lại phần 2 bên trên, khi viết .col-md-NUMBER thì -md- đại diện cho kích thước màn hình trung bình (thường là màn hình Desktop hoặc Laptop). Bootstrap có một số lớp đại diện cho các kích thước màn hình khác nhau:

• xs – Loại màn hình rất nhỏ, thường là các loại smartphones. Sử dụng: .col-xs-NUMBER
• sm – Loại màn hình nhỏ, thường là các thiết bị tablets. Sử dụng .col-sm-NUMBER
• md – Loại màn hình trung bình, thường là Desktop hoặc Laptop. Sử dụng .col-md-NUMBER
• lg - Loại màn hình lớn, thường ít khi được sử dụng. Sử dụng: .col-lg-NUMBER

Tìm hiểu thêm tại http://getbootstrap.com/css/#grid-options

Khi chúng ta quy định lớp thuộc tính cho một kích thước màn hình, thì thuộc tính này cũng được thừa hưởng và áp dụng cho các loại màn hình có kích thước lớn hơn. Trừ khi chúng ta khai báo thêm một lớp để dè lên thuộc tính của lớp trước đó.

Ví dụ dưới đây cho thấy, khi sử dụng class="col-xs-12 col-md-6", thì chúng ta biết, trên tất cả các kích thước màn hình, cột thứ nhất sẽ chia 50% và cột thứ 2 cũng là 50%.

<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 số tình huống, khi các cột có nội dung không cân bằng nhau, dẫn đến chiều cao cột (height) không đồng đều thì những cột ở phía sau sẽ phá vỡ bố cục. Để giải quyết vấn đề này, chúng ta phải thêm một khối (div) với lớp .clearfix, nó sẽ buộc các cột phía sau di chuyển sang một dòng mới.

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

Bạn có thể sử dụng Bootstrap’s responsive utility classes để kiểm soát clearfix khi đang họat động.

6. Offsets

Mặc định, các cột nằm sát vào nhau và luôn dồn về bên trái, trong trường hợp số lượng cột không đủ 12, sẽ tạo nên một khoảng trống về phía bên phải.

Để tạo lề trái cho một cột, chúng ta có thể sử dụng class offsets. Áp dụng .col-md-offset-NUMBER cho một cột bất kỳ sẽ di chuyển nó sang bên phải Bạn có thể sửa lại các giá trị NUMBER khác nhau trên cách kích thước màn hình khác nhau (xs, sm, md, lg)

<div class="row">
	<div class="col-md-6 col-md-offset-3"></div>
	<div class="col-md-10 col-md-offset-1"></div>
</div>

7. Push and Pull

Các lớp push và pull cho phép sắp xếp lại các cột tùy vào kích thước màn hình. Di chuyển một cột về bên phải, hay đẩy một cột về bên trái. Điều này thay đổi vị trí cột, song không làm ảnh hưởng đến các cột khác.

Lớp push và pull có các dạng sau col-SIZE-push-NUMBER, and .col-SIZE-pull-NUMBER. Giá trị SIZE có thể là xm, xs, md hay lg - tùy vào kích thước màn hình muốn thay đổi. NUMBER là số lượng (cột) muốn di chuyển.

<div class="row">
	<div class="col-xs-4 col-md-push-8">
		On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.
	</div>
	<div class="col-xs-8 col-md-pull-4"><img src="city.jpg" class="img-responsive">
	</div>
</div>

Kết luận

Trên đây là những kiến thức cơ bản nhất liên quan đến hệ thống lưới (grid system) trong boostrap. Bạn có thể tìm đọc thêm các tài liệu khác để hiểu rõ hơn về hệ thống lưới này. Tài liệu đầy đủ có tại http://getbootstrap.com/css/#grid