Tìm hiểu Bootstrap3: Sử dụng Grid System

Giới thiệu

• Nếu như trước đây để phát triển được một ứng dụng web đẹp mắt, ứng ý khách hàng, bạn phải bỏ ra rất nhiều thời gian và công sức. Bạn không có vấn đề gì về phần logic, sử lý dữ liệu backend, nhưng phần giao diện fronend lại khiến bạn băn khoăn, code HTML, CSS ngày càng tăng lên, lặp đi, lặp lại, chưa kể jQuery, Javascript,..
• Hiện nay với Bootstrap3 bạn hoàn toàn không phải quá lo lắng về vấn đề giao diện, chỉ cần một chút kiến thức về HTML và sự hỗ trợ của Bootstrap bạn hoàn toàn có thể tạo ra một trang web đẹp mắt dù mới học qua về CSS.
• Vậy Bootstrap là gì? Tại sao nó lại phổ biến và được ưa chuộng đến thế? Bootstrap là một CSS Framework do Twitter phát triển, nó là bộ công cụ giúp thiết kế trang web bắng css nhanh hơn, thay vì bạn phải hiểu rõ các bộ chọn, các thuộc tính và giá trị trong CSS, thì bạn chỉ cần biết các thành phần form, navbar, dropdown, button,.. và add nó vào trang html của mình một cách hợp lý để có được giao diện ưng ý khách hàng.

Ưu Điểm

• Phát triển ứng dụng web một cách nhanh chóng.
• Phù hợp với tất cả kích thước màn hình
• Dễ dàng sử dụng và tùy biến Ngoài ra, so với các phiên bản trước đây thì Bootstrap3 mặc định sẵn hỗ trợ Responsive (Các phiên bản 2.x.x thì phải chèn thêm bootstrap-responsive.css nếu muốn sử dụng Responsive)

Grid System

• Grid system là khái niệm bắt nguồn từ kỹ thuật in ấn, thiết kế các poster, bìa sách, tạp chí,…. Đó là một hệ thống các đường kẻ ngang, dọc chia không gian trang thành nhiều ô để bạn đặt bố cục cho các phần của trang. Được ứng dụng sang lĩnh vực thiết kế web, hệ thống grid chia layout web của bạn thành các hàng (row) và các cột (column). Cụ thể trong Bootstrap, layout sẽ được chia thành 12 cột, mỗi cột sẽ chiếm tỷ lệ % nhất định và bằng nhau trên layout.

• Ký tự * trong bảng trên đại diện cho số cột chứa phần tử đó, là một số từ 1 đến 12.

• Bootstrap quy định các hàng (.row) phải nằm trong lớp .container hoặc lớp .container-fluid (chiều rộng full-width đối với mọi thiết bị)

• Ví dụ: sử dụng class prefix: .col-md-*

<div class="container">
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
  <div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
</div>

Kết quả thu được trên desktop (>= 992px) sẽ là 4 hàng:

• hàng một gồm 12 cột khích thước một
• hàng hai gồm 2 cột khích thước 8 và 4
• hàng ba gồm 3 cột khích thước 4
• hàng ba gồm 2 cột khích thước 6

Nhưng với những thiết bị có size < 992px thì kết quả thu được là nhiều hàng xếp chồng lên nhau với những kích thước bằng nhau: Xem kết quả

Bây giờ bạn lại muốn giao diện không thay đổi trên smartphone, muốn nó phải responsive, phải giống trên desktop. Đơn giản bạn chỉ việc sử dụng class prefix .col-xs-* và xem kết quả:

<div class="container">
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
</div>

Xem kết quả

Hoặc bạn cũng có thể tùy chỉnh theo ý bạn bằng sự kết hợp giữa hai class prefix col-xs-* và col-md-*

<div class="container">
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>

• Ở hàng một, nếu thiết bị của bạn là desktop (size >= 992px) thì kết quả sẽ là 2 cột kích thước 8 và 4, còn với các thiết bị khác thì sẽ là 2 hàng xếp chồng lên nhau nhưng hàng 1 sẽ có kích thước gấp hai lần hàng 2. Xem kết quả

Tương tự với các class prefix .col-sm-* và .col-lg-* bạn sẽ thấy được sự khác biệt với các thiết bị tương ứng với code:

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
        <div class="row">
            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
</div>

Xem kết quả

• Lưu ý: Nếu kích thước của một hàng mà vượt quá 12 thì mặc định cột cuối cùng được đẩy xuống hàng dưới

Offsetting columns

• Giả sử bạn có một hàng 6 cột và muốn chuyển nó ra giữa hoặc gắn liền với lề bên phải của container, bạn hãy sử dụng class: .col-md-offset-*

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

ở đây * bằng 3, nghĩa là hàng 6 cột được dịch sang phải 3 cột(giống như margin-left), nếu * lớn hơn 12 thì coi như là 0

Column ordering

• Cũng có tác dụng giống như Offset là đẩy các cột sang phải( push ) hoặc kéo nó sang trái( pull ) ta sẽ sử dụng 2 class col-md-push-* và col-md-push-*

<div class="row">
        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
</div>

Nhưng khác với Offset căn lề bằng margin-left còn push sử dụng left, Và khi sử dụng offset các cột được offset sẽ đẩy dồn các cột bên phải nó còn nếu dùng push và pull thì các cột này sẽ chồng chéo lên các cột khác kề phía mà nó dịch chuyển. Ví dụ minh họa Offset và order

Kết luận và tham khảo

• Trên đây là những khái niện và cách sử dụng Grid system cơ bản trong bootstrap3, nắng vững những kiến thức này và sử dụng linh hoạt chúng bạn hoàn toàn có thể xây dựng layout cho các thiết bị màn hình khác nhau một cách dễ dàng.
• Để tìm hiểu sâu hơn về bootstrap3, bạn hãy tham khảo nhưng link bên dưới: Get bootstrap: grid system