Come personalizzare Bootstrap 3 Scheda di colore

Question

Voglio creare una scheda personalizzata in Bootstrap 3.

Quello che ho fatto è -

<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> 

E io sono sempre una scheda come questo-

Ma voglio personalizzarlo colorato. Sono nuovo in Bootstrap 3, quindi non so come farlo.

Quello che voglio è qualcosa di simile questo-

.

Qualcuno può aiutarmi per favore?

Grazie in anticipo per l'aiuto.

Answer 1

sul selettore .nav-tabs > li > a:hover aggiungere !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>

Answer 2

Penso che dovresti modificare il tag di ancoraggio su bootstrap.css. altrimenti dai uno stile personalizzato al tag anchor con! important (per sovrascrivere lo stile su bootstrap.css).

Esempio code-

.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/