Tìm Hiểu Về Grid Layout System trong Twitter Bootstrap

Grid System là hệ thống bố cục layout cho trang web được giới thiệu từ các phiên bản đầu tiên của Twitter Bootstrap. Hệ thống này giúp thiết kế trang web có thể đáp ứng để hiển thị với các kích thước màn hình của các loại thiết bị khác nhau từ máy tính cá nhân cho tới các thiết bị điện thoại di động. Để làm điều này hệ thống Grid System quy định mỗi một hàng (dòng) sẽ gồm có 12 cột có kích thước bằng nhau và bằng 1/12 chiều dài của màn hình thiết bị hiển thị.

Trong thư viện Twitter Bootstrap, các màn hình được chia thành 4 loại với kích cỡ khác nhau bao gồm:

• Màn hình loại lớn: Chiều rộng màn hình ≥ 1200px.
• Màn hình trung bình: 1200px > Chiều rộng màn hình ≥ 992px
• Màn hình nhỏ: 992px > Chiều rộng màn hình ≥ 768px
• Màn hình rất nhỏ: 768px > Chiều rộng màn hình

Với từng loại màn hình khác nhau thì mỗi một cột trong hàng sẽ sử dụng một tên lớp CSS đặc biệt. Ví dụ các màn hình loại lớn thì sẽ có tiền tố là col-lg-*. Trong đó * là chỉ số để xác định độ rộng của cột trong hàng. Ví dụ cột có tên lớp là col-lg-12 sẽ có độ rộng toàn màn hình, cột có tên lớp là col-lg-6 sẽ có độ rộng 1/2 màn hình...

Tương tự các tiền tố của tên lớp CSS cho các màn hình còn lại lần lượt là col-md-*, col-sm-*, col-xs-*.

Ví dụ sau đây sẽ cho bạn thấy cách hiển thị của các cột với tên lớp CSS tương ứng trên thiết bị có kích thước trung bình:

Grid layout trong Twitter Bootstrap cũng yêu cầu chúng ta phải sử dụng một tên lớp đặc biệt là .row để đánh dấu một hàng. Hay nói cách khác các cột phải được đặt trong một thẻ hiển thị theo kiểu Block và thẻ này phải có tên lớp là .row. Ví dụ để hiển thị như hình bên trên bạn cần phải tạo mã lệnh HTML tương tự như sau:

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

<div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
</div>

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

Bây giờ hãy cùng xem một ví dụ thực tế sau khi chúng ta cần bố cục hiển thị khác nhau cho các loại thiết bị khác nhau:

<div class="row">
    <div class="col-xs-12 col-md-6">
        <p>Với các thiết bị có kích thước từ rất nhỏ tới nhỏ (&lt 992) thì cột này sẽ được hiển thị với kích thước chiểu rộng đùng bằng chiều rộng của hàng chứa nó (12/12)</p>
        <p>Ngược lại với thiết bị có kích thước từ trung bình trở lên thì cột này sẽ được hiển thị với kích thước chiều rộng bằng 1/2 chiều rộng của hàng chứa nó (6/12)</p>
    </div>
</div>

Ở ví dụ trên với các màn hình cỡ rất nhỏ cho tới nhỏ thì chúng ta nên hiển thị nội dung của cột tràn toàn bộ độ rộng của hàng chứa nó. Do đó chúng ta sử dụng tên lớp CSS là col-xs-12. Tuy nhiên đối với các màn hình cỡ trung trở lên chúng ta lại hiển thị nội dung này bằng 1/2 độ rộng của hàng chứa nó bằng cách sử dụng tên lớp col-md-6.

Một lưu ý cuối cùng trước khi kết thúc bài viết đó là bạn cần phải đặt toàn bộ các hàng vào bên trong một phần tử mẹ (thường là phần tử div) có tên lớp CSS là container hoặc container-fluid. Với tên lớp là container bạn cần định nghĩa độ rộng của phần tử mẹ này. Ví dụ:

.container {
    awidth: 1200px;
}

Ngược lại với container-fuild thì phần tử mẹ sẽ có độ rộng tràn màn hình.