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

Question

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

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 recibiendo una ficha como esta -

Pero quiero personalizarlo de color. Soy nuevo en Bootstrap 3, así que no se como hacerlo.

Lo que quiero es algo como esto -

.

¿Alguien puede ayudarme, por favor?

Gracias de antemano por ayudar.

29

css html html5 css3 twitter-bootstrap

Author: Hakam Fostok, 2015-02-03

Source

2 answers

Creo que deberías editar la etiqueta de anclaje en bootstrap.css. de lo contrario dar estilo personalizado a la etiqueta de anclaje con !importante (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>

Violín: http://jsfiddle.net/zjjpocv6/2/

6

Author: Vivekraj K R,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-21 06:15:50

score 38 · Accepted Answer

En el selector .nav-tabs > li > a:hover añadir !important al 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>