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

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 文件中然后进行编辑。

永远不要编辑引导程序的核心 css 文件，这是一个很好的做法。曾经重写其他文件中的代码^^

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