Përparim
Dokumentacion dhe shembuj për përdorimin e shiritave të përparimit të personalizuar të Bootstrap që paraqesin mbështetje për shirita të grumbulluar, sfonde të animuara dhe etiketa teksti.
Si punon
Komponentët e progresit janë ndërtuar me dy elementë HTML, disa CSS për të vendosur gjerësinë dhe disa atribute. Ne nuk përdorim elementin HTML5<progress>
, duke u siguruar që mund të grumbulloni shirita progresi, t'i animoni ato dhe të vendosni etiketa teksti mbi to.
- Ne përdorim
.progress
si mbështjellës për të treguar vlerën maksimale të shiritit të përparimit. - Ne përdorim të brendshmen
.progress-bar
për të treguar përparimin e deritanishëm. - Kërkon një
.progress-bar
stil inline, klasë të shërbimeve ose CSS të personalizuar për të vendosur gjerësinë e tyre. - Gjithashtu
.progress-bar
kërkon disarole
dhearia
atribute për ta bërë atë të arritshëm.
Mblidhini të gjitha së bashku dhe keni shembujt e mëposhtëm.
<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 ofron një pjesë të vogël të shërbimeve për vendosjen e gjerësisë . Në varësi të nevojave tuaja, këto mund të ndihmojnë në konfigurimin e shpejtë të progresit.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Etiketat
Shtoni etiketa në shiritat e përparimit tuaj duke vendosur tekst brenda .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>
Lartësia
Ne vendosim vetëm një height
vlerë në .progress
, kështu që nëse e ndryshoni atë vlerë, madhësia e brendshme .progress-bar
do të ndryshohet automatikisht në përputhje me rrethanat.
<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>
Sfondet
Përdorni klasat e shërbimeve të sfondit për të ndryshuar pamjen e shiritave individualë të përparimit.
<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>
Shufra të shumta
Përfshini shirita të shumtë progresi në një komponent progresi nëse keni nevojë.
<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>
Me vija
Shtoni .progress-bar-striped
në ndonjë .progress-bar
për të aplikuar një shirit nëpërmjet gradientit CSS mbi ngjyrën e sfondit të shiritit të përparimit.
<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>
Vija të animuara
Gradienti me vija gjithashtu mund të animohet. Shtoni .progress-bar-animated
në .progress-bar
për të animuar vijat djathtas në të majtë përmes animacioneve 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>