Bootstrap chia bố cục lưới thành tối đa bao nhiêu cột?

Bố cục lưới hai cột cho mọi thiết bị

Bootstrap Two Column Grid Layouts for Tablets and Desktops





    
Bootstrap Responsive Layout
	
Open the output in a new blank tab [Click the arrow next to "Show Output" button] and resize the browser window to understand how the Bootstrap responsive grid system works.
    

        
        

            

                
.col-md-6
            

            

                
.col-md-6
            

        

  


        
        
        

            

                
.col-md-4
            

            

                
.col-md-8
            

        

        
        
        

            

                
.col-md-3

  


            

            

                
.col-md-9
            

        

    

Xem ví dụ

Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm  để thuận tiện cho việc xây dựng bố cục, cùng với đó .

Giới thiệu

Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động:

• Các hàng được đặt bên trong một 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  5 [fixed-width] hoặc 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  6 [full-width] để căn chỉnh và thiết lập padding một cách thích hợp.
• Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
• Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng.
• Các class được định nghĩa trước như 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  7 và 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  8 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa.
• Các cột tạo nên các gutter [khoảng trắng nằm giữa nội dung cột] bằng 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  9. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  7.
• Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class 

  @media [max-width: @screen-xs-max] { ... }
  @media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
  @media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
  @media [min-width: @screen-lg-min] { ... }

  8.

Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn.

Media query

Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi.

/* Extra small devices [phones, less than 768px] */
/* No media query since this is the default in Bootstrap */

/* Small devices [tablets, 768px and up] */
@media [min-width: @screen-sm-min] { ... }

/* Medium devices [desktops, 992px and up] */
@media [min-width: @screen-md-min] { ... }

/* Large devices [large desktops, 1200px and up] */
@media [min-width: @screen-lg-min] { ... }

Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính 

  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1


  
.col-md-8
  
.col-md-4


  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

@media [max-width: @screen-xs-max] { ... }
@media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }
@media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }
@media [min-width: @screen-lg-min] { ... }

Các tùy chọn của lưới

Hãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau.

 Extra small devices Phones [