Container-fluid là gì trong Bootstrap? Bài viết sẽ cung cấp cho bạn mọi điều cần biết về Container trong Bootstrap 5.

• Bài 1: Bootstrap 5 là gì?

Container trong Bootstrap là gì?

Container là một phần không thể thiếu trong Bootstrap. Container được sử dụng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng với bố cục của bạn. Container chứa phần tử row và row là container của column (còn được gọi là hệ thống lưới). Container để bao gói các phần nội dung trên website hay tạo các hộp nội dung.

Lý thuyết là như vậy, dễ hình dung nhất, nói theo kiểu nôm na hơn thì Container tạo ra một hộp chứa các phần tử khác bên trong. Chiếc hộp này có chiều rộng được thiết lập theo kích thước của màn hình hiển thị.

Bài viết này, QuanTriMang sẽ hướng dẫn chi tiết hơn nữa cách sử dụng container và các thành phần đi kèm trong Bootstrap 5. Bootstrap 5 có 2 lớp container để bạn có thể lựa chọn và sử dụng:

• Class

  
    
  Trang Bootstrap đầu tiên của QuanTriMang
    
  Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang
  

  0 cung cấp một vùng chứa có chiều rộng cố định responsive.

• Class

  
    
  Trang Bootstrap đầu tiên của QuanTriMang
    
  Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang
  

  1 cung cấp một vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của khung nhìn.

Tìm hiểu về 2 loại Container trong Bootstrap 5

Vùng chứa cố định

Sử dụng class

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

0 để tạo một vùng chứa responsive, có chiều rộng cố định.

Lưu ý rằng chiều rộng của nó (max-width) sẽ thay đổi trên các kích thước màn hình khác nhau:

Kích thước màn hìnhmax-widthExtra Small <576px100%Small ≥576px540pxMedium ≥768px720pxLarge ≥992px960pxExtra Large ≥1200px1140pxXXL ≥1400px1320px

XXL (≥1400px) là điểm mới trong Bootstrap 5. Trên Bootstrap 4 mới chỉ hỗ trợ ở điểm Extra large (≥1200px).

Ví dụ: hãy thử dùng code sau lưu nó vào 1 file HTML và thử mở nó trên cửa sổ trình duyệt. Sau đó điều chỉnh kích thước cửa sổ để xem sự thay đổi nhé!

  
  
  
  
  




  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

Vùng chứa rộng

Sử dụng class

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

1 để tạo vùng chứa có chiều rộng full với độ rộng màn hình (chiều rộng luôn là 100%)

Ví dụ:

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

Các thành phần bổ sung thêm cho Container

Các khoảng padding của Container

Mặc định, vùng chứa có phần đệm bên trái và bên phải, không có phần đệm trên/dưới. Do đó, chúng ta thường cần sử dụng thêm các tiện ích giãn cách, chẳng hạn như padding và margin bổ sung để làm cho chúng trông đẹp hơn. Ví dụ:

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

4 có nghĩa là "thêm một khoảng đêm trên cùng (padding top)". Ví dụ:

Viền và màu sắc của Container

Các tiện ích khác như đường viền và màu sắc, cũng thường được sử dụng cùng với các Container.

Ví dụ 1:

  
Quản Trị Mạng
  
Container này có đường viền và một số phần đệm và lề bổ sung.

Ví dụ 2:

  
Quản Trị Mạng
  
Container có thêm định dạng nền đen, chữ trắng và một số padding/margin.

Ví dụ 3:

  
Quản Trị Mạng
  
Container có thêm định dạng nền xanh, chữ trắng và một số padding/margin.

Bạn sẽ tìm hiểu thêm về màu sắc và các tiện ích đường viền trong các bài sau!

Responsive Container

Bạn cũng có thể sử dụng các class

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

5 để xác định khi nào vùng chứa sẽ responsive.

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

6 của vùng chứa sẽ thay đổi trên các kích thước màn hình/chế độ xem khác nhau:

