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>