in English

Progresas

Dokumentacija ir pavyzdžiai, kaip naudoti Bootstrap pasirinktines eigos juostas, kuriose palaikomos sukrautos juostos, animuoti fonai ir teksto etiketės.

Šiame puslapyje

Kaip tai veikia

„Progress“ komponentai sukurti naudojant du HTML elementus, kai kuriuos CSS pločiui nustatyti ir keletą atributų. Mes nenaudojame HTML5 <progress>elemento , todėl užtikriname, kad galite sukrauti eigos juostas, jas animuoti ir ant jų dėti teksto etiketes.

Naudojame .progresskaip įvyniojimą, kad nurodytume maksimalią eigos juostos vertę.
Mes naudojame vidinį .progress-bar, kad nurodytume iki šiol padarytą pažangą.
Norint .progress-barnustatyti jų plotį, reikalingas eilutinis stilius, naudingumo klasė arba tinkintas CSS.
Taip .progress-barpat reikia tam tikrų roleir ariaatributų, kad jis būtų pasiekiamas.

Sudėkite visa tai ir turėsite šiuos pavyzdžius.

<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“ siūlo keletą paslaugų pločiui nustatyti . Atsižvelgiant į jūsų poreikius, tai gali padėti greitai konfigūruoti pažangą.

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

Etiketės

Pridėkite etikečių prie eigos juostų įdėdami tekstą į .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>

Aukštis

Mes nustatome tik heightreikšmę .progress, taigi, jei pakeisite šią vertę, vidinis .progress-bardydis bus automatiškai atitinkamai pakeistas.

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

Fonai

Norėdami pakeisti atskirų eigos juostų išvaizdą, naudokite fono naudingumo klases.

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

Kelios juostos

Jei reikia, į eigos komponentą įtraukite kelias eigos juostas.

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

Dryžuotas

Pridėkite .progress-bar-stripedprie bet kurio .progress-bar, kad pritaikytumėte juostelę per CSS gradientą virš eigos juostos fono spalvos.

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

Animuotos juostelės

Dryžuotas gradientas taip pat gali būti animuotas. Pridėti .progress-bar-animatedprie .progress-bar, kad animuotų juosteles iš dešinės į kairę per CSS3 animaciją.

<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

Kintamieji

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

Pagrindiniai kadrai

Naudojama kuriant CSS animacijas, skirtas .progress-bar-animated. Įtraukta į scss/_progress-bar.scss.

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