更改引導程序的折疊面板背景顏色

Question

我正在使用Bootstrap s 3 折疊面板，關閉時看起來像這樣。

我希望將背景和文本顏色更改為其他顏色，我相信有趣的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

您正在失去與 Bootstrap 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>