Có nhiều cách để sửa thanh điều hướng hoặc tiêu đề ở đầu trang để luôn hiển thị. trong ví dụ này, chúng tôi có xu hướng minh họa cách thêm danh mục cố định khi cuộn trang. để kiểm tra sự khác biệt giữa menu điều hướng chính truyền thống và bị kẹt, chỉ cần cuộn. lưu ý, điều này có thể chỉ hoạt động cho màn hình máy tính để bàn. tuy nhiên, bạn vẫn sẽ tùy chỉnh ví dụ mã của chúng tôi
Thanh điều hướng Bootstrap là một tiêu đề đáp ứng menu có điều hướng. Bootstrap hỗ trợ bật nhiều hiệu ứng giao diện người dùng với thành phần thanh điều hướng này. Ví dụ,
- Sticky navbar khi cuộn nội dung
- Hiệu ứng trượt vào bằng cách sử dụng Bootstrap expand-collapse
- Điều hướng menu đáp ứng thân thiện với thiết bị di động
Bài viết này dành cho việc tạo thanh điều hướng cố định Bootstrap trên tiêu đề trên cùng của trang. Nó hiển thị cả nội dung tĩnh và động trên tiêu đề điều hướng. Hãy cho chúng tôi xem cách hiển thị thanh điều hướng cố định trên một trang bằng Bootstrap
Ví dụ nhanh này hiển thị mã để hiển thị thanh điều hướng thanh. Nó bao gồm Boostrap vào mã bằng cách sử dụng URL CDN. Bạn cũng có thể cài đặt Bootstrap qua trình soạn thảo vào thư mục nhà cung cấp ứng dụng của mình
Nó sử dụng Bootstrap dính trên cùng để. phần tử thanh điều hướng
Ví dụ nhanh
Bao gồm điều này vào HTML
Đặt thanh điều hướng dính Bootstrap này vào
- Home
- Contact
- About
Hành vi mặc định của thanh điều hướng Bootstrap
Danh sách dưới đây hiển thị hành vi mặc định của thanh điều hướng Bootstrap. Bài viết này làm nổi bật thành phần giao diện người dùng này nhiều hơn bằng cách làm cho nó dính khi cuộn
- Thanh điều hướng phản hồi theo mặc định trong bất kỳ chế độ xem nào
- Nó bị ẩn để in nhưng có thể bị ghi đè bằng cách thêm. d-in vào. thanh điều hướng
- Nó cho phép cơ chế hỗ trợ xác định thanh điều hướng bằng cách sử dụng. Bootstrap khuyên bạn nên thêm thuộc tính role=”navigation” cho
như container
Công dụng của thanh điều hướng cố định Bootstrap
Thanh điều hướng dính Bootstrap cung cấp phần tử tiêu đề cố định chủ yếu ở trên cùng. Đôi khi, nó sẽ được sử dụng ở chân trang và biểu mẫu
Danh sách các mục sau đây cho thấy một số cách sử dụng thanh điều hướng cố định trong trang web
- Để tạo menu tiêu đề cố định. Ví dụ. Các liên kết menu tiêu đề như 'Liên hệ', 'Yêu cầu báo giá' sẽ hữu ích nếu chúng dính khi cuộn
- Để tạo liên kết chân trang cố định. Ví dụ. Tùy chọn chia sẻ phương tiện truyền thông xã hội ở chân trang có thể dính để cho phép người dùng chia sẻ nội dung bất cứ lúc nào đọc
- Để giữ chân trang biểu mẫu HTML cố định khi cuộn. Hình thức thanh toán có kiểm soát 'Thanh toán ngay' hoặc 'Mua ngay' sẽ được cố định bất kể cuộn trang. Nó làm giảm ma sát và cho phép người dùng mua sản phẩm dễ dàng
Thanh điều hướng buồn nôn Bootstrap với menu tĩnh HTML
Mã này sẽ giúp người dùng có trang web tĩnh muốn thêm thanh điều hướng cố định trong tiêu đề
Ví dụ này bao gồm một menu tiêu đề tĩnh có thể mở rộng. Nó hiển thị menu thả xuống của menu phụ khi nhấp vào liên kết menu chính
bootstrap-sticky-navbar-static. php
Site logo
- Home
- Contact
- About
- Services
Map
integration Chart generation Report
generation
- Projects
Chat plugin
Form builder
- What's new
Search
Page scroll content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent tincidunt dolor eget lorem blandit, auctor
porttitor enim faucibus. Mauris sed elit sollicitudin,
aliquam lorem nec, suscipit ex. Sed mollis rhoncus
scelerisque. Morbi varius a est sed luctus. Morbi sapien
velit, venenatis a sapien vitae, commodo rutrum erat.
Nam volutpat diam ac convallis egestas. Nunc convallis
tempor hendrerit. Aenean turpis quam, viverra eu eros
quis, ornare tristique velit.
Thanh điều hướng Bootstrap với liên kết mục tiêu dữ liệu
Trong thanh điều hướng dính bootstrap, nó cho phép chỉ định mục tiêu dữ liệu để mở rộng
Trong ví dụ này, thanh điều hướng tiêu đề hiển thị biểu tượng giỏ hàng khi tải trang. HTML tiêu đề cũng chứa thông tin giỏ hàng được ẩn theo mặc định
Phần tử giỏ hàng của thanh điều hướng nhắm mục tiêu thông tin giỏ hàng ẩn này để mở rộng nó trong sự kiện nhấp chuột
thanh điều hướng với mục tiêu dữ liệu. php
Item count = 5
Total price = $375
Page scroll content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent tincidunt dolor eget lorem blandit, auctor
porttitor enim faucibus. Mauris sed elit sollicitudin,
aliquam lorem nec, suscipit ex. Sed mollis rhoncus
scelerisque. Morbi varius a est sed luctus. Morbi sapien
velit, venenatis a sapien vitae, commodo rutrum erat.
Nam volutpat diam ac convallis egestas. Nunc convallis
tempor hendrerit. Aenean turpis quam, viverra eu eros
quis, ornare tristique velit.
Ảnh chụp màn hình bên dưới biểu tượng giỏ hàng và thông tin giỏ hàng được mở rộng. Nó hiển thị số lượng mặt hàng trong giỏ hàng và tổng số tiền
Search
Page scroll content Dolor sit amet, consectetur adipiscing elit.
Tập lệnh cơ sở dữ liệu
Nhập tập lệnh cơ sở dữ liệu này để hiển thị thanh điều hướng cố định Bootstrap động. Nó chứa các mục menu và dữ liệu quan hệ cha-con