web-dev-qa-db-fra.com

Comment remplacer la couleur d'arrière-plan de l'en-tête Bootstrap Panel?

J'utilise un panneau de Bootstrap mais pour l'en-tête, je veux utiliser ma propre couleur d'arrière-plan pour l'en-tête. Quand je ne mets pas la classe panel-heading pour la div, la présentation est foutue. J'ai donc pensé que je devrais garder panel-heading mais trouver ensuite un moyen de remplacer la couleur de fond. J'ai donc décidé de créer une classe CSS personnalisée et d'utiliser background-color, puis de l'ajouter à la div avec panel-heading. Mais cela n'a eu aucun effet.

Une idée de comment remplacer la couleur de titre du panneau?

Code:

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

Cela devrait fonctionner:

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

}
47
Marco

Vous pouvez créer une classe personnalisée pour votre en-tête de panneau. En utilisant cette classe css, vous pouvez styler l’en-tête du panneau. J'ai un simple Fiddle pour ça.

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; }

Lien de démonstration:

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

35
Kiran Varthi

Pourquoi ne pas créer votre propre classe de panneaux personnalisés? De cette façon, vous n'aurez plus à vous soucier de remplacer Bootstrap.

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;
}

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

14
Pratul Sanwal

Bootstrap utilise parfois des constructions de classe contextuelles. Ce sont ce que vous devriez viser pour changer de style.

Vous n'avez pas besoin de créer votre propre classe personnalisée comme suggéré dans la réponse de Kiran Varti. 

Donc vous avez seulement besoin de:

CSS:

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

HTML:

<div class="panel panel-default">

Explication ici . Voir aussi la section de classe contextuelle ici .

Pour faire correspondre navbar-inverse, utilisez # 222. Panel-inverse était demandé dans la V3, mais rejeté en raison de priorités plus grandes.

Vous pouvez modifier la couleur de premier plan dans cette substitution de titre ou vous pouvez le faire séparément pour les titres de panneau. Cela dépend de ce que vous essayez d’atteindre.

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

Vous pouvez simplement ajouter un attribut id au panneau. Comme ça 

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

Puis dans votre fichier CSS personnalisé: 

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

Une autre façon de changer la couleur est de supprimer la classe par défaut et de la remplacer dans le panneau en utilisant les classes de bootstrap.

exemple: 

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

J'ai essayé d'utiliser un cours sur panneau personnalisé mais cela n'a pas fonctionné. Donc, pour ceux qui luttent comme moi, vous pouvez utiliser inline CSS et cela fonctionne très bien pour moi.

Voici à quoi ressemble mon code: 

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

C'est ce qui a fonctionné pour moi pour changer la couleur en blanc.

0
L Figueroa

supposons que custom_class soit votre classe pour remplacer la couleur de l'en-tête du panneau.

  • avec! important

    .custom_class { couleur de fond: rouge! important; }

  • avec! important

  • avec ID:

    #custom_id { couleur de fond: rouge; }

-avec des styles en ligne:

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