Container trong Bootstrap 5: Trong Bootstrap 5, “containers” là một phần quan trọng trong cách bạn xây dựng bố cục (layout) cho trang web của mình. Containers giúp kiểm soát bố cục, xác định chiều rộng và canh lề của các thành phần trang web. Bootstrap 5 cung cấp hai loại containers chính là “container” và “container-fluid”. Dưới đây là cách sử dụng và hiểu về hai loại containers này:
- Container: Container là một loại container có kích thước cố định và giữa hai bên có các khoảng trắng (canh lề) để tạo ra một khu vực chứa nội dung. Container giúp giới hạn chiều rộng của nội dung trên các kích thước màn hình khác nhau, giúp trang web có vẻ đẹp và dễ đọc.
Cách sử dụng container:
html
<div class="container">
<!-- Nội dung của bạn ở đây -->
</div>
- Container Fluid: Container Fluid là một loại container mở rộng để lấp đầy toàn bộ kích thước ngang của khu vực chứa. Không có khoảng trắng ở cạnh hai bên. Container Fluid thích hợp cho các trang web hoặc phần của trang web cần sử dụng toàn bộ kích thước màn hình, chẳng hạn như trang chủ hoặc các trang có hình nền mở rộng.
Cách sử dụng container fluid:
html
<div class="container-fluid">
<!-- Nội dung của bạn ở đây -->
</div>
Ví dụ về việc sử dụng container và container fluid trong một trang HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Containers in Bootstrap 5</title>
</head>
<body>
<!-- Container -->
<div class="container">
<h1>Container Example</h1>
<p>This is a container.</p>
</div>
<!-- Container Fluid -->
<div class="container-fluid">
<h1>Container Fluid Example</h1>
<p>This is a container fluid.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Containers trong Bootstrap 5 giúp bạn kiểm soát bố cục và đảm bảo giao diện trang web của bạn hoạt động mượt mà trên các thiết bị và kích thước màn hình khác nhau.
Dưới đây là một ví dụ cụ thể về cách sử dụng containers trong Bootstrap 5 để tạo một trang web đơn giản:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Bootstrap 5 Container Example</title>
</head>
<body>
<!-- Container -->
<div class="container mt-5">
<header>
<h1>Welcome to Our Website</h1>
</header>
<nav>
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
<main>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</main>
<footer class="mt-5">
<p>© 2023 Your Company. All rights reserved.</p>
</footer>
</div>
<!-- Container Fluid -->
<div class="container-fluid bg-dark text-light mt-5 p-4">
<h2>Contact Information</h2>
<p>Email: [email protected]</p>
<p>Phone: 123-456-7890</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Trong ví dụ trên:
- Chúng tôi sử dụng class “container” để bọc phần tiêu đề, thanh điều hướng, nội dung chính và chân trang. Container giúp giới hạn chiều rộng và tạo khoảng cách canh lề ở cạnh hai bên của nội dung.
- Chúng tôi cũng sử dụng class “container-fluid” để tạo một container mở rộng cho phần thông tin liên hệ. Container fluid lấp đầy toàn bộ kích thước ngang của khu vực chứa mà không có khoảng cách canh lề.
Vui lòng lưu ý rằng ví dụ trên sử dụng các class từ Bootstrap để áp dụng kiểu dáng và bố cục. Bạn cần thêm liên kết đến tệp CSS và JavaScript của Bootstrap như trong ví dụ để chạy đúng cách.