Ndzima

Matsalwa na swikombiso swo tirhisa tibara ta nhluvuko ta ntolovelo ta Bootstrap leti kombisaka nseketelo wa tibara leti hlanganisiweke, swifaniso swa le ndzhaku leswi hanyaka, na malebvu ya matsalwa.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Swiphemu swa nhluvuko swi akiwile hi swiaki swimbirhi swa HTML, swin’wana swa CSS ku veka ku anama, na swihlawulekisi swi nga ri swingani. A hi tirhisi elemente ya HTML5<progress> , hi tiyisisa leswaku u nga hlanganisa tibara ta nhluvuko, u ti endla ti hanya, na ku veka malebvu ya matsalwa ehenhla ka tona.

Hi tirhisa .progressas a wrapper ku kombisa max value ya progress bar.
Hi tirhisa swa le ndzeni .progress-barku kombisa nhluvuko ku fikela sweswi.
The .progress-baryi lava xitayili xa le ndzeni ka layini, tlilasi ya vukorhokeri, kumbe CSS ya ntolovelo ku veka ku anama ka vona.
The .progress-baryi tlhela yi lava swin’wana rolena ariaswihlawulekisi ku endla leswaku yi fikeleleka, ku katsa na vito leri fikelelaka (hi ku tirhisa aria-label, aria-labelledby, kumbe swo fana na swona).

Hlanganisa sweswo hinkwaswo swin’we, kutani u ni swikombiso leswi landzelaka.

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 yi nyika switirhisiwa swo hlayanyana swo veka ku anama . Ku ya hi swilaveko swa wena, leswi swi nga pfuna eku hleleni ka nhluvuko hi ku hatlisa.

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>

Tilebhele

Engetelani malebvu eka tibara ta wena ta nhluvuko hi ku veka tsalwa endzeni ka .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>

Ku leha

Hi veka ntsena heightntikelo eka .progress, kutani loko u cinca ntikelo wolowo wa le ndzeni .progress-barwu ta cinca mpimo hi woxe hi ku ya hi sweswo.

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>

Swifaniso swa le ndzhaku

Tirhisa titlilasi ta vukorhokeri bya le ndzhaku ku cinca ku languteka ka tibara ta nhluvuko ha yin’we.

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>

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Tibara to tala

Katsa tibara to tala ta nhluvuko eka xiphemu xa nhluvuko loko u swi lava.

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>

Swirhendzevutana

Engetela .progress-bar-stripedeka xin’wana na xin’wana .progress-barku tirhisa xirhendzevutana hi ku tirhisa CSS gradient ehenhla ka muvala wa le ndzhaku wa barhi ya nhluvuko.

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>

Mitila leyi nga ni swifaniso leswi hanyaka

Gradient leyi nga ni mitila na yona yi nga ha va ni swifaniso leswi hanyaka. Engetela .progress-bar-animatedeka .progress-barku endla leswaku swirhendzevutana swi hanya exineneni ku ya eximatsini hi ku tirhisa swifaniso leswi hanyaka swa 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

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, tibara ta nhluvuko sweswi ti tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .progressfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

  --#{$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 swilo leswi cinca-cincaka

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

Tifreimi ta swilotlelo

Yi tirhisiwa ku endla swifaniso swa CSS swa .progress-bar-animated. Ku katsiwile eka scss/_progress-bar.scss.

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