引导程序（第 5 部分）|下拉菜单和响应式选项卡

1. 介绍与安装
2. 网格系统
3. 按钮、字形、表格
4. 垂直表格、水平表格、内联表格
5. 进度条和大屏幕

使用 Bootstrap 的下拉菜单：

在引导程序中，使用 class=”dropdown” 创建下拉列表。我们要做的是创建一个按钮，然后将按钮转换为下拉菜单。
正如在上几个教程中已经开始的那样，可以使用 标签创建按钮。但是在这个按钮中，我们想要创建一个下拉列表，所以我们将添加 class=”btn dropdown-toggle” 和 data-toggle=”dropdown”。

基本上，它看起来像这样。

My Dropdown

现在我们想把这个按钮转换成一个下拉菜单。因此，我们将使用具有 class=”dropdown-menu” 的

标签创建一个无序列表，并使用
• 标签添加项目。

  例子：

  html

    Bootstrap Example
    
    
    
    
    
  
  
      
       GeeksforGeeks
      
  
      Dropdown in Bootstrap
  
  
      
              
                       
                          GeeksforGeeks
                           
                          
                          
                              HTML
                              CSS
                              JavaScript
                              SQL
                          
                      
              
      
                    
    

  输出：

  

  您可以通过在

• 标记中使用类来使下拉列表更好。要在下拉列表中添加标题，请添加 class=”dropdown-header”，要在项目之间添加分隔线，请使用 class=”divider”；要禁用列表中的项目，请使用 class=”disabled”。

  例子：

  html

    Bootstrap Example
    
    
    
    
    
  
  
      
       GeeksforGeeks
      
  
      Dropdown in Bootstrap
  
  
      
              
                       
                          GeeksforGeeks
                           
                          
                          
                              HTML
                              CSS
                              JS
                              
                              Language
                              
                              Python
                              SQL
                          
                      
              
      
                    
    

  输出：

  

  使用 Bootstrap 的导航选项卡：

  要创建选项卡式导航菜单，我们需要使用

  标签创建一个无序列表，然后添加 class=”nav nav-tabs” 。现在我们可以使用
  • 标签添加我们的标签。请记住分配一个带有 class=”active” 的选项卡以将其视为默认活动选项卡。现在，我们需要在 class=”tab-content” 中使用 class=”tab-pane” 编写每个选项卡的内容。请注意，您必须将 id 分配给相应的选项卡窗格。
    添加 class=”fade” 会在选项卡切换时添加淡入淡出效果。

    例子：

    html

      Bootstrap Example
      
      
      
      
      
    
    
        
         GeeksforGeeks
        
    
        Navigation Tabs in Bootstrap
    
    
        
      
        
          Nav bar
        
        
          Home
          Practice
          Interviews
          Contribute
        
      
    
      
    
      
      

    输出：

    

    您可以通过将 class=”navbar-nav” 更改为“nav-pills”或“nav-stacked”来更改选项卡的外观，如果您希望选项卡覆盖整个屏幕，请尝试添加 class= “导航对齐”
    与下拉菜单类似，我们可以使用 class=”disabled” 禁用任何选项卡
    输出：

    

    注意：在使用导航栏时要小心，它会根据屏幕大小改变它的大小。

    支持的浏览器：

    • 谷歌浏览器
    • IE浏览器
    • 火狐
    • 歌剧
    • 苹果浏览器

    Harshit Gupta 的文章：

    位于加尔各答的 Harshit Gupta 是一位活跃的博主，对撰写时事、技术博客、故事和个人生活经历有着浓厚的兴趣。除了热爱写作，他还喜欢编码和跳舞。目前在 IIEST 学习，他是 geeksforgeeks 的活跃博客撰稿人。

    如果您还想在这里展示您的博客，请参阅GBlog，了解 GeeksforGeeks 上的客座博客写作。