Kokende liboso

Mikanda mpe bandakisa mpo na kosalela ba barres ya progression personnalisée ya Bootstrap oyo ezali na lisungi ya ba barres oyo etandami, ba fond d’animation, mpe ba étiquettes ya makomi.

Na lokasa oyo

Ndenge oyo esalaka

Ba composants ya progrès etongami na ba éléments HTML mibale, mua CSS pona ko setting largeur, pe mua ba attributs. Tosalelaka te eleman HTML5<progress> , kosala ete okoka kosala ebele ya ba barres ya progrès, ko animer yango, mpe kotia ba étiquettes ya makomi likolo na yango.

Tosalelaka .progresslokola enveloppe pona kolakisa valeur max ya barre ya progression.
Tosalelaka oyo ya kati .progress-barmpo na komonisa bokoli oyo esalemi tii sikoyo.
The .progress-baresengaka style ya inline, classe ya utilitaire, to CSS personnalisé pona kotiya largeur na bango.
The .progress-baresengaka pe mua rolepe ba ariaattributs po ezala accessible.

Botia yango nyonso esika moko, mpe bozali na bandakisa oyo elandi.

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

Bootstrap epesaka mwa ndambo ya ba utilitaires mpo na kotiya bonene . Na kotalela bamposa na yo, yango ekoki kosalisa na kobongisa nokinoki bokoli.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ba étiquettes

Bakisa ba étiquettes na ba barres na yo ya progrès na kotiaka makomi na kati ya .progress-bar.

25% ya .

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

Molai

Totie kaka heightvaleur na .progress, donc soki o changer valeur wana intérieur .progress-bareko changer automatiquement taille en conséquence.

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

Makambo oyo esalemaki na nsima

Salelá bakelasi ya utilitaire ya nsima mpo na kobongola ndenge oyo ba barres ya progrès mokomoko ezali komonana.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<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>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ba barres ebele

Botia ba barres ya progression ebele na composante ya progression soki oza na besoin.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ezali na bansinga

Bakisa .progress-bar-stripedna nyonso .progress-barmpo na kosalela bande na nzela ya gradient CSS likolo ya langi ya nsima ya barre ya bokende liboso.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<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>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Ba rayures animées

Gradient rayé ekoki pe kozala animation. Bakisa .progress-bar-animatedna mpo na .progress-barko animer ba rayures droite à gauche via ba animations CSS3.

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

Sass oyo azali

Ba variables oyo ezali

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Ba cadres clés

Esalemi mpo na kosala ba animations ya CSS mpo na .progress-bar-animated. Ezali na kati ya scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}