Chỉ áp dụng cho Bootstrap 3. Bỏ qua các chữ cái (x s , sm , md , lg ) bây giờ , Tôi sẽ bắt đầu chỉ bằng những con số ...
Vì vậy, nếu bạn muốn hai cột bằng nhau để mở rộng một div, hãy viết _<div class="col-xs-6">Column 1</div> <div class="col-xs-6">Column 2</div> _Hoặc, nếu bạn muốn ba cột không bằng nhau để trải rộng cùng chiều rộng đó, bạn có thể viết: _<div class="col-xs-2">Column 1</div> <div class="col-xs-6">Column 2</div> <div class="col-xs-4">Column 3</div> _Bạn sẽ nhận thấy số cột luôn luôn tăng lên 12. Nó có thể nhỏ hơn mười hai, nhưng hãy cẩn thận nếu có nhiều hơn 12, vì các div vi phạm của bạn sẽ va vào hàng tiếp theo (không phải _.row_, là một số khác câu chuyện hoàn toàn). Bạn cũng có thể lồng các cột trong các cột , (tốt nhất với _.row_ bao quanh chúng), chẳng hạn như: _<div class="col-xs-6"> <div class="row"> <div class="col-xs-4">Column 1-a</div> <div class="col-xs-8">Column 1-b</div> </div> </div> <div class="col-xs-6"> <div class="row"> <div class="col-xs-2">Column 2-a</div> <div class="col-xs-10">Column 2-b</div> </div> </div> _Mỗi bộ div được lồng cũng kéo dài tới 12 cột của div cha. LƯU Ý: Vì mỗi lớp _.col_ có lớp đệm 15px ở hai bên, bạn nên thường bọc các cột lồng nhau trong một _.row_, mà có lề -15px. Điều này tránh trùng lặp phần đệm và giữ cho nội dung được xếp thành hàng giữa các lớp col lồng nhau và không lồng nhau. - Bạn không hỏi cụ thể về cách sử dụng _xs, sm, md, lg_, nhưng họ luôn song hành để tôi không thể không chạm vào nó ... Nói tóm lại, chúng được sử dụng để xác định kích thước màn hình mà lớp đó nên áp dụng:
Bạn nên thường phân loại một div bằng nhiều lớp cột để nó hoạt động khác nhau tùy thuộc vào kích thước màn hình (đây là trung tâm của những gì làm cho bootstrap phản hồi). ví dụ: một div có các lớp _col-xs-6_ và _col-sm-4_ sẽ kéo dài một nửa màn hình trên điện thoại di động (xs) và 1/3 màn hình trên máy tính bảng (sm). _<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) --> <div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet --> _LƯU Ý: theo nhận xét bên dưới, các lớp lưới cho kích thước màn hình nhất định áp dụng cho kích thước màn hình đó và lớn hơn trừ khi một tuyên bố khác ghi đè lên nó (tức là _col-xs-6 col-md-4_ kéo dài 6 cột trên xs và sm và 4 cột trên md và lg, mặc dù sm và lg không bao giờ được khai báo rõ ràng) LƯU Ý: nếu bạn không xác định xs, nó sẽ mặc định là _col-xs-12_ (tức là _col-sm-6_ là một nửa chiều rộng trên màn hình sm, md và lg, nhưng toàn chiều rộng trên màn hình xs). LƯU Ý: thực sự hoàn toàn ổn nếu _.row_ của bạn bao gồm hơn 12 cols, miễn là bạn biết họ sẽ phản ứng như thế nào. - Đây là một vấn đề gây tranh cãi, và không phải ai cũng đồng ý.
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 ô:
Bootstrap4 có 5 Css-class khác nhau:
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. 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)). <!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-*": 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). <!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-*".
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. Nguyên tắc hoạt động của ".col-lg-*"& ".col-xl-*" cũng giống với ".col-sm-*", ".col-md-*". 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). <!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. 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 đó.
<!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>
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): <!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ó.
<!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>
<!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> 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?
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>
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 <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>
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ị. <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>
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 ) <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. <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. <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>
|
