web-dev-qa-db-fra.com

Comment puis-je changer la couleur de la barre de progression du bootstrap avec une couleur personnalisée?

Comment changer la couleur d'une barre de progression Bootstrap sans perdre le texte? J'ai vu cette réponse :

$('#pb').css({
    'background-image': 'none',
    'background-color': 'red'
});

Cela fonctionne, mais je perds tout texte dans la barre de progression.

csstwitter-bootstrap-3
10
gath

À l’aide de Bootstrap 3.2.0, vous pouvez effectuer les opérations suivantes:

$(function() { 
   $("#one").addClass("progress-bar-purple");
   $("#two").addClass("progress-bar-orange");
});
.progress-bar-purple {
      background-color: purple !important;
}
.progress-bar-orange {
      background-color: orange !important;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<div class="progress">
  <div id="one" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
<div class="progress">
  <div id="two" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
    80%
  </div>
</div>

23
mccannf

La chose la plus simple que vous puissiez faire est ...

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:10%; background-color:red !important;">
    </div>
</div>

mention style = "width: 10%; background-color: red! important;" en cours-barre div

mettre n'importe quelle couleur au lieu de rouge ...

3
Devashish Prasad

Si vous utilisez bootstrap sass, il contient un mix que vous pouvez inclure comme ceci:

.progress {
  @include progress-bar-variant(#000);
}
0
rolando

Il est possible que le bootstrap de l'année dans laquelle la question a été posée était différent, mais vous avez maintenant la possibilité d'ajouter des classes de bootstrap fournissant la couleur.

.progress{
    margin:10px;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Normal -->
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Striped -->
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Animated stripes -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Il existe une variété de couleurs que vous pouvez trouver ici , et vous trouvera des couleurs pour le texte et pour le fond.

0
sr_luis

Ces deux lignes proviennent directement du CSS Bootstrap

.progress-bar {
    background-color: #007bff;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

Utilisez-les simplement dans votre code HTML, entre <style></style> ou dans un fichier css que vous chargez après le chargement de bootstrap.css

0
Stephan