Người Viết : ViKiMi Editor

Hướng dẫn sử dụng hiển thị Grid Layout với Bootstrap
Trong thiết kế website việc sử dụng bố cục Grid system đã quá quen thuộc. Đặc biệt với các website sử dụng Bootstrap làm một trong những công cụ hỗ trợ thiết kế. Thiết kế hiển thị dạng lưới cho phép thiết kế nhanh gọn và đa hình trong cách thể hiện các bố cục theo từng ý đồ.
Trong sử dụng Bootstrap việc sử dụng lưới thiết kế đã quá hữu ích. Quy định Bootstrap cho thiết kế là :
+ Chỉ cho phép có tối đa 12 cột trên một trang và không thể tăng số lượng các cột dù bạn có muốn hay không.
Với hình ví dụ bên dưới :
Hàng 1 : Có tất cả 12 cột gọi là Span1. Vì tổng chiều rộng width của 12 cột Span1 là bằng 100%
Hàng 2 : Chỉ có 1 cột Span12. Vì độ rộng width của cột Span12 là bằng 100%
Hàng 3 : Có 2 cột Span4 và Span8. Vì tổng độ rộng width của 2 cột Span4 và Span8 là bằng 100%
Chúng ta có thể xét tương tự cho các Hàng khác tiếp theo… Điều đó giải thích vì sao Bootstrap chỉ cho tối đa 12 cột trong thiết kế. Nếu vượt quá 12 cột trong thiết kế thì tổng chiều rộng Width sẽ vượt quá 100%, và điều này là không thể.

+ Số lượng cột trong các khung thiết kế của bạn tuỳ chọn do bạn muốn. Nhưng nó không vượt quá 12 cột. Độ rộng của các cột có thể được chia đều cho nhau, do định nghĩa ban đầu khi sử dụng hoặc bạn có thể tuỳ chỉnh.


Sự thuận tiện khi sử dụng Bootstrap đó là việc hiển thị trên màn hình thiết bị gần như bạn sẽ không cần quan tâm nó sẽ căn chỉnh độ rộng các cột ra sao. Tuỳ theo các thiết bị màn hình mà Hệ thống lưới Grid System của Bootstrap sẽ sắp xếp lại cho phù hợp. Tất cả gần như là tự động toàn bộ và bạn không cần đau đầu cho việc thiết tính Responsive cho trang web của mình.
Tuy nhiên bạn hoàn toàn có thể tuỳ chỉnh lại theo yêu cầu của cá nhân.
Framework Bootstrap được xây dựng và thiết kế cho Các loại thiết bị bao gồm : Mobile , Table , Small Laptop , Laptop và Desktop. Tất cả các xử lý của Bootstrap đều đã tương thích sẵn cho từng thiết bị vì vậy bạn chỉ cần sử dụng hoặc customize theo ý muốn.
Bootstrap định nghĩa Grid System hiển thị cho các thiết bị như sau :
+ xs (Cho Điện Thoại thông minh – Độ rộng Màn hình nhỏ hơn 768px)
+ sm (Cho Table – Độ rộng Màn hình bằng hoặc lớn hơn 768px)
+ md (Cho Laptop – Độ rộng Màn hình bằng hoặc lớn hơn 992px)
+ lg (Cho laptops and desktops – Độ rộng màn hình bằng hoặc lớn hơn 1200px)
Để dẽ sử dụng hơn thì chúng ta có thể tham khảo một Ví dụ được thiết kế đơn giản để hiểu rõ ràng về cấu trúc Grid System trong Bootstrap.
Mã code viết với ngôn ngữ đánh dấu HTML và Bootstrap :
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
… <!– Các thiết kế tương tự trong
lưới Grid Bootstrap sẽ được thiết kế cho thẻ DIV này, Bạn có thể thiết kế theo
mong muốn của mình. –>
</div>
Ví dụ trên có chia thành 3 Row với định nghĩa là 3 thẻ Div (có Class là Row) :

Trên các hàng này chia thành các cột khác nhau với các thẻ Div có các Class là Col-*-*
Chúng ta chỉ thiết kế 12 cột trên một Row.
Trong các Col-*-* chúng ta sẽ chọn phù hợp cho từng thiết bị. Ví dụ là chúng ta có Col-md-1 hoặc Col-md-6 hoặc Col-md-12…
Chúng ta xét thêm một Ví dụ khác :
Mã code HTML và Bootstrap
<div class=”row”>
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-8″>.col-sm-8</div>
</div>
Mục đích thiết kế
Hiển thị trên các thiết bị có độ rộng màn hình lớn hơn hoặc bằng thiết bị Table trở đi, vì vậy sẽ chọn col-sm-* [ Vì có định nghĩa : sm (Cho Table – Độ rộng Màn hình bằng hoặc lớn hơn 768px) ] ; Với các loại thiết bị khác chúng ta sẽ lại chọn cho đúng.
Ở trên chúng ta thực hiện thiết kế một hàng được chứa hai cột khác nhau với độ rộng width cột 1 bằng một nửa width cột số 2.
Còn khi các thiết bị có độ rộng màn hình nhỏ hơn thiết bị Table thì Bootstrap sẽ tự động sắp xếp lại thành 2 hàng khác nhau.
Hiển thị trên Desktop và Table

Hiển thị trên Mobile

Tổng Kết : Cách hiển thị Grid system trong Bootstrap rất dễ hiển và thuận tiện. Bạn hoàn toàn có thể làm chủ việc hiển thị Responsive trên các thiết bị Thông minh khác nhau : Mobile, Table, Desktop, Laptop, Small Laptop … Điều này hoàn toàn phù hợp với bối cảnh phát triển của công nghệ lập trình khác nhau. Với cách thiết kế từ Framework Bootstrap cho phép bạn làm chủ và tuỳ chỉnh một cách chính xác.