Ŋgᴐyiyi

Nuŋlɔɖiwo kple kpɔɖeŋuwo na Bootstrap ƒe ŋgɔyiyi ƒe dzesi siwo wowɔ ɖe ɖoɖo nu zazã siwo me kpekpeɖeŋu le na fli siwo woƒo ƒu, megbenya siwo me agbe le, kple nuŋɔŋlɔ ƒe dzesiwo.

Le axa sia dzi

Ale si wòwɔa dɔe

Wotu ŋgɔyiyi ƒe akpawo kple HTML ƒe akpa eve, CSS aɖewo tsɔ ɖo kekeme, kple nɔnɔme ʋee aɖewo. Míezãa HTML5 <progress>element la o , míekpɔa egbɔ be àteŋu aƒo ŋgɔyiyi ƒe fliwo nu ƒu, awɔ agbe, eye nàda nuŋɔŋlɔ ƒe dzesiwo ɖe wo dzi.

Míezãa .progressas a wrapper tsɔ fiaa max value si le progress bar la ŋu.
Míezãa ememetɔa .progress-bartsɔ fiaa ŋgɔyiyi si wowɔ vaseɖe fifia.
The .progress-barbia be woawɔ atsyã si le fli me, dɔwɔnu ƒe hatsotso, alo CSS si wowɔ ɖe ɖoɖo nu be woaɖo woƒe kekeme.
The .progress-barhã bia nanewo rolekple arianɔnɔmewo be wòana woate ŋu akpɔe, si me ŋkɔ si woate ŋu akpɔ (zã aria-label, aria-labelledby, alo esiawo tɔgbe).

Ne ètsɔ nya mawo katã ƒo ƒui, eye kpɔɖeŋu siwo gbɔna la le asiwò.

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 naa dɔwɔnu ʋɛ aɖewo hena kekeme ɖoɖo . Le wò hiahiãwo nu la, esiawo ate ŋu akpe ɖe ŋuwò le ŋgɔyiyi ƒe ɖoɖowɔwɔ kabakaba me.

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>

Ŋkɔwo ƒe ŋkɔwo

Tsɔ dzesiwo kpe ɖe wò ŋgɔyiyi ƒe dzesiwo ŋu to nuŋɔŋlɔwo dede .progress-bar.

25% ƒe xexlẽme.

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>

Kᴐkᴐme

Míeɖo heightasixɔxɔ aɖe ko ɖe .progress, eyata ne ètrɔ asixɔxɔ ma la, ememetɔa atrɔ eƒe .progress-barlolome le eɖokui si ɖe edzi.

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>

Nusiwo dzɔ le megbe

Zã megbenyawo ƒe dɔwɔnu ƒe klasswo nàtsɔ atrɔ ŋgɔyiyi ƒe dzesi ɖekaɖekawo ƒe dzedzeme.

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>

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hiddenklass la ene.

Ati geɖe siwo wotsɔna ƒoa nui

De ŋgɔyiyi ƒe dzesi geɖewo ŋgɔyiyi ƒe akpa aɖe me ne èhiã.

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>

Ʋuʋudediwo le eŋu

Tsɔ kpe .progress-bar-stripedɖe ɖesiaɖe .progress-barŋu be nàtsɔ fli aɖe ade CSS ƒe ʋuʋudedi dzi ɖe ŋgɔyiyi ƒe dzesi ƒe megbe amadede dzi.

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>

Fli siwo me agbe le

Woate ŋu awɔ nɔnɔmetata si le fli me la hã. Tsɔ kpe .progress-bar-animatedɖe eŋu .progress-barbe nàna fliawo nawɔ dɔ le ɖusime yi miame to CSS3 ƒe nɔnɔmetatawo dzi.

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 ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, ŋgɔyiyi ƒe dzesiwo zãa teƒea ƒe CSS tɔtrɔwo le fifia .progresshena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwo ƒe ŋgɔyiyi si wodo ɖe ŋgɔ. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$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 ƒe tɔtrɔwo

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

Keyframewo ƒe nɔnɔmetatawo

Wozãnɛ hena CSS ƒe nɔnɔmetatawo wɔwɔ na .progress-bar-animated. Wo dometɔ aɖewoe nye scss/_progress-bar.scss.

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