Hướng dẫn tạo thanh điều hướng trong Bootstrap

Tiếp tục tham khảo bài học Bootstrap dưới đây của Mytour để nắm rõ cách tạo thanh điều hướng trong Bootstrap.

Hướng dẫn tạo thanh điều hướng trong Bootstrap

1. Tạo thanh điều hướng đơn giản trong Bootstrap

Navbar là thành phần được sử dụng để tạo tiêu đề phản hồi cho trang web hoặc ứng dụng, tức là tiêu đề sẽ thích hợp với mọi kích thước màn hình.

Chúng ta cũng có thể tạo các phiên bản khác nhau của thanh điều hướng, bao gồm cả thanh điều hướng có menu thả xuống và hộp tìm kiếm.

Ví dụ: Dưới đây là minh họa 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:

Kết quả sau khi thực hiện sẽ như sau:

Bên cạnh đó, chúng ta cũng có thể sử dụng logo để thay thế văn bản trong thanh điều hướng. Tuy nhiên, cần phải thiết lập chiều cao của logo một cách cẩn thận để phù hợp với chiều cao của thanh điều hướng.

Kết quả sau khi thực hiện sẽ như sau:

Lưu ý: Để căn chỉnh các phần tử trong thanh điều hướng, chúng ta có thể sử dụng các lớp tiện ích như .ml-auto, .mr-auto, .justify-content-between, và nhiều lớp khác nữa.

2. Thêm menu dạng thả cho thanh điều hướng

Bên cạnh đó, chúng ta cũng có thể thêm menu dạng thả (dropdown menu) và hộp tìm kiếm vào thanh điều hướng như ví dụ dưới đây:

Kết quả sau khi thực hiện sẽ như sau:

Mẹo: Để tạo các thanh điều hướng không cố định ở góc trên cùng hoặc dưới cùng, chúng ta có thể đặt thanh điều hướng ở bất kỳ vị trí nào trong .container, sau đó thiết lập chiều rộng và nội dung trang web.

3. Thêm biểu mẫu tìm kiếm trong thanh điều hướng

Biểu mẫu tìm kiếm là một phần rất phổ biến trên thanh điều hướng của các trang web. Chúng ta có thể thêm các điều khiển biểu mẫu và các phần tử khác vào thanh điều hướng bằng cách sử dụng lớp .form-inline trong phần tử form.

Ví dụ: Dưới đây là một ví dụ minh họa cách thêm biểu mẫu tìm kiếm vào thanh điều hướng:

Dưới đây là kết quả sau khi thực hiện:

4. Thay đổi màu nền thanh điều hướng

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

Ngoài ra, chúng ta cũng có thể sử dụng thuộc tính CSS background-color trên phần tử .navbar để tùy chỉnh chủ đề của thanh điều hướng. Dưới đây là một ví dụ minh họa:

Dưới đây là kết quả bạn sẽ nhận được:

5. Tạo thanh điều hướng cố định trong Bootstrap

Bootstrap cung cấp cơ chế để tạo thanh điều hướng cố định ở góc trên cùng hoặc dưới cùng của viewport và cuộn cùng với nội dung trên trang.

5.1. Tạo thanh điều hướng cố định ở góc trên cùng

Áp dụng lớp tiện ích .fixed-top cho phần tử .navbar để thanh điều hướng cố định ở góc trên cùng của viewport và không cuộn cùng với trang.

Ví dụ: Dưới đây là ví dụ minh họa cách tạo thanh điều hướng cố định ở góc trên cùng của viewport:

Dưới đây là kết quả bạn sẽ nhận được:

5.2. Tạo thanh điều hướng cố định bên dưới

Tương tự, để có thanh điều hướng cố định ở góc dưới cùng của viewport, chúng ta có thể thêm lớp .fixed-bottom vào phần tử .navbar như trong ví dụ dưới đây:

Dưới đây là kết quả bạn sẽ nhận được:

5.3. Tạo thanh menu cố định khi cuộn trang

Ngoài ra, để tạo thanh điều hướng cố định khi cuộn trang, chúng ta cũng có thể sử dụng lớp .sticky-top trên phần tử .navbar như ví dụ dưới đây:

Dưới đây là kết quả bạn sẽ nhận được:

Một mẹo hữu ích là để nội dung của .navbar cố định trong .container hoặc .container-fluid để căn chỉnh và padding phù hợp với phần còn lại của trang web.

Hãy nhớ thêm padding (ít nhất 70px) vào góc trên cùng hoặc dưới cùng của phần tử body để ngăn nội dung bị che phủ bởi thanh điều hướng khi tạo thanh điều hướng cố định ở góc trên cùng hoặc dưới cùng.

Ngoài ra, đừng quên thêm style sheet tùy chỉnh sau file Bootstrap CSS chính. Nếu không, các quy tắc kiểu trong style sheet sẽ bị ghi đè bởi quy tắc của Bootstrap.

Bài học này đã hướng dẫn cách tạo thanh điều hướng trong Bootstrap. Trong bài học tiếp theo, chúng tôi sẽ hướng dẫn cách tạo Breadcrumb trong Bootstrap. Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi nào, hãy để lại ý kiến của bạn trong phần bình luận bên dưới bài viết nhé.