in English

Puriy

Qillqakuna chaymanta ejemplokuna Bootstrap sapanchasqa ñawpaqman puriy barrakuna llamk'achinapaq yanapakuyniyuq pilasqa barrakuna, kawsachisqa qhipakuna chaymanta qillqa etiquetakuna.

Kay p'anqapi

Imayna llamkan

Ñawpaqman puriy componentekuna iskay HTML elementokunawan ruwasqa kanku, wakin CSS anchota churanapaq, chaymanta huk pisi atributokuna. Mana HTML5 <progress>elementota llamk'achiykuchu , ñawpaqman puriy barrakunata pilayta atikunki, kawsachiyta atikunki chaymanta qillqa etiquetakuna chay patapi churayta atikunki.

Chayta .progresshuk p'istu hina llamk'achiyku ñawpaqman puriy barrapa max chaninninta rikuchinapaq.
Ukhuwanmi .progress-barkunankama imakunachus ñawparisqanmanta rikuchiyku.
The .progress-barhuk chiru ukhupi estilo, yanapakuy clase utaq sapanchasqa CSS anchunku churanapaq munan.
The .progress-barkaqpas wakin rolechaymanta ariaatributokuna chayayta atikuq kananpaq mañan, chaymanta huk yaykuna sutita ( aria-label, aria-labelledby, utaq chayman rikch'akuq llamk'achispa).

Chayta llapanta huñuy, hinaspa kay ejemplokunata tarinki.

html nisqapi

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

Bootstrap huk maki yanapakuykunata qun anchota churanapaq . Necesitasqaykiman hina, kaykunaqa yanapanman usqhaylla ñawpaqman puriyta wakichiypi.

html nisqapi

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

Etiquetas

Ñawpaqman puriy barraykikunaman etiquetakunata yapay qillqa ukhupi churaspa .progress-bar.

25% nisqa.

html nisqapi

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

Sayay

Huk heightchanillata churayku .progress, chayrayku sichus chay chanita tikranki chay ukhu .progress-barkikinmanta chaymanhina sayayninta tikranqa.

html nisqapi

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Antecedentes

Sapa ñawpaqman puriy barrakuna rikchayninta tikranapaq qhipa yanapakuy clasekuna llamk'achiy.

html nisqapi

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .visually-hiddenclasewan pakasqa.

Achka barras

Huk ñawpaqman puriy componente kaqpi achka ñawpaqman puriy barrakunata churay sichus necesitanki.

html nisqapi

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

Rayado

Mayqinmanpas yapay .progress-bar-stripedhuk .progress-barraya CSS gradiente kaqnintakama ñawpaqman puriy barrapa qhipa llimp'in patapi churanapaq.

html nisqapi

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Rayas animadas

Chay rayayuq gradiente nisqapas animasqa kanmanmi. Yanapay .progress-bar-animatedkayman .progress-barCSS3 kawsachiykunawan rayakunata pañamanta lluq'iman kawsachinapaq.

html nisqapi

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, ñawpaqman puriy barrakuna kunan kiti CSS tikraqkunata llamk'achinku .progressallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass variables nisqakuna

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

Marcos clave

.progress-bar-animated. _ Incluido en scss/_progress-bar.scss.

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