Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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



   
      
      Grid Example
      
   
   
      

col-sm-3

col-sm-9

Chạy ví dụ ở trên và quan sát:

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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



   
      
      Grid Example
      
   
   
      

col-md-2

col-md-3

col-md-7

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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



   
      
      Grid Example
      
   
   
      

col-2

col-3

col-7

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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 đó.

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

combine-example.html



   
      
      Grid Example
      
   
   
      

col-md-2

col-sm-6

col-md-10

col-sm-6

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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



   
      
      Grid Example
      
   
   
      

col

col

col


col

col

col-2

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

auto-column-example.html



   
      
      Grid Example
      
      
   
   
      

col

Long content .... .... .. .. .. ...... .....

col

Short Content

col-2


col-auto

Long content .... .... .. .. .. ...... .....

col-auto

Short Content

col-2


col-auto

Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....

col-auto

Short Content

col-2

col-sm-auto

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

auto-width-example2.html



   
      
      Grid Example
      
      
   
   
      

col-sm

Long content .... .... .. .. .. ...... .....

col-sm

Short Content

col-sm-2


col-sm-auto

Long content .... .... .. .. .. ...... .....

col-sm-auto

Short Content

col-sm-2


col-sm-auto

Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....

col-sm-auto

Short Content

col-sm-2

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


col-5

col-8

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

greater-12columns-example2

(col-sm-*) 5 + 8 > 12

.col-6 .col-sm-5

.col-6 .col-sm-8

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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

Element with 12 columns

.col-2

.col-12

.col-5

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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



   
      
      Grid Example
      
   
   
      

col-md-2

col-md-3

col-md-7

0

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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.

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

complex-gallery-example.html



   
      
      Grid Example
      
   
   
      

col-md-2

col-md-3

col-md-7

1

.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



   
      
      Grid Example
      
   
   
      

col-md-2

col-md-3

col-md-7

2

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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



   
      
      Grid Example
      
   
   
      

col-md-2

col-md-3

col-md-7

3

Col-lg-6 col-md-6 col-sm-8 nghĩa là gì năm 2024

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.