Изменение цвета фона панели обертывания

Question

Я использую Bootstrap s 3 панели обрушения, которые выглядят как such при закрытии.

Я хотел бы изменить цвет фона и цвет текста на что-то другое, я считаю, что css сниппет, который интересен в следующий (в bootstrap.css):

.panel { 
    margin-bottom: 20px; 
    background-color: #fff; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
      box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
} 
.panel-body { 
    padding: 15px; 
} 
.panel-heading { 
    padding: 10px 15px; 
    border-bottom: 1px solid transparent; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
} 
.panel-heading > .dropdown .dropdown-toggle { 
    color: inherit; 
} 

А вот как я реализую один коллапс панели с помощью Jade:

div(class='panel-group' id='accordion2' role='tablist' aria-multiselectable='true') 
     div(class='panel panel-default') 
      div(class='panel-heading' role='tab' id='headingOneA2') 
       h4(class='panel-title') 
        a(role='button' data-toggle='collapse' data-parent='#accordion2' 
        href='#collapseOneA2' aria-expanded='true' aria-controls='collapseOneA2') 42sh 
      div(id="collapseOneA2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOneA2") 
       div(class='panel-body') 
        p Coded a fully functionnal shell environment in C offering features such as pipes, redirection, dynamic completion etc. 

Но я не могу понять, как изменить цвет фона/цвет текста и мои исследования не были убедительными.

Answer 1

Вы теряете специфическую войну с css Bootstrap. Удалите класс panel-default, а затем примените ваш css как прикрепленный.

.panel-heading { 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.panel-body { 
 
    background-color: blue; 
 
    color: white; 
 
}

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

 
<div id="accordion2" role="tablist" aria-multiselectable="true" class="panel-group"> 
 
    <div class="panel"> 
 
    <div role="tab" id="headingOneA2" class="panel-heading"> 
 
     <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneA2" aria-expanded="true" aria-controls="collapseOneA2">42sh</a></h4> 
 
    </div> 
 
    <div id="collapseOneA2" role="tabpanel" aria-labelledby="headingOneA2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <p>Coded a fully functionnal shell environment in C offering features such as pipes, redirection, dynamic completion etc.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>