Come modificare il colore del footer del pannello di bootstrap

Question

Ho un pannello di bootstrap e voglio cambiare il colore del footer come la sua intestazione. Ho aggiunto panel-primary accanto alla classe panel-footer, ma solo il colore del contorno superiore che è stato modificato in colore primario. Quindi, come posso cambiare il colore del riquadro del pannello?

codice:

<div class="panel panel-primary"> 
    <div class="panel-heading">     
      Panel Heading 
    </div><!--.panel-heading--> 

    <div class="panel-body"> 
      Panel Body 
    </div><!--.panel-body--> 

    <div class="panel-footer panel-primary"> 
      Panel Footer 
     </div><!--.panel-footer--> 
</div> 

Answer 1

È necessario creare una classe personalizzata da applicare alla classe del pannello-footer:

notare che piè di pagina del pannello Non colori ereditare e confini quando si utilizza variazioni contestuali in quanto non sono destinate ad essere in il primo piano. Vedi docs.

.panel-footer.panel-custom { 
 
    background: red; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-primary"> 
 
    <div class="panel-heading">Panel Heading</div> 
 
    <!--.panel-heading--> 
 
    <div class="panel-body">Panel Body</div> 
 
    <!--.panel-body--> 
 
    <div class="panel-footer panel-custom">Panel Footer</div> 
 
    <!--.panel-footer--> 
 
</div>

Answer 2

forse si può mostrare il CSS per questi pannelli?

È probabile perché un altro tag CSS ha precedenza più alta sul tag "panel-primary". Puoi provare a utilizzare lo strumento di sviluppo web in Firefox/Chrome per mostrare cosa lo sta sovrascrivendo.

Answer 3

Devi cambiare corretta CSS per raggiungere questo obiettivo.

predefiniti per Bootatrap 3 sono:

.panel-footer { 
    padding: 10px 15px; 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
    border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
} 

È possibile ignorare questa stili (non si dovrebbe aggiungere panel-primary classe panel-footer, a causa della struttura di Bootstrap CSS).

Answer 4

Check this out:

CSS

.panel-footer{ 
    background-color:#337ab7; 
    border-color: #337ab7; 
    color: #FFFFFF; 

} 

sovrascrivo il css bootstrap, ma questo non è una buona soluzione. Un modo migliore è dichiarare la tua classe e cambiare i colori.

jsfiddle