Hướng dẫn sử dụng Bootstrap Grid System

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Grid System

Grid System (Hệ thống lưới) là một trong các khái niệm rất quan trọng nhất trong Bootstrap, nó đưa ra cách làm sao để bạn bố trí được các thành phần trên giao diện. Và làm sao để website của bạn có thể tương thích với các màn hình thiết bị khác nhau.
Khẳng định đầu tiên của chúng ta là Hệ thống lưới (Grid System) của Bootstrap có nhiều dòng nhưng chúng có cố định 12 cột. Trên các ô lưới (cell) bạn có thể đặt các thành phần giao diện. Ví dụ dưới đây là một bề mặt, nó được chia thành nhiều ô:
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12
Bootstrap4 có 5 Css-class khác nhau:
Css Class Prefix Mô tả
.col- Dành cho các thiết bị rất nhỏ (Extra Small), có chiều rộng nhỏ hơn 576px
.col-sm- Dành cho các thiết bị nhỏ (Small), có chiều rộng lớn hơn hoặc bằng 567px.
.col-md- Dành cho các thiết bị trung bình (Medium), có chiều rộng lớn hơn hoặc bằng 768px
.col-lg- Dành cho các thiết bị lớn (Large), có chiều rộng lớn hơn hoặc bằng 992px
.col-xl- Dành cho các thiết bị rất lớn (Extra Large), có chiều rộng lớn hơn hoặc bằng 1200px.
Các ví dụ là cách tốt nhất để giải thích về nguyên tắc hoạt động của hệ thống lưới trong Bootstrap.

col-sm-*

sm: Là từ viết tắt của "Small", nó ám chỉ tới các thiết bị có màn hình nhỏ, có chiều rộng màn hình lớn hơn hoặc bằng 567px. (Với các thiết bị có chiều rộng màn hình nhỏ hơn 567px gọi là rất nhỏ (extra small)).
col-sm-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-sm-3 bg-primary">
               <p>col-sm-3</p>
            </div>
            <div class ="col-sm-9 bg-success">
               <p>col-sm-9</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Chạy ví dụ ở trên và quan sát:
Nếu ".container" (bộ chứa) có chiều rộng >= 567px, các phần tử ".col-sm-*" sẽ nằm trên một hàng (row), và chúng lấp đầy (fill) chiều rộng của .container. Nhưng khi chiều rộng của .container nhỏ hơn 567px, các phần tử ".col-sm-*" sẽ nằm trên các hàng khác nhau, chúng vẫn lấp đầy (fill) chiều rộng của .container. Chúng ta kết luận rằng 567px là một giá trị đặc biệt của các phần tử ".col-sm-*":

col-md-*

md: Là viết tắt của từ "Medium", nó ám chỉ các thiết bị có chiều rộng màn hình trung bình, có chiều rộng lớn hơn hoặc bằng 768px, đây là kích thước của các máy tính bảng (Tablet).
col-md-example.js
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 bg-primary">
              <p>col-md-2</p>
            </div>
            <div class ="col-md-3 bg-secondary">
               <p>col-md-3</p>
            </div>
            <div class ="col-md-7 bg-success">
               <p>col-md-7</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Giá trị 768px là đặc biệt với các phần tử ".col-md-*".

col-lg-*, col-xl-*

lg: Là viết tắt của từ "Large", ám chỉ các thiết bị có chiều rộng màn hình lớn hơn hoặc bằng 992px.
xl: Là viết tắt của từ "Extra Large", ám chỉ các thiết bị có chiều rộng màn hình lớn hơn hoặc bằng 1200px.
Nguyên tắc hoạt động của ".col-lg-*"& ".col-xl-*" cũng giống với ".col-sm-*", ".col-md-*".

col-*

Với các thiết bị có độ rộng màn hình nhỏ hơn 567px, được gọi là các thiết bị rất nhỏ (extra small).
col-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-2 bg-primary">
              <p>col-2</p>
            </div>
            <div class ="col-3 bg-secondary">
               <p>col-3</p>
            </div>
            <div class ="col-7 bg-success">
               <p>col-7</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>
Các phần tử ".col-*" vẫn nằm trên một hàng (row) cho dù bạn làm cho chiều rộng của ".container" giảm xuống. Tuy nhiên bạn không thể làm cho chiều rộng của ".container" bé hơn 320px.

2- Kết hợp: col-sm-*,col-md-*, ..

