Làm thế nào để tùy chỉnh Bootstrap 3 tab màu

Question

Tôi muốn tạo ra một tab tùy chỉnh trong Bootstrap 3.

Những gì tôi đã làm là -

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

Và Tôi nhận được một tab như this-

Nhưng tôi muốn có màu tùy chỉnh. Tôi mới trong Bootstrap 3, vì vậy tôi không biết làm thế nào để làm điều đó.

Những gì tôi muốn là một cái gì đó giống như this-

.

Có ai giúp tôi không?

Cảm ơn bạn đã trợ giúp.

Answer 1

Trên selector .nav-tabs > li > a:hover thêm !important đến 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

Tôi nghĩ bạn nên chỉnh sửa thẻ neo trên bootstrap.css. nếu không, hãy cung cấp kiểu tùy chỉnh cho thẻ neo với! quan trọng (để ghi đè kiểu trên bootstrap.css).

Ví dụ số-

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