Bootstrap - Bố cục Sidebar
Xin chào các bạn phát triển web đang theo đuổi! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các sidebar Bootstrap. Là một giáo viên khoa học máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn qua chủ đề này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu!
Sidebar là gì?
Trước khi bắt đầu mã hóa, hãy cùng hiểu sidebar là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách, và có một cột hẹp ở bên cạnh trang với thông tin bổ sung hoặc liên kết nhanh. Đó chính là sidebar trong thiết kế web!
Sidebar là một cột dọc thường được đặt ở bên trái hoặc bên phải của trang web. Nó thường chứa các liên kết điều hướng, thông tin bổ sung hoặc nội dung khác bổ sung cho khu vực nội dung chính. Sidebars giúp tổ chức thông tin và cải thiện trải nghiệm người dùng bằng cách cung cấp quyền truy cập nhanh vào các yếu tố quan trọng.
Tạo một Sidebar Cơ Bản với Bootstrap
Bây giờ chúng ta đã biết sidebar là gì, hãy tạo một sidebar bằng Bootstrap. Chúng ta sẽ bắt đầu với một ví dụ đơn giản và từ từ mở rộng.
Bước 1: Thiết lập cấu trúc HTML
Đầu tiên, chúng ta cần thiết lập cấu trúc HTML. Dưới đây là một mẫu cơ bản:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sidebar Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 sidebar">
<!-- Nội dung của sidebar sẽ được đặt ở đây -->
</div>
<!-- Nội dung chính -->
<div class="col-md-9 main-content">
<!-- Nội dung chính sẽ được đặt ở đây -->
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Trong mẫu này, chúng ta đã tạo một container với hai cột: một cho sidebar (3 đơn vị rộng) và một cho nội dung chính (9 đơn vị rộng). Bootstrap sử dụng hệ thống lưới 12 cột, vì vậy các số này cộng lại bằng 12.
Bước 2: Thêm nội dung vào sidebar
Hãy thêm một chút nội dung vào sidebar của chúng ta:
<!-- Sidebar -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Sidebar Menu</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Về chúng tôi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dịch vụ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Liên hệ</a>
</li>
</ul>
</div>Tại đây, chúng ta đã thêm một tiêu đề và một danh sách các liên kết điều hướng vào sidebar. Class bg-light cho sidebar có màu nền nhạt.
Bước 3: Thêm nội dung chính
Hãy thêm một chút nội dung vào khu vực chính:
<!-- Main content -->
<div class="col-md-9 main-content">
<h1 class="mt-3">Chào mừng đến với trang web của chúng tôi</h1>
<p>Đây là khu vực nội dung chính. Đây là nơi mà thông tin chính của trang web của bạn sẽ được hiển thị.</p>
</div>Cải thiện Sidebar
Bây giờ chúng ta đã có một sidebar cơ bản, hãy cải thiện nó với một số tính năng bổ sung.
Thêm hộp tìm kiếm
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Sidebar Menu</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="Tìm kiếm" aria-label="Tìm kiếm">
<button class="btn btn-outline-success" type="submit">Tìm kiếm</button>
</form>
<!-- ... phần còn lại của nội dung sidebar ... -->
</div>Điều này thêm một hộp tìm kiếm ở đầu sidebar, cho phép người dùng tìm kiếm nhanh chóng.
Thêm menu thả xuống
Hãy thêm một menu thả xuống vào sidebar:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sản phẩm
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Sản phẩm 1</a></li>
<li><a class="dropdown-item" href="#">Sản phẩm 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Khuyến mãi đặc biệt</a></li>
</ul>
</li>Thêm mã này vào trong <ul class="nav flex-column"> của sidebar. Điều này tạo ra một menu thả xuống cho "Sản phẩm".
Làm cho Sidebar T响应式
Một trong những thách thức với sidebars là làm cho chúng hoạt động tốt trên các thiết bị di động. Hãy làm cho sidebar của chúng ta trở nên响应式:
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
Chuyển đổi Sidebar
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... nội dung sidebar ... -->
</div>
</div>
<!-- Nội dung chính -->
<div class="col-md-9 main-content">
<!-- ... nội dung chính ... -->
</div>
</div>
</div>Chúng ta đã thêm một nút chuyển đổi chỉ xuất hiện trên màn hình nhỏ (d-md-none), và cuộn nội dung sidebar trong một div có thể gập lại. Trên màn hình lớn, sidebar sẽ luôn hiển thị (d-md-block).
Định dạng Sidebar
Cuối cùng, hãy thêm một chút CSS tùy chỉnh để làm cho sidebar của chúng ta trông đẹp hơn:
<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>Thêm này vào <head> của HTML. CSS này làm cho sidebar có chiều cao đầy đủ, thêm mộtshadow mờ và định dạng các liên kết điều hướng.
Kết luận
Chúc mừng! Bạn đã tạo ra một sidebar Bootstrap hoàn chỉnh và响应式. Hãy nhớ, thực hành làm nên完美, vì vậy đừng ngần ngại thử nghiệm với các bố cục và phong cách khác nhau.
Dưới đây là bảng tóm tắt các class Bootstrap chúng ta đã sử dụng:
| Class | Mục đích |
|---|---|
| container-fluid | Tạo một container rộng toàn bộ |
| row | Tạo một nhóm cột nằm ngang |
| col-md-3 | Tạo một cột 3 đơn vị rộng trên màn hình trung bình và lớn hơn |
| bg-light | Thêm màu nền nhạt |
| nav | Chỉ định một thành phần điều hướng |
| nav-item | Định dạng một mục điều hướng |
| nav-link | Định dạng một liên kết điều hướng |
| dropdown | Tạo một menu thả xuống |
| btn | Định dạng một nút |
| form-control | Định dạng các input form |
Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Hãy nhớ, mỗi người thợ giỏi đều từng là người mới bắt đầu. Hành trình phát triển web của bạn vừa mới bắt đầu, và tôi rất mong đợi xem nó sẽ đưa bạn đến đâu!
Credits: Image by storyset