Bootstrap导航nav

如果你想创建一个简单的水平导航栏,可以在 

     元素上添加 .nav类,在每个 
  •  选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:


     

    导航


     

    简单的水平导航:


     

    Bootstrap导航nav_第1张图片


    导航对齐方式

    .justify-content-center 类设置导航居中显示, .justify-content-end 类设置导航右对齐。



     

    导航


     

    左对齐导航 (默认):


     
      
     

    居中对齐导航:


     
        
     

    右对齐导航:


     

    Bootstrap导航nav_第2张图片

    垂直居中


     

    垂直导航


     

    .flex-column 类用于创建垂直导航:


     

    Bootstrap导航nav_第3张图片

    使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。


     

    选项卡


     

    选项卡导航:


     

    Bootstrap导航nav_第4张图片

    disbled对按钮使用 该按钮会被禁止


    胶囊样式     nav-pills"

     

    胶囊


     

    胶囊导航:


     

    Bootstrap导航nav_第5张图片



    导航等宽

    .nav-justified 类可以设置导航项齐行等宽显示。



     

    导航等宽


     

    .nav-justified 类可以设置导航项齐行等宽显示。


     



     

    Justified tabs:


     

    Bootstrap导航nav_第6张图片


    胶囊导航带下拉菜单


     

    胶囊导航带下拉菜单


     


    动态选项卡案例



     

    选项卡切换


     

     
     


     
     

       


         

    HOME


         

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


       

       
       
     

    Bootstrap导航nav_第7张图片



     

    胶囊选项卡切换


     

     
     


     
     

       


         

    HOME


         

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


       

       
       
     

    Bootstrap导航nav_第8张图片

你可能感兴趣的:(Bootstrap导航nav)