导航

导航菜单

如果要创建简单的水平菜单，请将 .nav 类添加到

元素，然后为每个
• 元素添加 .nav-item 并将 .nav-link 类添加到它们的链接：

  实例

  
    
  
      链接
    
    
  
      链接
    
    
  
      链接
    
    
  
      禁用
    
  
  

  对齐导航栏

  添加 .justify-content-center 类使导航居中，添加 .justify-content-end 类使导航右对齐。

  实例

  垂直导航栏

  添加 .flex-column 类可创建垂直导航：

  实例

  选项卡

  请使用 .nav-tabs 类将导航菜单转换为导航选项卡。并将 .active 类添加到活动/当前链接。如果您希望选项卡可切换，请参阅本页的最后一个例子。

  实例

  
    
  
      活动
    
    
  
      链接
    
    
  
      链接
    
    
  
      禁用
    
  
  

  胶囊

  使用 .nav-pills 类可将导航菜单设置为导航胶囊。如果您希望胶囊可切换，请参阅本页的最后一个例子。

  实例

  
    
  
      活动
    
    
  
      链接
    
    
  
      链接
    
    
  
      禁用
    
  
  

  等宽的选项卡/胶囊导航

  请使用 .nav-justified 类（等宽）对齐标签/胶囊：

  实例

  ..
  ..
  

  胶囊下拉菜单

  实例

  
    
  
      活动
    
    
  
      Dropdown
      
  
        
  链接 1
        
  链接 2
        
  链接 3
      
    
    
  
      链接
    
    
  
      禁用
    
  
  

  选项卡下拉菜单

  实例

  
    
  
      活动
    
    
  
      Dropdown
      
  
        
  链接 1
        
  链接 2
        
  链接 3
      
    
    
  
      链接
    
    
  
      禁用
    
  
  

  可切换的 / 动态选项卡

  如需使选项卡可切换，请将 data-toggle="tab" 属性添加到每个链接。然后为每个选项卡添加有唯一 ID 的 .tab-pane 类，并将它们包装在带有 .tab-content 类的

  元素中。

  如果您希望选项卡在单击时能够淡入淡出，请将 .fade 类添加到 .tab-pane：

  实例

  
  
    
  
      Home
    
    
  
      Menu 1
    
    
  
      Menu 2
    
  
  
  
  
    
  ...
    
  ...
    
  ...
  
  

  可切换的 / 动态胶囊导航

  相同的代码适用于导航；仅将 data-toggle 属性更改为 data-toggle="pill" 即可：

  实例

  
  
    
  
      春日
    
    
  
      初夏
    
    
  
      山行
    
  
  
  
  
    
  ...
    
  ...
    
  ...
  
  

  

  折叠

  导航栏