📌  相关文章
📜  Materialize-css 导航栏

📅  最后修改于: 2021-01-07 00:49:24             🧑  作者: Mango

Materialize-css 导航栏

导航栏用于创建简单的导航栏。 Materialize CSS提供了各种CSS类来创建导航栏。

导航栏在建议的容器div中使用。导航栏有两个主要部分：

  • 徽标或品牌链接
  • 导航链接(您可以将这些链接向左或向右对齐)

您可以通过以下方式使用导航栏：

  • 右对齐链接
  • 左对齐链接
  • 中心徽标
  • 活动链接
  • 导航栏下拉菜单
  • 导航栏带有链接和图标
  • 导航栏图标与文本

例

让我们以Materialize CSS示例为例，演示上述所有属性：


   
      The Materialize NavBar Example
            
      
      
                 
           
      
      
   
   
    
      

         

            
Right Aligned Nav Bar

            
         

      

      
      

         

            
Left Aligned Nav Bar

           
         

      

      
      

         

            
Center Aligned Nav Bar

            
         

      

      
      

         

            
Nav Bar with Active link

            
         

      

      
      

         

            
Nav Bar with dropdown menu

            

         

      

      
      

         

            
Nav Bar with Links and Icons

            
         

         

         

         

            
Nav Bar Icon with Text

输出：