web-dev-qa-db-fra.com

Diluant Bootstrap barres de progression?

Comment puis-je rendre les barres de progression plus minces avec Bootstrap 3.0? Je pense à quoi ressemble le compteur YouTube like/dislike (la barre bleue). J'ai essayé de rechercher des astuces CSS, mais j'ai pu ne trouve rien.

twitter-bootstrapprogress
20
user2019594

Aussi simple que cela:

.progress {height: 10px;}

Voir: Réduisez la hauteur de la barre de progression

Extra, si vous souhaitez afficher le texte à l'intérieur de la barre de progression:

.progress {height: 20px;} // we increased it so the text is visible or change font size
.progress .sr-only { position: relative; }

Voir: Afficher le texte dans la barre de progression

41
Shina

Shina a raison, je voudrais juste ajouter, il peut être nécessaire dans certains cas d'ajouter la commande! Important pour appliquer le changement sur le paramètre déjà défini de la classe "progress", comme ceci:

.progress {height: 10px !important;}
5
JCO9

Vous pouvez créer .progress-sm (Petite progression) et .progress-lg (Large progression) css classe personnalisée dans votre feuille de style selon ce qui suit, puis utilisez-la facilement.

.progress-sm{
  height: 0.5rem !important;
}
.progress-lg{
  height: 1.5rem !important;
}

Pour les petits

<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Par défaut

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pour les grands

<div class="progress progress-lg">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress-sm {
  height: 0.5rem!important;
}

.progress-lg {
  height: 1.5rem!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<h5>For Small</h5>
<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<h5>For Default</h5>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<h5>For Large</h5>
<div class="progress progress-lg">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
0
HDP