Bootstrap - Headers Demo
Headers là gì?
Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới thú vị của các headers Bootstrap. Nhưng trước khi bắt đầu, hãy cùng bắt đầu từ những điều cơ bản. Hãy tưởng tượng bạn đang đọc một cuốn sách - điều đầu tiên bạn thấy ở đầu mỗi chương là gì? Đúng rồi, đó là headers! Trong thiết kế web, headers có mục đích tương tự.
Headers thường là phần trên cùng của một trang web chứa các yếu tố điều hướng quan trọng, thương hiệu và đôi khi là thông tin hoặc lời kêu gọi hành động quan trọng. Nó giống như tấm thảm chào đón cho trang web của bạn, chào đón khách truy cập và giúp họ tìm đường.
Tại sao headers lại quan trọng?
Headers quan trọng vì nhiều lý do:
- Chúng cung cấp một giao diện nhất quán trên toàn trang web
- Chúng cải thiện điều hướng và trải nghiệm người dùng
- Chúng củng cố nhận diện thương hiệu của bạn
- Chúng có thể tăng cường SEO (Tối ưu hóa công cụ tìm kiếm) cho trang web của bạn
Bây giờ chúng ta đã hiểu headers là gì và tại sao chúng lại quan trọng, hãy cùng xem Bootstrap có thể giúp chúng ta tạo ra những headers ấn tượng như thế nào!
Bắt đầu với Headers Bootstrap
Trước khi chúng ta nhảy vào mã, hãy chắc chắn rằng bạn đã bao gồm Bootstrap trong dự án của mình. Nếu bạn chưa từng làm điều này trước đây, đừng lo lắng! Nó rất đơn giản như việc thêm vài dòng vào tệp HTML của 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 Headers Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Headers của bạn sẽ nằm ở đây -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Mã này thiết lập cấu trúc HTML cơ bản và bao gồm các tệp CSS và JavaScript của Bootstrap. Hãy tưởng tượng nó như việc chuẩn bị sân khấu cho buổi biểu diễn headers của chúng ta!
Tạo Headers Đơn giản
Hãy bắt đầu với một headers đơn giản. Chúng ta sẽ sử dụng thành phần navbar của Bootstrap làm nền tảng:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Trang Web Của Tôi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" 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>
</div>
</nav>
</header>Hãy phân tích này:
-
<header>: Đậy kín toàn bộ phần headers. -
<nav class="navbar navbar-expand-lg navbar-light bg-light">: Tạo một navbar có màu sáng và mở rộng trên màn hình lớn. -
<div class="container">: Cân bằng nội dung và cung cấp padding响应式. -
<a class="navbar-brand">: Thường là nơi bạn đặt logo hoặc tên trang web. - The
<button>element tạo một nút toggle cho chế độ xem di động. -
<div class="collapse navbar-collapse">: Chứa các mục menu sẽ bị thu gọn trên màn hình nhỏ. -
<ul class="navbar-nav ms-auto">: Tạo danh sách điều hướng, căn phải (ms-auto).
Thêm Phần Hero
Để làm headers của chúng ta trở nên ấn tượng hơn, hãy thêm một phần hero ngay dưới navbar:
<header>
<!-- Mã navbar trước đó ở đây -->
<div class="bg-primary text-white py-5">
<div class="container">
<h1 class="display-4">Chào mừng đến với Trang Web Của Tôi</h1>
<p class="lead">Đây là một đơn vị hero đơn giản, một thành phần phong cách jumbotron để gọi sự chú ý đến nội dung hoặc thông tin nổi bật.</p>
<a class="btn btn-light btn-lg" href="#" role="button">Tìm hiểu thêm</a>
</div>
</div>
</header>Mã này tạo một phần nền màu xanh với chữ trắng, một tiêu đề lớn, một đoạn văn và một nút kêu gọi hành động. Nó giống như thêm một ánh đèn Spotlight vào headers - thu hút sự chú ý đến thông điệp quan trọng nhất bạn muốn truyền tải.
Làm cho nóResponsive
Một trong những điều tốt nhất về Bootstrap là tính tương thích响应式 tích hợp sẵn. Headers của chúng ta sẽ tự động điều chỉnh cho các kích thước màn hình khác nhau, nhưng chúng ta có thể cải thiện điều này thêm:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Nội dung navbar trước đó -->
</nav>
<div class="bg-primary text-white py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4">Chào mừng đến với Trang Web Của Tôi</h1>
<p class="lead">Đây là một đơn vị hero đơn giản, một thành phần phong cách jumbotron để gọi sự chú ý đến nội dung hoặc thông tin nổi bật.</p>
<a class="btn btn-light btn-lg" href="#" role="button">Tìm hiểu thêm</a>
</div>
<div class="col-lg-6 d-none d-lg-block">
<img src="path/to/your/image.jpg" alt="Hình ảnh headers" class="img-fluid rounded">
</div>
</div>
</div>
</div>
</header>Mã này chia phần hero thành hai cột trên màn hình lớn, với văn bản ở bên trái và hình ảnh ở bên phải. Hình ảnh bị ẩn trên màn hình nhỏ để duy trì một bố cục sạch sẽ.
Headers Dính
Muốn headers của bạn dính ở đỉnh trang khi người dùng cuộn? Chỉ cần thêm lớp fixed-top vào navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<!-- Nội dung navbar -->
</nav>Nhớ thêm một chút padding vào body để ngăn nội dung bị che khuất bởi headers dính:
<style>
body {
padding-top: 56px;
}
</style>Tùy chỉnh Headers
Bootstrap cung cấp một điểm khởi đầu tuyệt vời, nhưng đừng ngần ngại thêm phong cách riêng của bạn! Dưới đây là một ví dụ về cách bạn có thể tùy chỉnh headers:
<style>
.custom-header {
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
.custom-header .navbar-brand,
.custom-header .nav-link {
color: white !important;
}
.custom-header .nav-link:hover {
color: #f8f9fa !important;
}
</style>
<header class="custom-header">
<!-- Nội dung headers của bạn -->
</header>CSS này tạo một nền渐变 và đảm bảo rằng tất cả các văn bản đều trắng và dễ đọc.
Kết luận
Và thế là chúng ta đã cùng nhau hành trình qua vùng đất của headers Bootstrap, từ các navbar đơn giản đến các phần hero ấn tượng. Nhớ rằng, những headers tốt nhất không chỉ trông đẹp mà còn phục vụ người dùng tốt. Vậy đừng ngần ngại thử nghiệm và tìm ra điều gì hoạt động tốt nhất cho trang web của bạn.
Dưới đây là bảng tham khảo nhanh các lớp Bootstrap chúng ta đã sử dụng:
| Lớp | Mục đích |
|---|---|
| navbar | Tạo một thành phần điều hướng |
| navbar-expand-lg | Xác định điểm mà navbar mở rộng |
| navbar-light | Đặt màu sắc nhẹ cho navbar |
| bg-light | Đặt nền sáng |
| container | Cân bằng nội dung và cung cấp padding响应式 |
| navbar-brand | Định dạng khu vực thương hiệu/logo |
| navbar-toggler | Tạo nút toggle cho chế độ xem di động |
| collapse navbar-collapse | Bọc các nội dung có thể thu gọn của navbar |
| navbar-nav | Định dạng danh sách điều hướng toàn bộ |
| nav-item | Định dạng mỗi mục điều hướng |
| nav-link | Định dạng các liên kết trong navbar |
| fixed-top | Làm navbar dính ở đỉnh viewport |
| bg-primary | Đặt nền màu chính (thường là xanh lam) |
| text-white | Đặt màu văn bản trắng |
| display-4 | Tạo tiêu đề lớn, ấn tượng |
| lead | Định dạng đoạn văn để nổi bật |
| btn btn-light btn-lg | Tạo nút lớn, màu sáng |
Tiếp tục thực hành, giữ vững sự tò mò, và sớm bạn sẽ tạo ra các headers không chỉ hoạt động tốt mà còn trông tuyệt vời. Chúc bạn may mắn với mã code!
Credits: Image by storyset