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. Show 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 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 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 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 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 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 col-sm-auto auto-width-example2.html 4. Tạo Gallery sử dụng GridGiả 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?
greater-12columns-example greater-12columns-example2 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?
element-12columns-example 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 0 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 1 .d-flex, .flex-column (?) .p-2 (?) 5. Sử dụng .w-100Trong 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 2 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 3 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. |