Một phần tử (element) có thể sử dụng kết hợp các lớp col-*, col-sm-*, col-md-*... với nhau. Ví dụ dưới đây cho bạn thấy cách mà Bootstrap áp dụng các lớp đó.
combine-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 col-sm-6 bg-primary">
              <p style="font-style:italic;">col-md-2</p>
              <p style="font-weight:bold;">col-sm-6</p>
            </div>
            <div class ="col-md-10 col-sm-6 bg-success">
               <p style="font-style:italic;">col-md-10</p>
               <p style="font-weight:bold;">col-sm-6</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

 

3- col, col-sm,.. col-auto, col-sm-auto,..

col, col-sm, col-md, col-lg, col-xl

Các ví dụ ở trên cho bạn thấy cách sử dụng các lớp col-*, col-sm-*, col-md-*, col-lg-*, col-xl-* (Chỉ định rõ chiều rộng). Ví dụ dưới đây là cách sử dụng các lớp col, col-sm, col-md, col-lg, col-xl (Không chỉ định chiều rộng):
equal-width-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col bg-success">
               <p>col</p>
            </div>
         </div>

         <hr>

         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

col-auto, col-sm-auto, col-md-auto, col-lg-auto, col-xl-auto

Các phần tử (element) sử dụng lớp *-auto sẽ có chiều rộng tự động dựa trên độ dài nội dung của nó.
auto-column-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">

        <div class= "row">
           <div class ="col bg-primary">
             <p>col</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col bg-secondary">
              <p>col</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>

        <hr>

        <div class= "row">
           <div class ="col-auto bg-primary">
             <p>col-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-auto bg-secondary">
              <p>col-auto</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>

        <hr>

         <div class= "row">
            <div class ="col-auto bg-primary">
              <p>col-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-auto bg-secondary">
               <p>col-auto</p>
               Short Content
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>

</html>
 

col-sm-auto

auto-width-example2.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">

        <div class= "row">
           <div class ="col-sm bg-primary">
             <p>col-sm</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm bg-secondary">
              <p>col-sm</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>

        <hr>

        <div class= "row">
           <div class ="col-sm-auto bg-primary">
             <p>col-sm-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm-auto bg-secondary">
              <p>col-sm-auto</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>

        <hr>

         <div class= "row">
            <div class ="col-sm-auto bg-primary">
              <p>col-sm-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-sm-auto bg-secondary">
               <p>col-sm-auto</p>
               Short Content
            </div>
            <div class ="col-sm-2 bg-success">
               <p>col-sm-2</p>
            </div>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>

</html>

4- Tạo Gallery sử dụng Grid

Giả sử rằng bạn có một phần tử ".row", và 2 phần tử con ".col-**" có tổng số cột lớn hơn 12, điều gì sẽ xẩy ra?
  • Câu trả lời là: 2 phần tử con sẽ hiển thị trên 2 hàng khác nhau.
greater-12columns-example
<!-- 5 + 8 > 12 -->
<div class= "row">
   <div class ="col-5 bg-primary">
      <p>col-5</p>
   </div>
   <div class ="col-8 bg-secondary">
      <p>col-8</p>
   </div>
</div>
greater-12columns-example2
<div class= "container-fluid">
   <h4>(col-sm-*) 5 + 8 > 12</h4>

   <!-- (col-sm-*) 5 + 8 > 12 -->
   <div class= "row">
      <div class ="col-6 col-sm-5 bg-primary">
         <p>.col-6 <b>.col-sm-5</b></p>
      </div>
      <div class ="col-6 col-sm-8 bg-secondary">
         <p>.col-6 <b>.col-sm-8</b></p>
      </div>
   </div>

</div>

col-12, col-*-12

Giả sử rằng bạn có một phần tử ".row" và một vài phần tử con, một phần tử con có số cột bằng 12. Điều gì sẽ xẩy ra?
  • Câu trả lời là phần tử con có số cột bằng 12 sẽ hiển thị trên một dòng, nó lấp đầy chiều rộng của dòng đó.
element-12columns-example
<div class= "container-fluid">
   <h4>Element with 12 columns</h4>
    
   <div class= "row">
      <div class ="col-2 bg-primary">
         <p>.col-2</p>
      </div>
      <div class ="col-12 bg-secondary">
         <p>.col-12</p>
      </div>
      <div class ="col-5 bg-danger">
         <p>.col-5</p>
      </div>
   </div>
</div>

