Bootstrap - Navbar: Cổng vàoNavigasi Web Chuyên Nghiệp

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những thành phần quan trọng nhất của thiết kế web hiện đại: navbar. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn các bạn vào thế giới kỳ diệu của Bootstrap navbars. Hãy lấy饮料 yêu thích của bạn, nằm xuống thoải mái, và cùng nhau bắt đầu hành trình mã hóa này nhé!

Cách 它 Works

Trước khi bắt đầu xây dựng navbars của chúng ta, hãy hiểu chúng là gì và chúng hoạt động như thế nào. Một navbar, viết tắt của navigation bar, giống như bản đồ của trang web của bạn. Nó giúp người dùng tìm đường trong sáng tạo kỹ thuật số của bạn. Trong Bootstrap, navbars là响应式 và tự động thu gọn, có nghĩa là chúng điều chỉnhBeautifully cho các kích thước màn hình khác nhau. Đó có phải là neat không?

Navbar Cơ Bản

Hãy bắt đầu với một navbar cơ bản. Dưới đây là một ví dụ đơn giản:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

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

• Chúng ta bắt đầu với một thẻ <nav> có các lớp Bootstrap.
• Lớp navbar-brand là cho tên trang web hoặc logo của bạn.
• navbar-toggler là cho chế độ xem di động, tạo ra menu "hamburger" nổi tiếng.
• Trong navbar-collapse div, chúng ta có các mục导航 trong một danh sách không có thứ tự.

Navbar Dọc

Muốn thay đổi chút ít? Hãy thử một navbar dọc:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

Phép màu ở đây là lớp flex-column. Nó chuyển navbar của chúng ta thành một navbar dọc. Cool, phải không?

Navbar Căn Trung

Đối với những ai thích mọi thứ được căn chỉnh chính xác, đây là cách để căn giữa các mục navbar của bạn:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

Lớp mx-auto là siêu anh hùng căn giữa ở đây. Nó áp dụng margin tự động trên cả hai bên, căn giữa nội dung của chúng ta.

Brand

Thương hiệu của bạn là danh tính của bạn. Hãy xem cách để làm cho nó shine:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

Mã này thêm một logo bên cạnh tên thương hiệu của bạn. Các lớp d-inline-block và align-top đảm bảo mọi thứ được align đẹp mắt.

Văn Bản

Đôi khi, bạn chỉ cần một chút văn bản trong navbar của bạn:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>

Lớp navbar-text định dạng văn bản của bạn để phù hợp với giao diện của navbar.

Ảnh và Văn Bản

Hãy kết hợp ảnh và văn bản để tạo một navbar động hơn:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Welcome to our website!
</span>
</nav>

Điều này tạo ra một navbar với cả logo và thông điệp chào mừng. Có phải nhìn chuyên nghiệp không?

Nav

Thành phần nav là trái tim của navbar. Hãy xem một ví dụ phức tạp hơn:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

Ví dụ này bao gồm một liên kết hoạt động, liên kết thông thường và một liên kết bị vô hiệu hóa. Lớp sr-only là cho screen readers, cải thiện khả năng tiếp cận.

Navbar Không Có Danh Sách

Để có giao diện sạch sẽ hơn, bạn có thể tạo một navbar không có danh sách:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</nav>

Điều này đạt được cùng kết quả mà không sử dụng các thẻ <ul> và <li>.

Navbar Với Thả Đropdown

Chuẩn bị nâng cấp? Hãy thêm một dropdown vào navbar của chúng ta:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</nav>

Lớp dropdown-toggle tạo hiệu ứng dropdown, trong khi dropdown-menu và dropdown-item định dạng nội dung dropdown.

Forms

Cần một thanh tìm kiếm? Không có vấn đề! Dưới đây cách thêm một form vào navbar của bạn:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<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>
</nav>

Lớp form-inline giữ các phần tử form trong một hàng, perfect cho navbars.

Màu Sắc

Bootstrap cung cấp nhiều màu sắc khác nhau. Dưới đây là một navbar tối:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dark Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</nav>

Chỉ cần thay đổi navbar-light thành navbar-dark và bg-light thành bg-dark. Đơn giản!

Containers

Để có sự align tốt hơn, bạn có thể bao gồm nội dung navbar của bạn trong một container:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Contained Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</div>
</nav>

Lớp container căn giữa nội dung và cung cấp một chiều rộng cố định响应.

Đặt Vị Trí

Đặt Auf Top

Muốn navbar của bạn dính trên cùng? Dưới đây cách làm:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

Lớp fixed-top làm cho navbar của bạn stays ở trên cùng của trang khi người dùng cuộn.

Tính Năng Response

Bootstrap navbars là response by default. Chúng tự động thu gọn trên màn hình nhỏ hơn và mở rộng trên màn hình lớn hơn. Ch关键是 trong lớp navbar-expand-*:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Navbar content -->
</nav>

navbar này sẽ mở rộng trên màn hình có kích thước trung bình và lớn hơn.

Toggler

Navbar toggler là gì tạo ra menu "hamburger" trên thiết bị di động:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<!-- Navbar content -->
</div>
</nav>

Nút navbar-toggler kiểm soát tính hiển thị của nội dung navbar trên màn hình nhỏ hơn.

Nội Dung External

Bạn có thể bật/tắt nội dung bên ngoài navbar too:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>

Điều này tạo ra một toggler bật/tắt nội dung bên ngoài navbar itself.

Offcanvas

Cuối cùng, hãy xem một navbar offcanvas:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Offcanvas content -->
</div>
</div>
</div>
</nav>

Điều này tạo ra một sidebar trượt vào từ bên cạnh màn hình, perfect cho navigasi di động.

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau khám phá thế giới của Bootstrap navbars, từ cấu trúc cơ bản đến các tính năng nâng cao. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thợ, vì vậy đừng ngần ngại thử nghiệm với các ví dụ này. Chúc các bạn mã hóa vui vẻ, và navbar của bạn luôn dẫn dắt người dùng đúng cách!

Credits: Image by storyset