如何使用Bootstrap创建响应式底部导航栏？

每个网站都使用导航栏，以使其更加用户友好，从而使浏览网站变得容易，并且用户可以直接搜索他们感兴趣的主题。
“导航”一词是指从一个地方移到另一个地方的科学。在本文中，我们在网页底部创建一个导航栏。网页或网站底部的导航可以固定或移动，并可以在所有类型的屏幕尺寸中进行调整。本文介绍了在Bootstrap中创建“响应式底部导航”的过程。

示例1：在此代码中，我们创建一个导航菜单并将其固定在页面底部。这是进行底部导航的最简单方法之一。 “固定底部”类将导航栏粘贴到页面底部。

  

    
        Responsive Bottom navigation
    
  
    
  
    
  
    
    
  
    
    
  
  
    
  
    
  
    
        .navbar {
            width: 100%;
            background-color: rgb(80, 220, 100);
        }
          
        ul {
            font-size: 20px;
        }
          
        body {
            text-align: center;
            padding-top: 200px;
        }
          
        h1 {
            color: green;
        }
    

  

    GeeksforGeeks
  
    A responsive bottom navigation
  
    
        GeeksforGeeks
        
            
        
  
        
            
                
                    
                        Home 
                        
                            (current)
                        
                    
                
                
                    
                        Link
                    
                
                
                    
                        About
                    
                
                
                    
                        Contact
                    
                
            
        
  
        
            
                
                
                    Search
                
            
        
     

  

输出：

• 小屏幕上的导航栏：
  
• 大屏幕导航栏：
  

示例2：在上面的代码中，我们看到了如何在页面底部固定一个简单的导航菜单。在此示例中，我们在页面底部放置一个具有菜单的垂直药丸，该菜单可以导航。

  

    Responsive Navigation
  
    
  
    
  
    
    
  
    
    
  
  
    
  
    
  
    
        h1 {
            text-align: center;
            font-size: 50px;
            padding-top: 200px;
            margin-bottom: 300px;
        }
          
        body {
            background-color: rgb(11, 102, 35);
        }
    

  

    
        GeeksForGeeks: A computer
        science portal for the geeks
    
  
    
        
            
                
                
                    
                        Home
                    
                
  
                
                    
                        Policies
                    
                
  
                
                    
                        Vacancies
                    
                
  
                
                    
                        Contact
                    
                
            
        
  
        
            
                
                
                    
                        Welcome to the world of geeks. 
                        This portal has been created to 
                        provide well written, well thought
                        and well-explained solutions for 
                        selected questions. It is the best 
                        place to learn exciting things about
                        the world of programming. We've got 
                        exciting problems for interviews, 
                        placements and much more.                                 
                    
                
                
                    
                        Application Privacy Statement
                        We Sanchhaya Education Pvt. Ltd.,
                        are registered and headquartered at
                        BC 227, 2nd Floor, Matrix Business
                        Tower, B4, Sector 132, Noida, UP-201301,
                        hereinafter referred to as GeeksforGeeks.
                        We also offer paid Courses managed by
                        Sanchhaya Classes Pvt. Ltd. with registered 
                        office address B-142, Vishwas Park, Uttam Nagar,
                        New Delhi, North Delhi, Delhi, India, 110059. 
                        At GeeksforGeeks, we value your trust & respect
                        your privacy. This privacy statement
                        (“Privacy Statement”) applies to the 
                        treatment of personally identifiable information
                        submitted by, or otherwise obtained from, you in
                        connection with the associated application 
                        (“Application”). The Application is provided by 
                        GeeksforGeeks (and may be provided by Geeksforgeeks
                        on behalf of a GeeksforGeeks licensor or partner 
                        (“Application Partner”). By using or otherwise 
                        accessing the Application, you acknowledge that
                        you accept the practices and policies outlined in
                        this Privacy Statement.
                    
                
                
                    
                        What impact will you make?
                        Are you ready to apply your knowledge and background
                        to exciting new challenges? From learning to leadership,
                        this is your chance to take your career to the next level.
                        Apply for below-listed vacancies and our team will
                        get in touch with you.
                    
                
                
                    
                        Address: GeeksforGeeks 4th,5th & 6th Floor, 
                        Royal Kapsons, A- 118, Sector- 136, Noida,
                        Uttar Pradesh (201305) For feedback and queries: 
                        [e-mail] For course related queries:
                        [e-mail] For payment related issues:
                        [e-mail] For any issue in a purchased
                        course : [e-mail]
                    
                
            
        
    

  

输出：