Bootstrap 5 thanh điều hướng cố định khi cuộn

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ụ,

1. Sticky navbar khi cuộn nội dung
2. Hiệu ứng trượt vào bằng cách sử dụng Bootstrap expand-collapse
3. Đ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

1. Để 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
2. Để 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
3. Để 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

Menu động trong thanh điều hướng cố định

Ví dụ này bao gồm HTML giống như ví dụ về menu tĩnh. Sự khác biệt là các mục menu là từ cơ sở dữ liệu

Mã này sử dụng một DataSource lớp PHP. php để xử lý các hoạt động cơ sở dữ liệu. Nó sử dụng MySqli với câu lệnh chuẩn bị để truy cập cơ sở dữ liệu

bootstrap-sticky-navbar-dynamic. php

select($query);
?>









    

        
            
        
        

            


                 $val){?>
                

                    select($query, $paramType, $paramValue);
                    ?>
                    
                    

                         $v) {?>
                        
                        
                    
                    
                
            
            
                
                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.
            
        

    



   

Responsive Bootstrap thanh điều hướng cố định

Thanh điều hướng Bootstrap đáp ứng theo mặc định. Trong chế độ xem trên thiết bị di động, nó hiển thị menu phản hồi trượt xuống. Khi nhấp vào biểu tượng mở rộng menu, nó sẽ thả xuống các mục menu

thanh điều hướng đáp ứng. php

select($query);
?>









	
		
			
		
		

			

             $val){?>
                

                         

				

            
			
				
				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

Làm cách nào để di chuyển thanh điều hướng bằng cuộn bootstrap?

Làm cách nào để thanh điều hướng xuất hiện sau khi cuộn?

Làm cách nào để đóng băng thanh điều hướng trong Bootstrap?

Bạn làm cách nào để thanh điều hướng bootstrap phản ứng dính vào đầu trang web?