変更ブートストラップの崩壊パネルの背景色

Question

私は、閉じたときsuchように見えるBootstrapの3枚の崩壊パネルを使用しています。

私は何か他のものの背景とテキストの色を変更したい、私はinterrestingさ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; 
} 

そして、ここで私が使用して1枚の崩壊パネルを実装する方法です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で特定戦争が解消されました。クラス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>