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.

Në këtë faqe

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 .progresssi mbështjellës për të treguar vlerën maksimale të shiritit të përparimit.
Ne përdorim të brendshmen .progress-barpër të treguar përparimin e deritanishëm.
Kërkon një .progress-barstil inline, klasë të shërbimeve ose CSS të personalizuar për të vendosur gjerësinë e tyre.
Gjithashtu .progress-barkërkon disa roledhe ariaatribute 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.

25%

<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ë heightvlerë në .progress, kështu që nëse e ndryshoni atë vlerë, madhësia e brendshme .progress-bardo 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-stripednë ndonjë .progress-barpë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-animatednë .progress-barpë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>

Sass

Variablat

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

Kornizat kryesore

Përdoret për krijimin e animacioneve CSS për .progress-bar-animated. Të përfshira në scss/_progress-bar.scss.

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