Bootstrap Navbar

Trong hướng dẫn này, bạn sẽ học cách tạo thanh điều hướng tĩnh hoặc cố định bằng cách sử dụng thành phần thanh điều hướng Bootstrap Navbar.

Tạo thanh điều hướng với Bootstrap Navbar

Bạn có thể sử dụng thành phần thanh điều hướng Bootstrap Navbar để tạo thanh điều hướng responsive ở đầu trang cho trang web hoặc ứng dụng của mình.

Thanh điều hướng responsive này sẽ được thu gọn trên các thiết bị có khung nhìn nhỏ như điện thoại di động nhưng sẽ mở rộng khi người dùng nhấp vào nút bật tắt. Tuy nhiên, nó sẽ nằm ngang như bình thường trên các thiết bị vừa và lớn như máy tính xách tay hoặc máy tính để bàn.

Bạn cũng có thể tạo các biến thể khác nhau của thanh điều hướng như thanh điều hướng với menu thả xuống và hộp tìm kiếm cũng như thanh điều hướng được định vị cố định với ít nỗ lực hơn. Ví dụ sau đây sẽ chỉ cho bạn cách tạo một thanh điều hướng tĩnh đơn giản với các liên kết điều hướng.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Profile</a>
                <a href="#" class="nav-item nav-link">Messages</a>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh điều hướng với Bootstrap Navbar
Mẹo: Thanh điều hướng yêu cầu một lớp bọc .navbar.navbar-expand{-sm|-md|-lg|-xl|-xxl} để thu gọn trên thiết bị có màn hình nhỏ và các lớp phối màu. Ngoài ra, hãy sử dụng các lớp tiện ích giãn cách để kiểm soát khoảng cách và căn chỉnh trong thanh điều hướng.
Lưu ý: Thanh điều hướng và nội dung của chúng có chiều rộng đầy đủ theo mặc định. Thay đổi vùng chứa (ví dụ .container{-sm|-md|-lg|-xl|-xxl}) để giới hạn chiều ngang của chúng.

Thêm logo vào thanh điều hướng navbar

Bạn cũng có thể đặt logo của mình bên trong thanh điều hướng, thay vì văn bản thuần túy. Tuy nhiên, bạn cần đặt chiều cao logo theo cách thủ công để vừa vặn với nó bên trong thanh điều hướng, như được hiển thị ở đây:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">
            <img src="images/logo.svg" height="28" alt="CoolBrand">
        </a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Profile</a>
                <a href="#" class="nav-item nav-link">Messages</a>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Thêm logo vào thanh điều hướng navbar
Mẹo: Sử dụng các lớp tiện ích, chẳng hạn như .ms-auto, .me-auto, .justify-content-between, v.v. để căn chỉnh các liên kết điều hướng, form, button hoặc văn bản bên trong thanh điều hướng.

Thêm menu thả xuống vào thanh điều hướng navbar

Bạn cũng có thể thêm menu thả xuống và hộp tìm kiếm trong thanh điều hướng, như được hiển thị ở đây:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Profile</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Inbox</a>
                        <a href="#" class="dropdown-item">Sent</a>
                        <a href="#" class="dropdown-item">Drafts</a>
                    </div>
                </div>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Thêm menu thả xuống vào thanh điều hướng navbar

Thêm ô tìm kiếm bên trong thanh điều hướng navbar

Ô tìm kiếm là một thành phần rất phổ biến của thanh điều hướng và bạn đã thấy nó khá phổ biến trên các trang web khác nhau. Bạn có thể đặt các form khác nhau trong thanh điều hướng bằng cách sử dụng lớp .d-flex trên phần tử <form>, như được minh họa trong ví dụ sau:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Profile</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Inbox</a>
                        <a href="#" class="dropdown-item">Sent</a>
                        <a href="#" class="dropdown-item">Drafts</a>
                    </div>
                </div>
            </div>
            <form class="d-flex">
                <div class="input-group">                    
                    <input type="text" class="form-control" placeholder="Search">
                    <button type="button" class="btn btn-secondary"><i class="bi-search"></i></button>
                </div>
            </form>
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Thêm ô tìm kiếm bên trong thanh điều hướng navbar

Thay đổi màu của thanh điều hướng navbar

Bạn cũng có thể thay đổi cách phối màu của thanh điều hướng bằng cách sử dụng lớp .navbar-light cho màu nền sáng hoặc lớp .navbar-dark cho màu nền tối. Sau đó, tùy chỉnh nó bằng các lớp tiện ích màu nền, chẳng hạn như .bg-dark, .bg-primaryv.v.

Ngoài ra, bạn cũng có thể tự mình áp dụng thuộc tính CSS background-color trên phần tử .navbar để tùy chỉnh chủ đề thanh điều hướng, như được minh họa trong ví dụ sau:

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

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

<nav class="navbar navbar-light" style="background-color: #ddeeff;">
    <!-- Navbar content -->
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi màu của thanh điều hướng navbar

Thanh điều hướng cố định

Bootstrap cũng cung cấp cơ chế tạo thanh điều hướng cố định ở trên cùng, cố định ở dưới cùng hoặc cố định ở trên cùng khi cuộn trang (tức là cuộn theo trang cho đến khi nó lên đến đầu).

Thanh điều hướng được cố định ở trên cùng

Áp dụng lớp tiện ích vị trí .fixed-top cho phần tử .navbar để cố định thanh điều hướng ở đầu khung nhìn, để nó không cuộn theo trang. Đây là một ví dụ:

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

Thanh điều hướng được cố định ở trên cùng khi cuộn trang

Bạn cũng có thể tạo thanh điều hướng được cố định trên cùng và cuộn với trang cho đến khi nó lên đến đầu trang, sau đó ở đó, chỉ bằng cách sử dụng lớp .sticky-top trên phần tử .navbar, như sau:

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
    <!-- Navbar content -->
</nav>
Lưu ý: Hãy nhớ thêm padding(ít nhất 70px) vào đầu hoặc cuối phần tử <body> để ngăn nội dung đi bên dưới thanh điều hướng trong khi triển khai thanh điều hướng trên cùng hoặc dưới cùng cố định . Ngoài ra, hãy nhớ thêm CSS tùy chỉnh của bạn sau tệp CSS của Bootstrap, nếu không các quy tắc định kiểu trong CSS của bạn có thể bị Bootstrap ghi đè.
Mẹo: Đặt nội dung của .navbar bên trong .container, .container-fluid hoặc .container{-sm|-md|-lg|-xl|-xxl} để đệm và căn chỉnh thích hợp với phần còn lại của nội dung.
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.