ClassExtra small
<576pxSmall
≥576pxMedium
≥768pxLarge
≥992pxExtra large
≥1200pxXXL
≥1400px.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320px

Ví dụ:

.container-sm
.container-md
.container-lg
.container-xl
.container-xxl

Ví dụ trên web Quantrimang.com:

  
  
  
  
  


  

  
Container đáp ứng
  
Chỉnh lại kích thước cửa sổ trình duyệt để thấy sự thay đổi.


.container-sm
.container-md
.container-lg
.container-xl
.container-xxl

Như đã nói ở trên, Bootstrap tạo một chuỗi class container xác định trước để giúp bạn xây dựng bố cục web như ý muốn.Bạn có thể tùy biến các class container xác định trước đó bằng cách chính sửa map Sass (được tìm thấy trong

  
Trang Bootstrap đầu tiên của QuanTriMang
  
Bạn có thể học Bootstrap 5 và các phần mềm lập trình khác trên QuanTriMang

7) sở hữu chúng:

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);

Ngoài việc tùy biến Sass, bạn cũng có thể tự tạo container riêng bằng cách kết hợp Sass như ví dụ dưới đây:

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}

// Usage
.custom-container {
@include make-container();
}

Trên đây là những thông tin hay cách tạo container cơ bản bằng Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.

• Bài 3: Hệ thống lưới Grid System trong Bootstrap 5

Thứ Ba, 13/12/2022 11:03

5 ★ 5 👨 13.387

#Container #Bootstrap

0 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Bạn nên đọc

• iPhone 4 lại dính rắc rối vỡ kính vì vỏ bảo vệ
• Vô hiệu hóa quảng cáo Gmail trong Google Apps cho doanh nghiệp
• Mẹo dùng mật khẩu mạnh
• Steve Jobs nôn nóng trở lại cầm trịch Apple
• Thông số kỹ thuật ZTE nubia Red Magic 6 Pro: Một trong những gaming phone đáng sở hữu nhất hiện nay

Bootstrap

• Bài 9: Alert trong Bootstrap 5
• Bài 29: Utilities trong Bootstrap 5
• Bài 10: Button trong Bootstrap 5
• Bài 21: Navbar trong Bootstrap 5
• Bài 39: Những kiểu Grid cực nhỏ trong Bootstrap 5
• Bài 40: Grid nhỏ trong Bootstrap 5

Xem thêm

Bootstrap 5

• Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
• Bài 2: Tìm hiểu về Container trong Bootstrap
• Bài 3: Hệ thống lưới Grid System trong Bootstrap
• Bài 4: Typography trong Bootstrap 5
• Bài 5: Màu sắc trong Bootstrap 5
• Bài 6: Bảng trong Bootstrap 5
• Bài 7: Ảnh trong Bootstrap
• Bài 8: Jumbotron trong Bootstrap
• Bài 9: Alert trong Bootstrap
• Bài 10: Button trong Bootstrap
• Bài 11: Button Group trong Bootstrap
• Bài 12: Badge trong Bootstrap 5
• Bài 13: Progress Bars trong Bootstrap 5
• Bài 14: Spinner trong Bootstrap 5
• Bài 15: Pagination trong Bootstrap 5
• Bài 16: List Groups trong Bootstrap 5
• Bài 17: Cards trong Bootstrap 5
• Bài 18: Tạo menu xổ xuống trong Bootstrap 5
• Bài 19: Cách dùng Collapse trong Bootstrap 5
• Bài 20: Navs trong Bootstrap 5
• Bài 21: Navbar trong Bootstrap 5
• Bài 22: Carousel trong Bootstrap 5
• Bài 23: Modal trong Bootstrap 5
• Bài 24: Tooltip trong Bootstrap 5
• Bài 25: Popover trong Bootstrap 5
• Bài 26: Toast trong Bootstrap 5
• Bài 27: Scrollspy trong Bootstrap 5
• Bài 28: Offcanvas trong Bootstrap 5
• Bài 29: Utilities trong Bootstrap 5
• Bài 30: Flex trong Bootstrap 5
• Bài 31: Tạo Form trong Bootstrap 5
• Bài 32: Menu lựa chọn trong Bootstrap 5
• Bài 33: Checkbox và Radio Button trong Bootstrap 5
• Bài 34: Range trong Bootstrap 5
• Bài 35: Input Group trong Bootstrap 5
• Bài 36: Form Floating Label trong Bootstrap 5
• Bài 37: Form Validation trong Bootstrap 5
• Bài 38: Hệ thống Grid từ xếp chồng tới nằm ngang trong Bootstrap 5
• Bài 39: Những kiểu Grid cực nhỏ trong Bootstrap 5
• Bài 40: Grid nhỏ trong Bootstrap 5
• Bài 41: Grid Medium trong Bootstrap 5
• Bài 42: Grid Large trong Bootstrap 5

