Horumar

Dukumeenti iyo tusaalooyin isticmaalka Bootstrap horumarka caadooyinka ee baararka muujinaya taageerada baararka is dulsaaran, asalka noole, iyo sumadaha qoraalka.

Boggan

Sida ay u shaqeyso

Qaybaha horumarka waxa lagu dhisay laba curiye HTML ah, qaar CSS ah si loo dejiyo ballaca, iyo sifooyin kooban. Ma isticmaalno HTML5 <progress>element , anagoo hubinayna inaad ku dhejin karto baararka horumarka, firfircooni, oo aad dhejin kartid qoraallada korkooda.

Waxaan u isticmaalnaa .progressduub ahaan si aan u muujino qiimaha ugu badan ee bar horumarka.
Waxaan u isticmaalnaa gudaha .progress-barsi aan u muujinno horumarka ilaa hadda jira.
Waxay .progress-baru baahan tahay qaab khad dhexdeed ah, fasalka utility, ama CSS caadadii si loo dejiyo ballacooda.
Sidoo .progress-barkale waxay u baahan tahay qaar roleiyo ariasifooyin si looga dhigo mid la heli karo, oo ay ku jiraan magac la heli karo (adoo isticmaalaya aria-label, aria-labelledby, ama la mid ah).

Isku soo wada duuboo, waxaadna haysataa tusaalooyinka soo socda.

html

<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 waxay ku siinaysaa gacan muggeed oo utility ah dejinta ballaca . Iyada oo ku xidhan baahiyahaaga, kuwani waxa laga yaabaa inay kaa caawiyaan habaynta horumarka degdega ah.

html

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

Calaamadaha

Ku dar summadaada baararka horumarkaaga adiga oo qoraal gelinaya gudaha .progress-bar.

25%

html

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

Dhererka

Kaliya waxaan dejinay heightqiimaha .progress, markaa haddii aad bedesho qiimahaas gudaha .progress-barayaa si toos ah u cabbiri doona si waafaqsan.

html

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

Asalkii hore

Isticmaal fasallada utility-ga asalka ah si aad u bedesho muuqaalka baararka horumarka shakhsi ahaaneed.

html

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

U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

Baararka badan

Ku dar baararka horumarka badan ee qaybta horumarka haddii aad u baahan tahay.

html

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

Xariifnimo

Ku dar .progress-bar-stripedmid kasta .progress-barsi aad u marso xariijimaha CSS ee midabka asalka ah ee horumarka.

html

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

Xariijimo firfircoon

Dhererka xariijimaha leh ayaa sidoo kale la dhaqdhaqaajin karaa. Ku dar .progress-bar-animatedsi .progress-baraad u dhaqaajiso xariijimaha midig ilaa bidix adoo isticmaalaya animations CSS3.

html

<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

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, baararka horumarka ayaa hadda adeegsada doorsoomayaasha CSS-ta maxalliga ah .progresssi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$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};

Doorsoomayaasha Sass

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

Keyframes

Loo isticmaalo abuurista animations CSS ee .progress-bar-animated. Waxaa ku scss/_progress-bar.scssjira

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