html - tab - Cómo personalizar el color de la pestaña Bootstrap 3

bootstrap tabs theme

Question

Quiero crear una pestaña personalizada en Bootstrap 3.

Lo que he hecho es ...

<ul class="nav nav-tabs" id="myTab">
    <script type="text/javascript">
        $(document).ready(function()   {
           //1st (1-1 = 0) tab selected initialy
           $("#myTab li:eq(0) a").tab(''show'');
        });
    </script>

    <li><a data-toggle="tab" href="#sectionA">SEARCH</a></li>
    <li><a data-toggle="tab" href="#sectionB">ADVANCED</a></li>
</ul>
<div class="tab-content">
    <div id="sectionA" class="tab-pane fade in active">
        Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,
        butcher voluptate nisi qui.
    </div>
    <div id="sectionB" class="tab-pane fade">
        Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna.
    </div>
</div>

Y estoy obteniendo una pestaña como esta-

Pero quiero personalizarlo de color. Soy nuevo en Bootstrap 3, así que no sé cómo hacerlo.

Lo que quiero es algo como esto ...

.

¿Alguien puede ayudarme por favor?

Gracias con antelación por ayudar.

Answer 1

Creo que deberías editar la etiqueta de anclaje en bootstrap.css. de lo contrario, asigne un estilo personalizado a la etiqueta de anclaje con! important (para anular el estilo en bootstrap.css).

Código de ejemplo

.nav {
    background-color: #000 !important;
}

.nav>li>a {
    background-color: #666 !important;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">tab1</div>
    <div role="tabpanel" class="tab-pane" id="messages">tab2</div>
    <div role="tabpanel" class="tab-pane" id="settings">tab3</div>
  </div>

</div>

Fiddle: http://jsfiddle.net/zjjpocv6/2/

Answer 2

En el selector .nav-tabs > li > a:hover add !important para el background-color .

.nav-tabs{
  background-color:#161616;
}
.tab-content{
    background-color:#303136;
    color:#fff;
    padding:5px
}
.nav-tabs > li > a{
  border: medium none;
}
.nav-tabs > li > a:hover{
  background-color: #303136 !important;
    border: medium none;
    border-radius: 0;
    color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#search">SEARCH</a></li>
    <li><a data-toggle="tab" href="#advanced">ADVANCED</a></li>
</ul>
<div class="tab-content">
    <div id="search" class="tab-pane fade in active">
        Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel,
        butcher voluptate nisi qui.
    </div>
    <div id="advanced" class="tab-pane fade">
        Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna.
    </div>
</div>