Tiêu đề Bootstrap 5

Container có thể được sửa đổi để giới hạn chiều ngang của nó theo nhiều cách. Sử dụng các lớp tiện ích của chúng tôi để uốn cong và giãn cách để điều chỉnh khoảng cách và căn chỉnh trong thanh điều hướng

Theo mặc định, các thanh điều hướng phản hồi nhanh, nhưng bạn chỉ cần thay đổi điều đó bằng lớp bootstrap 5. Chức năng của thanh điều hướng đáp ứng phụ thuộc vào plugin Thu gọn JavaScript của chúng tôi

Sử dụng phần tử "điều hướng" để đảm bảo khả năng truy cập hoặc nếu sử dụng phần tử tổng quát hơn như "div", hãy thêm thuộc tính role = "navigation". Vai trò này sử dụng từng thanh điều hướng để làm rõ cho người dùng các công nghệ hỗ trợ, chẳng hạn như khu vực mốc

Sử dụng aria-current="page" để chỉ trang hiện tại hoặc aria-current="true" để chỉ mục hiện tại trong một bộ

cú pháp

Cú pháp sau hiển thị chức năng thanh điều hướng bằng cách sử dụng các lớp bootstrap 5

Thí dụ

đầu ra

Chức năng thanh điều hướng cơ bản hiển thị trong hình ảnh bên dưới

thanh điều hướng dọc

Các ". thanh điều hướng-mở rộng-sm. -md. -lg. -xl. -xxl" sử dụng thanh điều hướng ngang đáp ứng. Nếu chúng ta không sử dụng lớp mở rộng thanh điều hướng thì chức năng thanh điều hướng sẽ tự động hiển thị theo dạng dọc. Các

cú pháp

Cú pháp sau đây hiển thị chức năng thanh điều hướng dọc bằng cách sử dụng các lớp bootstrap 5

Thí dụ

Ví dụ sau hiển thị thanh điều hướng dọc bằng cách sử dụng các lớp bootstrap 5

đầu ra

Chức năng thanh điều hướng dọc hiển thị hình ảnh bên dưới

trung tâm thanh điều hướng

Lớp "justify-content-center" đặt các mục thanh điều hướng ở vị trí trung tâm. Nếu chúng ta muốn đặt các mục ở vị trí cuối cùng, hãy sử dụng lớp "justify-content-end". Lớp này được đặt bên trong

cú pháp

Cú pháp sau đây hiển thị chức năng thanh điều hướng dọc bằng cách sử dụng các lớp bootstrap 5

Thí dụ

Ví dụ sau hiển thị thanh điều hướng dọc bằng cách sử dụng các lớp bootstrap 5

đầu ra

Chức năng thanh điều hướng ở giữa hiển thị hình ảnh bên dưới

Chức năng thanh điều hướng màu

Các lớp "theo ngữ cảnh" được đặt trong

cú pháp

Cú pháp sau hiển thị chức năng thanh điều hướng bằng cách sử dụng các lớp bootstrap 5

Thí dụ

Ví dụ sau hiển thị thanh điều hướng có màu bằng cách sử dụng các lớp bootstrap 5. chúng ta có thể thấy các màu nền khác nhau của thanh điều hướng

đầu ra

Chức năng thanh điều hướng màu hiển thị trong hình ảnh bên dưới

Chức năng thanh điều hướng có Logo

"Thương hiệu thanh điều hướng" hiển thị logo, hình ảnh và chức năng động của thanh điều hướng. Chức năng này giúp thể hiện slogan hoặc logo của công ty. Lớp này được đặt trong thẻ để sửa đổi mục điều hướng với logo bắt buộc

cú pháp

Cú pháp sau hiển thị chức năng thanh điều hướng bằng cách sử dụng các lớp bootstrap 5

Thí dụ

Ví dụ sau hiển thị thanh điều hướng có logo sử dụng bootstrap 5 lớp

đầu ra

Thanh điều hướng có chức năng logo hiển thị hình ảnh bên dưới

