it-swarm.com.de

Wie kann man die Hintergrundfarbe der Überschrift der Bootstrap Panel überschreiben?

Ich verwende ein Panel von Bootstrap, aber für die Überschrift möchte ich meine eigene Hintergrundfarbe für die Überschrift verwenden. Wenn ich keine panel-heading-Klasse für die div stelle, wird das Layout verschraubt. Also dachte ich, ich sollte panel-heading behalten, aber dann einen Weg finden, die Hintergrundfarbe zu überschreiben. Also entschied ich mich, eine benutzerdefinierte CSS-Klasse zu erstellen, background-color zu verwenden und sie dann mit panel-heading zum div hinzuzufügen. Dies hatte jedoch keine Wirkung.

Haben Sie eine Idee, wie Sie die Überschriftenfarbe des Panels überschreiben können?

Code:

<div class="panel panel-default">
  <div class="panel-heading custom_class" >
  </div>
</div>
42
Jack Twain

Das sollte funktionieren:

.panel > .panel-heading {
    background-image: none;
    background-color: red;
    color: white;

}
47
Marco

Sie können eine benutzerdefinierte Klasse für Ihre Panelüberschrift erstellen. Mit dieser CSS-Klasse können Sie die Überschrift des Bereichs gestalten. Ich habe dafür eine einfache Fiddle.

HTML:

<div class="panel panel-default">
   <div class="panel-heading panel-heading-custom">
       <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       Panel content
   </div>
</div>

CSS:

.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }

Demo-Link:

http://jsfiddle.net/kiranvarthi/t1Lq966k/

35
Kiran Varthi

Wie wäre es, wenn Sie Ihre eigene Custom Panel-Klasse erstellen? Auf diese Weise müssen Sie sich nicht um das Überschreiben von Bootstrap kümmern.

HTML

<div class="panel panel-custom-horrible-red">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      Panel content
    </div>
</div>

CSS

.panel-custom-horrible-red {
    border-color: #ff0000;
}
.panel-custom-horrible-red > .panel-heading {
    background: #ff0000; 
    color: #ffffff;
    border-color: #ff0000;
}

Geige:https://jsfiddle.net/x05f4crg/1/

14
Pratul Sanwal

Bootstrap verwendet manchmal kontextabhängige Klassenkonstrukte. Darauf sollten Sie das Styling ändern.

Sie müssen keine eigene benutzerdefinierte Klasse erstellen, wie in der Antwort von Kiran Varti vorgeschlagen. 

Sie brauchen also nur:

CSS:

.panel-default > .panel-heading {
  background: #black;
}

HTML:

<div class="panel panel-default">

Erklärung hier . Siehe auch den kontextuellen Klassenabschnitt hier .

Um die Navbar-Umkehrung anzupassen, verwenden Sie # 222. Panel-Inverse wurde angefordert in V3, aber aufgrund größerer Prioritäten abgelehnt.

Sie können die Vordergrundfarbe in dieser Überschrift überschreiben oder für Panel-Titel separat ausführen. Kommt darauf an, was Sie erreichen wollen.

.panel-title {
  color: white;
}
4
rmcsharry

Sie können dem Panel einfach ein id-Attribut hinzufügen. So was 

<div class="panel-heading" id="mypanelId">Hello world </div>

Dann in Ihrer benutzerdefinierten CSS-Datei: 

#mypanelId{
    background-image: none;
    background: rgba(22, 20, 100, 0.8);
    color: white;
     }
1
NetEmmanuel

Eine andere Möglichkeit, die Farbe zu ändern, ist das Entfernen der Standardklasse und das Ersetzen im Panel mit den Bootstrap-Klassen.

beispiel: 

<div class="panel panel-danger">
  <div class="panel-heading">
  </div>
</div>
1
Alex Heresmann

Ich habe es mit benutzerdefinierten Panel-Klassen versucht, aber es hat nicht funktioniert. Für diejenigen, die wie ich kämpfen, können Sie inline CSS verwenden, und es funktioniert gut für mich.

So sieht mein Code aus: 

<div class="panel-heading" style="background-image:none;background: #a4c6ff;">
0
.panel-default >.panel-heading
{
    background: #ffffff;
}

Dies hat bei mir dazu beigetragen, die Farbe in Weiß zu ändern.

0
L Figueroa

ich gehe davon aus, dass custom_class Ihre Klasse ist, um die Überschriftenfarbe des Bedienfelds zu überschreiben. Fügen Sie einfach! wichtig hinzu, oder fügen Sie Inline-Stile oder eine ID hinzu und fügen Sie Stile hinzu, da sie über die hinzugefügten Stile spezifischer werden.

  • mit! wichtig!

    .custom_class { Hintergrundfarbe: rot! wichtig; }

  • mit! wichtig!

  • mit ID:

    #custom_id { Hintergrundfarbe: rot; }

-mit Inline-Styles:

<div id="custom_id" class="panel panel-default">
      <div class="panel-heading custom_class" style="background-color:red">
      </div>
    </div>
0
invinciblejai