Grid System trong Bootstrap

Nên đọc trước

  1. Hướng dẫn nhúng Bootstrap vào website

Containers

Theo quy định của Bootstrap thì bố cục trang web của bạn phải được bọc trong class container hoặc container-fluid thì Grid System mới có hiệu lực.

<div class="container">

<!-- Grid System đây -->

</div>

<div class="container-fluid">

<!-- Grid System đây -->

</div>

Trong đó:

  • container: Layout dạng fixed-width, đối với PC thì toàn bộ web sẽ nằm giữa màn hình và có chừa khoảng trống nhỏ ở 2 bên, đối với mobile thì sẽ kéo giãn ra toàn màn hình.
  • container-fluid: Layout dạng full-width, toàn bộ web sẽ được kéo giãn ra hết chiều ngang màn hình ở mọi thiết bị.

Grid System

Các quy định

  1. Grid System phải được đặt trong class container hoặc container-fluid.
  2. Grid System bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Nếu trong một dòng có nhiều hơn 12 cột thì các cột dư ra sẽ tự động lọt xuống tạo thành dòng ngay bên dưới. Các cột phải là con trực tiếp của các dòng.
  3. Mặc định các cột trên một dòng sẽ dính sát vào nhau, bạn muốn có khoảng trống giữa 2 cột thì hãy cài đặt padding.

Ví dụ

Grid System trong Bootstrap

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

Ở ví dụ này layout của trang web có các đặc điểm sau:

  • Layout gồm 4 dòng.
  • Dòng đầu tiên gồm 12 khối với chiều rộng các khối bằng nhau và bằng với chiều rộng của 1 cột (12*1=12 cột).
  • Dòng thứ hai gồm 2 khối, khối lớn bên trái có chiều rộng của 8 cột và khối nhỏ bên phải có chiều rộng của 4 cột (8+4=12 cột).
  • Layout dạng fixed-width (do bao ở ngoài là class container).
  • Mỗi dòng là 1 class row.
  • Các cột có class sử dụng tiếp đầu ngữ col-md-*, cấu trúc class của cột được quy định là col-x-y trong đó x đại diện cho kiểu kích thước màn hình và đại diện cho chiều rộng của khối được tính bằng đơn vị là số cột.

Các kiểu tiếp đầu ngữ dành cho class của cột

Điện thoại (<768px) Tablets (≥768px) PC vuông (≥992px) PC wide (≥1200px)
Tình huống xử lý Xếp ngang ở mọi màn hình Xếp ngang nếu màn hình đạt kích thước quy định, ngược lại hiển thị repsonsive
Width của container Không có (auto) 750px 970px 1170px
Tiếp đầu ngữ của class .col-xs- .col-sm- .col-md- .col-lg-
Số cột 12
Độ rộng mỗi cột Auto ~62px ~81px ~97px
Khoảng cách giữa 2 cột 30px (15px bên trái và 15px bên phải)
Nhiều cấp
Cài đặt vị trí
Sắp xếp cột

Ở ví dụ bên trên mình đã sử dụng tiếp đầu ngữ .col-md-, tại sao vậy? Bởi vì .col-md- dành cho các thiết bị có màn hình >=992px và đây là kích thước màn hình desktop phổ biến nhất ở thời điểm hiện tại.

Có một số trường hợp bạn sẽ sử dụng kết hợp các kiểu tiếp đầu ngữ khác nhau để layout biến hóa theo đúng mong muốn của bạn trên các thiết bị. Ví dụ mình sẽ tạo ra giao diện gồm 2 phần, khi xem trên PC hoặc tablet >=768px thì hiển thị thành 2 phần bằng nhau (6-6) nhưng khi xem trên màn hình di động <768px thì phân bổ lại một cột 9 và một cột 3 (9-3):

<div class="container">

    <div class="row">

        <div class="col-sm-6 col-xs-9"></div>

        <div class="col-sm-6 col-xs-3"></div>

    </div>

</div>

Nestable - Nhiều cấp

Bạn có thể cài đặt Grid System bên trong một Grid System khác. Ví dụ dưới đây mình sẽ cài đặt layout gồm 2 phần (8-4) và bên trong phần nhỏ mình lại tiếp tục chia đều ra thành 2 phần bằng nhau (6-6).

<div class="container">

    <div class="row">

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

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

            <div class="row">

                <div class="col-xs-6"></div>

                <div class="col-xs-6"></div>

            </div>

        </div>

    </div>

</div>

Offset - Cài đặt vị trí cột

Bạn có thể hiểu offset như là cài đặt margin-left nhưng khác biệt là đơn vị được tính bằng cột chứ không phải bằng px. Ví dụ mình sẽ xây dựng layout gồm 2 phần (4-4) và ở giữa 2 phần được margin ra 4 cột.

Grid System trong Bootstrap

<div class="container">

    <div class="row">

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

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

    </div>

</div>

Column ordering - Sắp xếp cột bằng push & pull

Bạn có thể thay đổi thứ tự của các phần trong layout bằng cách đẩy nó sang phải (push) hoặc kéo nó về trái (pull). Ví dụ mình sẽ xây dựng layout gồm 2 phần (4-8), khi hiển thị trên desktop thì phần nhỏ bên trái - phần lớn bên phải nhưng khi hiển thị trên mobile thì sẽ hiện phần lớn trước - phần nhỏ sau.

<div class="container">

    <div class="row">

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

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

    </div>

</div>

Bạn cũng cần lưu ý là khi sử dụng push hoặc pull thì các cột có thể chồng chéo lên nhau và đây cũng chính là bí quyết mà một số bạn thường sử dụng để tạo nên các layout độc đáo.