wake-up-neo.com

So ändern Sie die Farbe der Fußleiste des Bootstrap-Bereichs

Ich habe ein Bootstrap-Panel und möchte die Farbe der Fußzeile wie ihre Kopfzeile ändern. Ich habe panel-primary neben der panel-footer-Klasse hinzugefügt, aber nur die obere Umrissfarbe, die in eine Primärfarbe geändert wird. Wie kann ich also die Farbe der Panel-Fußzeile ändern?

code:

<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>
7
Bayu Anggara

Sie müssen eine benutzerdefinierte Klasse erstellen, um sie auf die Panel-Footer-Klasse anzuwenden:

Beachten Sie, dass die Bedienfeldfußzeilen nicht Farben und Rahmen erben, wenn Sie kontextabhängige Variationen verwenden, da sie nicht im Vordergrund sein sollen. Siehe 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>

10
vanburen

Sie müssen das richtige CSS ändern, um dies zu erreichen.

Die Standardeinstellungen für Bootatrap 3 sind: 

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

Sie können diese Stile überschreiben (aufgrund der Struktur von Bootstrap-CSS sollten Sie panel-primary keine Klasse panel-footer hinzufügen).

1
max

Überprüfen Sie dies heraus:

CSS

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

 }

Ich überschreibe die Bootstrap-CSS, aber dies ist keine gute Lösung. Besser ist es, die eigene Klasse zu deklarieren und dann die Farben zu ändern.

jsfiddle

1
Mario Kurzweil

Wenn Sie Bootstrap 4.1 verwenden, können Sie einfach eine kontextabhängige Hintergrundfarbklasse hinzufügen. Da in Bootstrap 4.1 die Panels durch Cards ersetzt wurden, könnte eine möglicherweise aktualisierte Antwort auf Ihre Frage lauten:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="container">

    <div class="card mt-4" style="width: 18rem;">
        <div class="card-header bg-success text-light">
            Card Title Here
        </div>
        <div class="card-body bg-warning">
            For example, a card with Brazilian flag colors. No explicit CSS is being used here.
        </div>
        <div class="card-footer bg-primary text-center">
            <a href="#" class="btn btn-outline-light">A White Button On Blue BG</a>
        </div>
    </div>

</div>

0
Victor F

Vielleicht können Sie das CSS für diese Panels anzeigen?

Dies liegt wahrscheinlich daran, dass ein anderes CSS-Tag eine höhere Priorität als das "Panel-Primary" -Tag hat. Sie können versuchen, das Webentwickler-Tool in Firefox/Chrome zu verwenden, um anzuzeigen, was es überschreibt.

0
kainr2