如何使用CSS将导航栏更改为选项卡?

问题描述:

我想将导航栏更改为使用CSS的选项卡,我知道我可以使用angular-ui,但我想使用CSS来实现此功能。任何帮助将在这方面赞赏。如何使用CSS将导航栏更改为选项卡?

main.html中

<nav class="navbar navbar-default"> 
    <div > 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li ui-sref-active="active"><a ui-sref="app.dit">DIT</a></li> 
       <li ui-sref-active="active"><a ui-sref="app.st">ST</a> 
       <li ui-sref-active="active"><a ui-sref="app.uat">UAT</a></li> 
       <li ui-sref-active="active"><a>PROD</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

您可以使用“引导标签”类,如果你想,并根据您的需要更改CSS。

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h

下面的代码