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.
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
.progress
lokola enveloppe pona kolakisa valeur max ya barre ya progression. - Tosalelaka oyo ya kati
.progress-bar
mpo na komonisa bokoli oyo esalemi tii sikoyo. - The
.progress-bar
esengaka style ya inline, classe ya utilitaire, to CSS personnalisé pona kotiya largeur na bango. - The
.progress-bar
esengaka pe muarole
pe baaria
attributs 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>
Bakisa ba étiquettes na ba barres na yo ya progrès na kotiaka makomi na kati ya .progress-bar
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Totie kaka height
valeur na .progress
, donc soki o changer valeur wana intérieur .progress-bar
eko 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>
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>
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>
Bakisa .progress-bar-striped
na nyonso .progress-bar
mpo 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>
Gradient rayé ekoki pe kozala animation. Bakisa .progress-bar-animated
na mpo na .progress-bar
ko animer ba rayures droite à gauche via ba animations CSS3.