Vui lòng giải thích cho tôi khi nào sử dụng các lớp học containervà row. Tôi không chắc lắm vì tài liệu của Bootstrap khá rõ ràng về phần này.
Tôi đang sử dụng Bootstrap 3.
Câu trả lời:
containerlà một vùng chứa các rowphần tử.
row các phần tử là vùng chứa các cột (tài liệu gọi nó là hệ thống lưới)
Ngoài ra, hãy containerđặt lề của nội dung đối phó với các hành vi đáp ứng của bố cục của bạn.
Do đó, containerlớp này thường được sử dụng để tạo nội dung 'đóng hộp' dựa trên hướng dẫn kiểu của dự án Bootstrap.
Nếu bạn muốn tạo một lưới có chiều rộng đầy đủ, bạn chỉ có thể sử dụng rowcác phần tử có cột bên trong (kéo dài tổng số 12col thông thường).
Các containervà rowcác lớp dành cho các phần tử bên trong phần thân. Vì vậy, một bố cục cơ bản sẽ là:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
Đối với bố cục đáp ứng đóng hộp.
Nếu bạn bỏ qua, containerbạn sẽ nhận được một bố cục toàn chiều rộng.
Jumbotron là một ví dụ điển hình về containerhành vi này. Nếu bạn đặt một phần tử Jumbotron trong một containerphần tử, nó có đường viền tròn và chiều rộng cố định dựa trên chiều rộng đáp ứng. Nếu Jumbotron nằm bên ngoài vùng chứa, nó sẽ kéo dài toàn chiều rộng mà không có đường viền.
rowcác phần tử có cột bên trong (kéo dài tổng số 12col thông thường). Tôi nghĩ rằng bạn có thể sử dụng container-fluidvà row-fluidcho điều này. (Người mới bắt đầu tham gia chương trình Bootstrap ở đây, hãy mang nó với một chút muối.)
Tôi đã tự hỏi về điều tương tự và để hiểu rằng tôi đã trải qua bootstrap.cssphiên bản 3. Câu trả lời nằm ở dòng số. 1585 đến 1605. Mình sẽ đăng những dòng đó ở đây để các bạn hiểu rõ hơn như bên dưới.
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Toàn bộ mã là tự giải thích. Tuy nhiên, để xây dựng về vấn đề này, container sẽ mất 750pxnếu chiều rộng màn hình là giữa 768pxvà 992pxvà vân vân như các chương trình mã. Bây giờ, đối với độ phân giải màn hình phổ biến hơn 1200, vùng chứa sẽ chiếm 1170px, nhưng trừ phần đệm của 30 px( 15px+15px), khoảng trống hiệu quả còn lại 1140px, được căn giữa trên màn hình khi lề trái và phải được đặt thành tự động.
Bây giờ, trong trường hợp class="row", có mã dưới đây:
.row {
margin-right: -15px;
margin-left: -15px;
}
Vì vậy, nếu hàng nằm bên trong vùng chứa, nó sẽ lấy một cách hiệu quả phần đệm 15px mỗi bên từ vùng chứa và sử dụng toàn bộ không gian. Nhưng nếu hàng lớp nằm bên trong thẻ body, nó sẽ có xu hướng di chuyển ra khỏi vùng hiển thị sang cả bên trái và bên phải của trình duyệt do lề âm.
Tôi hy vọng nó đã được làm rõ ràng.
Thùng đựng hàng
Vùng chứa cung cấp các ràng buộc về chiều rộng đối với các chiều rộng đáp ứng. Khi kích thước đáp ứng thay đổi, vùng chứa sẽ thay đổi. Các hàng và cột đều dựa trên tỷ lệ phần trăm nên chúng không cần thay đổi. Lưu ý rằng có lề 15px ở mỗi bên, bị hủy theo hàng.
Hàng
Các hàng phải luôn ở trong một vùng chứa.
Hàng cung cấp cho các cột một nơi để sống, lý tưởng nhất là có các cột cộng đến 12. Nó cũng hoạt động như một trình bao bọc vì tất cả các cột nổi bên trái, các hàng bổ sung không có chồng chéo khi các số nổi trở nên kỳ lạ.
Các hàng cũng có lề âm 15px ở mỗi bên. Div tạo nên hàng thường sẽ bị giới hạn bên trong vùng đệm của vùng chứa, chạm vào các cạnh của vùng màu hồng nhưng không được vượt ra ngoài. Lề âm 15px đẩy hàng ra trên phần đệm 15px của vùng chứa, về cơ bản là phủ định nó. Hơn nữa, các hàng đảm bảo cho bạn rằng tất cả các div bên trong nó xuất hiện trên dòng riêng của chúng, tách biệt với các hàng trước và sau.
Cột
Các cột bây giờ có đệm 15px. Phần đệm này có nghĩa là các cột thực sự chạm vào cạnh của hàng, chính nó sẽ chạm vào cạnh của vùng chứa vì hàng có lề âm và vùng chứa có vùng đệm dương. Tuy nhiên, phần đệm trên cột sẽ đẩy bất kỳ thứ gì bên trong cột đến vị trí cần thiết và cũng cung cấp rãnh 30px giữa các cột. Không bao giờ sử dụng cột bên ngoài hàng, nó sẽ không hoạt động.
Để biết thêm thông tin, tôi đề nghị bạn đọc bài viết này . Nó thực sự rõ ràng và giải thích rõ cách thức hoạt động của hệ thống lưới của Bootstrap.
Lớp 'vùng chứa' bao bọc nội dung bên trong đến giữa cổng xem. Toàn bộ nội dung có trong thẻ body có thể được đặt trong kết quả trang được hiển thị với chiều rộng được chỉ định ở giữa trang.
Lớp 'hàng' được sử dụng khi bạn cần đặt nội dung vào các cột trong một hàng, bạn có thể có tổng cộng 12 cột trong mỗi hàng.
Trong các thực hành CSS truyền thống, bạn có thể sẽ sử dụng các lớp sau:
wrapper, header, navigator, contents, footer
cách sử dụng các lớp trên có thể giống như ví dụ sau:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigator">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
Trong bootstrap, bạn có thể sử dụng nếu muốn hoặc nếu bạn đã quen với mẫu trên, các lớp bootstrap như ví dụ này:
<body>
<div class="container">
<div class="col-md-12">
<h1>Header</h1>
<p>Header contents goes here</p>
</div>
<div class="col-md-12">
<nav role="navigation" class="nav navbar">
<h1>Navigation</h1>
<p>Navigation contents goes here</p>
</nav>
</div>
<div class="col-md-12">
<div class="pagination">
<h1>Page contents</h1>
<p>Webpage contents goes here</p>
</div>
</div>
<div class="col-lg-12">
<h1>Footer contents</h1>
<p>footer contents goes here</p>
</div>
</div>
</body>
Đối với lớp hàng bạn có thể sử dụng lớp hàng khi bạn muốn thiết kế bố cục dạng bảng cho trang, nhưng khi bạn muốn hiển thị dữ liệu ở dạng bảng thì bạn nên sử dụng lớp bảng, nhưng bảng sẽ không đáp ứng được.
Để tạo bố cục dạng bảng khác với bảng dữ liệu, hãy sử dụng lớp hàng như trong ví dụ này:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
</div>
</div>
</body>
Bạn phải cố gắng tránh sử dụng bố cục dựa trên bảng và cố gắng sử dụng các bảng đáp ứng như được mô tả ở đây