Gallery

Sử dụng các đặc tính trên của Grid sẽ giúp bạn tạo được một Gallery (Bộ sưu tập) đẹp, và thay đổi theo kích thước của thiết bị.
grid-gallery-example
<div class= "container-fluid">
   <h4>Gallery</h4>

   <div class= "row">
      <div class ="col-12 col-sm-6 col-md-4 bg-primary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-secondary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-danger">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-success">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-info">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-dark">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
   </div>
</div>
OK, dưới đây là một ví dụ phức tạp hơn, sử dụng Grid để tạo một Gallery, trong ví dụ này tôi có sử dụng một vài lớp tiện ích của Bootstrap.
complex-gallery-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Grid</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .height100 {
         height: 100%;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
         <h4>Complex Gallery</h4>
         <div class= "row d-inline-flex">
            <!-- Gallery Item 1 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal1.png"/>
                  </div>
                  <h2>Sheep</h2>
                  <p>Info..</p>
               </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal2.png"/>
                  </div>
                  <h2>Horse</h2>
               </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal3.png"/>
                  </div>
                  <h2>Duck</h2>
               </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal4.png"/>
                  </div>
                  <h2>Goat</h2>
               </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal5.png"/>
                  </div>
                  <h2>Chicken</h2>
               </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal6.png"/>
                  </div>
                  <h2>Cow</h2>
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

.d-flex, .flex-column (?) .p-2 (?)

5- Sử dụng .w-100

Trong Bootstrap4, lớp w-100 làm cho phần tử (element) có chiều rộng lấp đầy .container (width = 100%), nó sẽ phân tách các phần tử bên trái và bên phải nó thành 2 dòng (row) khác nhau. Tuy nhiên về mặt bản chất tất cả các phần tử này vẫn có cùng một phần tử cha ( .row )
.w-100
<div class= "container-fluid">
   <div class= "row">
      <div class ="col bg-primary">
         col (1)
      </div>
      <div class ="col bg-secondary">
         col (2)
      </div>
      
      <div class ="w-100"></div>
      
      <div class ="col bg-success">
         col (3)
      </div>
      <div class ="col-3 bg-danger">
         col-3 (4)
      </div>
   </div>
</div>
Câu hỏi của bạn lúc này là tại sao Bootstrap lại tạo ra lớp .w-100, tại sao không sử dụng 2 lớp .row để có được kết quả tương tự?
Lợi ích thứ nhất: Với lớp .w-100 bạn có thể chuyển các phần tử đang hiển thị trên 2 dòng thành 1 dòng, và ngược lại. Chẳng hạn bạn có 5 phần tử (element) nằm trên một .container. Và bạn muốn rằng, nếu chiều rộng của .container < 567px thì chúng hiển thị trên 2 dòng. Ngược lại chúng sẽ hiển thị trên một dòng.
.w-100 d-*-none
<div class= "container-fluid">
   <div class= "row">

      <div class ="col bg-primary">
         <p>col (1)</p>
      </div>
      <div class ="col bg-secondary">
         <p>col (2)</p>
      </div>

      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>

      <div class ="col bg-success">
         <p>col (3)</p>
      </div>
      <div class ="col-3 bg-danger">
         <p>col-3 (4)</p>
      </div>
      <div class ="col bg-warning">
         <p>col (5)</p>
      </div>
   </div>

</div>
Lợi ích thứ hai: Bạn có thể thay đổi thứ tự các phần tử nếu chúng cùng thuộc một ".row". Bạn không thể thay đổi thứ tự các phần tử nếu chúng nằm trên 2 ".row" khác nhau.
.w-100 order-*-*
<div class= "container-fluid">

   <div class= "row">
      <div class ="col order-sm-12 bg-primary">
         <p>col (1)</p>
         <p>order-sm-12</p>
      </div>
      <div class ="col order-sm-11 bg-secondary">
         <p>col (2)</p>
         <p>order-sm-11</p>
      </div>

      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>

      <div class ="col order-sm-2 bg-success">
         <p>col (3)</p>
         <p>order-sm-2</p>
      </div>
      <div class ="col-3 order-sm-3 bg-danger">
         <p>col-3 (4)</p>
         <p>order-sm-3</p>
      </div>
      <div class ="col  order-sm-1 bg-warning">
         <p>col (5)</p>
         <p>order-sm-1</p>
      </div>
   </div>

</div>
 

Xem thêm các chuyên mục: