Question

我在关闭时使用的Bootstrap 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

你正在与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>

更改bootstrap的折叠面板背景颜色

1 个答案: