Bootstrap - Navigation Demo

What is a Navbar?

Xin chào các bạn nhà phát triển web đang học hỏi! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới thú vị của các thanh điều hướng Bootstrap, hoặc như chúng ta thường gọi, "navbars." Hãy tưởng tượng bạn đang xây dựng một ngôi nhà - navbar giống như hành lang kết nối tất cả các phòng. Nó là trung tâm giúp khách truy cập di chuyển dễ dàng trên website của bạn.

Thanh navbar là một thành phần điều hướng mạnh mẽ nằm ở đỉnh trang web của bạn, cung cấp các liên kết đến các phần hoặc trang khác nhau của website. Nó giống như một bản đồ cho khách truy cập, hướng dẫn họ qua khu vực số của bạn.

Why Use Bootstrap for Navbars?

Bootstrap, các bạn ơi, giống như một bộ công cụ siêu anh hùng cho các nhà phát triển web. Nó được trang bị đầy đủ các thành phần thiết kế sẵn giúp cuộc sống của chúng ta dễ dàng hơn. Sử dụng Bootstrap cho navbar có nghĩa là:

1. Tính nhất quán trên các thiết bị khác nhau (thiết kế响应式)
2. Dễ tùy chỉnh
3. Hỗ trợ内置 cho nhiều mẫu điều hướng khác nhau

Bây giờ, hãy c rolled up our sleeves and start building!

Basic Navbar Structure

Dưới đây là cấu trúc cơ bản của một navbar Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Your Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>

Hãy phân tích này:

1. <nav class="navbar navbar-expand-lg navbar-light bg-light">: Đây là bộ chứa navbar chính. Các lớp xác định vẻ ngoài và hành vi của nó.
2. <a class="navbar-brand" href="#">: Đây là nơi đặt tên thương hiệu hoặc logo của bạn.
3. <button class="navbar-toggler">: Nút này xuất hiện trên màn hình nhỏ hơn để bật/tắt navbar.
4. <div class="collapse navbar-collapse">: Đây chứa các mục navbar sẽ bị thu gọn trên màn hình nhỏ hơn.
5. <ul class="navbar-nav">: Danh sách không thứ tự chứa các mục điều hướng của chúng ta.
6. <li class="nav-item">: Mỗi mục danh sách đại diện cho một mục điều hướng.

Customizing Your Navbar

Changing Colors

Bootstrap cung cấp nhiềuHEME schemes. Hãy thử một navbar tối:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar content -->
</nav>

Ở đây, chúng tôi thay đổi navbar-light bg-light thành navbar-dark bg-dark. Đó giống như cho navbar của bạn một的外观 nocturnal!

Adding a Search Form

Muốn thêm một tính năng tìm kiếm? Dưới đây là cách làm:

<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

Thêm này vào trong navbar-collapse div. Đó giống như thêm một kính lúp vào hành lang điều hướng của bạn!

Dropdown Menus

Hãy làm cho mọi thứ thú vị hơn với một menu thả xuống:

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

Điều này tạo ra một menu thả xuống trong navbar của bạn. Đó giống như thêm một phòng bí mật vào hành lang điều hướng của bạn!

Responsive Behavior

Bootstrap navbars là响应式默认. Trên màn hình nhỏ hơn, navbar thu gọn thành một nút bật/tắt (thường được gọi là "hamburger menu"). Điều này đảm bảo rằng导航是可以用于所有设备.

Để xem điều này trong hành động, hãy thử thay đổi kích thước cửa sổ trình duyệt của bạn. Bạn sẽ thấy các mục navbar biến mất và nút bật/tắt xuất hiện. Nhấp vào nút này sẽ hiển thị các mục điều hướng của bạn trong định dạng thả xuống.

Best Practices

1. Giữ cho nó đơn giản: Đừng làm rối loạn người dùng với quá nhiều tùy chọn.
2. Sử dụng các nhãn rõ ràng: Đảm bảo rằng các mục điều hướng của bạn dễ hiểu.
3. Nêu bật trang hiện tại: Sử dụng lớp active để cho người dùng biết họ đang ở đâu.
4. Xem xét thương hiệu của bạn: Chọn màu sắc và phong cách phù hợp với thiết kế tổng thể của bạn.

Conclusion

Chúc mừng! Bạn vừa xây dựng navbar Bootstrap đầu tiên của mình. Nhớ rằng, thực hành làm cho hoàn hảo. Thử các kết hợp khác nhau, chơi với màu sắc, và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt các lớp Bootstrap chính chúng ta đã sử dụng:

Class	Purpose
navbar	Xác định bộ chứa navbar chính
navbar-expand-lg	Đặt điểm dừng cho navbar mở rộng
navbar-light/dark	Đặt màu sắc của navbar
bg-light/dark	Đặt màu nền của navbar
navbar-brand	Định dạng khu vực thương hiệu/logo
navbar-toggler	Tạo nút bật/tắt cho màn hình nhỏ
navbar-nav	Định dạng danh sách điều hướng
nav-item	Định dạng từng mục điều hướng
nav-link	Định dạng các liên kết trong mục điều hướng
dropdown-toggle	Tạo nút thả xuống
dropdown-menu	Định dạng bộ chứa menu thả xuống
dropdown-item	Định dạng các mục trong menu thả xuống

Bây giờ hãy tiến lên và tạo những navbar tuyệt vời! Nhớ rằng, mọi website tuyệt vời đều bắt đầu từ导航 tuyệt vời. Chúc bạn may mắn với mã code!

Credits: Image by storyset