Chức năng thanh điều hướng với Biểu mẫu

Chức năng thanh điều hướng sử dụng một biểu mẫu để người dùng tương tác ngay lập tức. Thanh điều hướng sử dụng biểu mẫu để gửi dữ liệu của người dùng, chẳng hạn như địa chỉ email hoặc số liên hệ. Nếu chúng tôi muốn tìm kiếm bất kỳ thứ gì từ một trang web, thanh điều hướng sẽ sử dụng chức năng tìm kiếm với nút gửi

Thí dụ

Ví dụ sau hiển thị thanh điều hướng có biểu mẫu sử dụng bootstrap 5 lớp

đầu ra

Thanh điều hướng với chức năng biểu mẫu hiển thị hình ảnh bên dưới

Chuyển đổi chức năng Navbar

Thanh điều hướng chuyển đổi giúp tạo chức năng đáp ứng cho mọi kích cỡ thiết bị. Thanh điều hướng hiển thị trên các thiết bị có kích thước lớn với kích thước mặc định. Nếu màn hình máy là xl hoặc sm thì trên màn hình sẽ hiện nút bật tắt. Nút này hoạt động dưới dạng menu thả xuống với liên kết điều hướng

cú pháp

Cú pháp sau hiển thị chuyển đổi thanh điều hướng bằng cách sử dụng các lớp bootstrap 5

Thí dụ

Ví dụ sau đây hiển thị thanh điều hướng với chức năng Có thể chuyển đổi bằng cách sử dụng các lớp bootstrap 5

đầu ra

Thanh điều hướng với chức năng chuyển đổi hiển thị hình ảnh bên dưới

Chức năng Sticky Navbar

Chức năng thanh điều hướng đặt ở đâu đó trên các trang web. Trang web cuộn lên với thông tin, sau đó chức năng thanh điều hướng sẽ dính vào đầu trang và chỉ cuộn đến nội dung cơ thể. Chúng ta có thể tạo thanh điều hướng có vị trí dính trên hoặc dưới bằng cách sử dụng vị trí "sticky-top" hoặc "sticky-bottom"

cú pháp

Cú pháp sau hiển thị thanh điều hướng với vị trí trên cùng cố định

Cú pháp sau đây hiển thị thanh điều hướng có vị trí dưới cùng cố định

Thí dụ

Ví dụ sau đây cho thấy thanh điều hướng có vị trí dính trên cùng bằng cách sử dụng các lớp bootstrap 5

đầu ra

Chức năng thanh điều hướng với vị trí dính trên cùng hiển thị hình ảnh bên dưới

Chức năng thanh điều hướng với Vị trí cố định

Lớp "fixed-top" hoặc "fixed-bottom" đặt chức năng thanh điều hướng ở trên cùng hoặc dưới cùng theo mặc định. Chức năng navbar hiển thị một vị trí cố định trên trang web

cú pháp

Cú pháp sau hiển thị thanh điều hướng với vị trí trên cùng cố định

Cú pháp sau hiển thị thanh điều hướng với vị trí dưới cùng cố định

Thí dụ

Ví dụ sau đây hiển thị thanh điều hướng với vị trí cố định bằng cách sử dụng các lớp bootstrap 5. thanh điều hướng đầu tiên hiển thị ở phía trên cùng của ứng dụng và thanh điều hướng thứ hai hiển thị ở phía dưới cùng của ứng dụng. Chúng ta có thể xem dữ liệu vùng chứa khác với chức năng thanh điều hướng

đầu ra

Chức năng thanh điều hướng với vị trí cố định hiển thị hình ảnh bên dưới

Sự kết luận

Chức năng navbar hiển thị link điều hướng của ứng dụng web. Đây là một chức năng hấp dẫn, tương tác với người dùng và đơn giản trên một ứng dụng dựa trên web

Tiêu đề Bootstrap là gì?

Có bao nhiêu loại tiêu đề trong Bootstrap?

Trình chuyển đổi thanh điều hướng là gì?

Mở rộng thanh điều hướng LG là gì?