在bootstraps选项卡视图中更改选项卡的样式

Question

我的网站需要垂直标签视图。我需要更改颜色，在标签标题下添加glyphicon和装饰线。这是否可以使用bootstrap的标签视图？

  <ul class="nav nav-pills nav-stacked btn-group" style="width: 100px;">
   <li  class="active"><a href="#div_message">Home</a></li>
   <li ><a href="#div_message">Profile</a></li>
   <li ><a href="#div_message">Messages</a></li>
  </ul>

Answer 1

<style>
  /*Styles for your choice*/ 
  .nav{
    width: 300px; 
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #333333;
  }
  .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{
    background-color: #FFFFFF;
    color: #000000;
  }

  .nav-pills > li > a {
    border-radius: 0px;
  }
  .nav a{
    color: #FFFFFF;
  }
  .nav a:hover{
    background-color: #FFFFFF;
    color: #000000;
  }
  li:hover .line{
    background-color: orange;
    height: 10px;
  }
</style>



<div class="row">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 HEADER">
    <ul class="nav nav-pills nav-stacked">
      <li role="presentation" class="active">
        <a href="#">
          <i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;Home
          <div class="line"></div>
        </a>
      </li>
      <li role="presentation"><a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;Profile<div class="line"></div></a></li>
      <li role="presentation"><a href="#"><i class="glyphicon glyphicon-envelope"></i>&nbsp;&nbsp;Messages<div class="line"></div></a></li>
    </ul>
  </div>
  <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 CONTENT">
  </div>
</div>

这就是你想要的！ 是的，您可以修改Bootstrap的CSS样式。然后操作的好方法是使用firebug并将元素编辑为要修改的元素。 在右侧获取元素的类，现在您可以复制此类，粘贴到css文件中然后进行编辑。

永远不要编辑bootstrap的核心css文件，这是一个很好的实践。曾经在其他文件中重写代码^^

现在使用jquery将漂亮的动态样式放到菜单中并更改我放置的属性。