Wie ändere ich die hintergrund-Farbe eines Akkordeon Registerkarte Bootstrap?

Ich versuche, ändern Sie die Hintergrundfarbe der tabs auf meinem Akkordeon. Wenn ich die Hintergrundfarbe in CSS, es ändert nur die Farbe hinter dem text und nicht die ganze Sache.

Hier ist ein Ausschnitt von meinem code:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
            </a>
        </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
    </div>
</div>

InformationsquelleAutor Kory Hershock | 2016-08-08

5

Sind Sie wahrscheinlich änderung der background-color des Anker-Tags, wenn nur der text-hintergrund zu ändern, verwenden Sie stattdessen die folgenden CSS-Selektor zu ändern background-color des panel-heading:
```
.panel-default > .panel-heading {
    background-color:#000;
}
```
- Dank einer Tonne! Wenn Sie nichts dagegen haben mich gefragt, was bedeutet das ".panel-default - >" zu tun? Es funktioniert, jetzt möchte ich nur zu verstehen, was das ist, vor .panel-überschrift
- Klar, in CSS die > combinator betrifft nur die unmittelbar untergeordneten Elemente des übergeordneten Tags. In dieser CSS-Regel background-color:#000; wird nur auf Elemente angewendet werden, die mit der Klasse panel-heading wenn Sie eine direkt Kind eines Eltern-Elements mit der Klasse panel-default. Wenn Sie ein element mit der Klasse panel-heading an anderer Stelle im code und es war nicht ein Kind von einem element mit der Klasse panel-default dann würde diese Regel nicht beeinflussen. Lesen Sie mehr über Kind-Selektoren hier.
- Es ist seltsam, dass die bootstrap-Jungs nicht bauen diese in Ihre standard-Farben
InformationsquelleAutor APAD1

Müssen Sie wahrscheinlich erstellen Sie Ihre eigenen benutzerdefinierten kontextuellen Zustand Klasse für das panel. Bootstrap kommt mit einem Haufen gebaut, aber wenn Sie wollen etwas ganz anderes, die Sie benötigen, hinzufügen. Dies würde zum Beispiel erstellen Sie einen neuen kontextuellen Zustand Klasse für die Platten als schrill:

.panel-flashy {
    border-color: #FF934F;
  }
.panel-flashy > .panel-heading {
     color:#fff;
     background-color:#FF934F;
     border-color:#ff934f;
}

HTML-code:

     <div class="panel panel-flashy">
        <div class="panel-heading">
           <h3 class="panel-title">Flashy Panel title</h3>
        </div>
        <div class="panel-body">
           Panel content goes here
        </div>
     </div>

Bootply Beispiel.

InformationsquelleAutor Mary Wheeler

0

Bootstrap gebaut hat-im Stile:

ändern
<div class="panel panel-default">

zu
<div class="panel panel-primary">

alle anderen Bootstrap-Farben anwenden, so panel-success panel-warning etc
siehe hier: Bootstrap-Kontext-Farben

jede andere Farbe würde verlangen, dass Sie schreiben Sie eine Klasse Ergänzung zu den bootstrap-Klassen, z.B.
```
.panel-turquoise {
    border-color: #32c5d2;
}
.panel-turquoise > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #32c5d2;
}

.panel-turquoise > .panel-heading {
    background-color: #eff3ff;
}
```
<div class="panel panel-turquoise">

InformationsquelleAutor Adam Hey

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.