web-dev-qa-db-fra.com

Comment changer la couleur du pied de page du panneau d'amorçage

J'ai un panneau de démarrage et je veux changer la couleur du pied de page comme son en-tête. J'ai ajouté panel-primary à côté de panel-footer classe, mais uniquement la couleur de contour supérieure modifiée en couleur primaire. Alors, comment puis-je changer la couleur du pied de page du panneau?

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

Vous devez créer une classe personnalisée à appliquer à la classe panel-footer:

Notez que les pieds de panneau n'héritent pas des couleurs et des bordures lors de l'utilisation de variations contextuelles, car elles ne sont pas censées être au premier plan. Voir 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

Pour ce faire, vous devez modifier le code CSS approprié.

Les valeurs par défaut pour Bootatrap 3 sont les suivantes: 

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

Vous pouvez remplacer ces styles (vous ne devez pas ajouter la classe panel-primary à panel-footer, en raison de la structure de Bootstrap CSS).

1
max

Regarde ça:

CSS

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

 }

Je remplace le css bootstrap, mais ce n'est pas une bonne solution. Un meilleur moyen est de déclarer votre propre classe et de changer les couleurs.

jsfiddle

1
Mario Kurzweil

Si vous utilisez Bootstrap 4.1 vous pouvez simplement ajouter une classe de couleur d’arrière-plan contextuelle. Comme dans Bootstrap 4.1, les panneaux ont été remplacés par des cartes, une réponse actualisée possible à votre question pourrait être:

<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

Peut-être que vous pouvez montrer le CSS pour ces panneaux?

Cela est probablement dû au fait qu'une autre balise CSS a une priorité supérieure à la balise "panel-primary". Vous pouvez essayer d'utiliser l'outil de développement Web dans Firefox/Chrome pour montrer ce qui le remplace.

0
kainr2