• Công nghệ
  • Ứng dụng
  • Hệ thống
  • Game - Trò chơi
  • iPhone
  • Android
  • Linux
  • Nền tảng Web
  • Đồng hồ thông minh
  • Chụp ảnh - Quay phim
  • macOS
  • Phần cứng
  • Thủ thuật SEO
  • Kiến thức cơ bản
  • Raspberry Pi
  • Dịch vụ ngân hàng
  • Lập trình
  • Dịch vụ công trực tuyến
  • Dịch vụ nhà mạng
  • Nhà thông minh
• Download
  • Ứng dụng văn phòng
  • Tải game
  • Tiện ích hệ thống
  • Ảnh, đồ họa
  • Internet
  • Bảo mật, Antivirus
  • Họp, học trực tuyến
  • Video, phim, nhạc
  • Mail
  • Lưu trữ đám mây
  • Giao tiếp, liên lạc, hẹn hò
  • Hỗ trợ học tập
  • Máy ảo
• Tiện ích
• Khoa học
  • Khoa học vui
  • Khám phá khoa học
  • Bí ẩn - Chuyện lạ
  • Chăm sóc Sức khỏe
  • Khoa học Vũ trụ
  • Khám phá thiên nhiên
• Điện máy
  • Tủ lạnh
  • Tivi
  • Điều hòa
  • Máy giặt
• Cuộc sống
  • Kỹ năng
  • Món ngon mỗi ngày
  • Làm đẹp
  • Nuôi dạy con
  • Chăm sóc Nhà cửa
  • Kinh nghiệm Du lịch
  • Halloween
  • Mẹo vặt
  • Giáng sinh - Noel
  • Tết 2023
  • Quà tặng
  • Giải trí
  • Là gì?
  • Nhà đẹp
  • TOP
  • Phong thủy
• Video
  • Công nghệ
  • Cisco Lab
  • Microsoft Lab
  • Video Khoa học
• Ô tô, Xe máy
  • Giấy phép lái xe
• Làng Công nghệ
  • Tấn công mạng
  • Chuyện công nghệ
  • Công nghệ mới
  • Trí tuệ nhân tạo (AI)
  • Anh tài công nghệ
  • Bình luận công nghệ
  • Tổng hợp
• Học CNTT
  • Quiz công nghệ
  • Microsoft Word 2016
  • Microsoft Word 2013
  • Microsoft Word 2007
  • Microsoft Excel 2019
  • Microsoft Excel 2016
  • Hàm Excel
  • Microsoft PowerPoint 2019
  • Microsoft PowerPoint 2016
  • Google Sheets - Trang tính
  • Code mẫu
  • 
    Photoshop CS6
  • Photoshop CS5
  • HTML
  • CSS và CSS3
  • Python
  • Học SQL
  • Lập trình C
  • Lập trình C++
  • Lập trình C#
  • Học HTTP
  • Bootstrap
  • SQL Server
  • JavaScript
  • Học PHP
  • jQuery
  • Học MongoDB
  • Unix/Linux
  • Học Git
  • NodeJS

Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép.