פּראָגרעס

דאַקיומענטיישאַן און ביישפילן פֿאַר ניצן באָאָטסטראַפּ מנהג פּראָגרעס באַרס מיט שטיצן פֿאַר סטאַקט באַרס, אַנימאַטעד באַקגראַונדז און טעקסט לאַבעלס.

אויף דעם בלאַט

וויאזוי עס ארבעט

פּראָגרעס קאַמפּאָונאַנץ זענען געבויט מיט צוויי HTML עלעמענטן, עטלעכע CSS צו שטעלן די ברייט און עטלעכע אַטריביוץ. מיר טאָן ניט נוצן די HTML5 <progress>עלעמענט , אַזוי אַז איר קענען אָנלייגן פּראָגרעס באַרס, ופלעבן זיי און שטעלן טעקסט לאַבעלס איבער זיי.

מיר נוצן די .progressווי אַ ראַפּער צו אָנווייַזן די מאַקסימום ווערט פון די פּראָגרעס באַר.
מיר נוצן די ינער .progress-barצו אָנווייַזן די פּראָגרעס אַזוי ווייַט.
עס .progress-barדאַרף אַן ינלינע סטיל, נוצן קלאַס אָדער מנהג CSS צו שטעלן זייער ברייט.
די .progress-barאויך ריקווייערז עטלעכע roleאון ariaאַטריביוץ צו מאַכן עס צוטריטלעך, אַרייַנגערעכנט אַ צוטריטלעך נאָמען (ניצן aria-label, aria-labelledby, אָדער ענלעך).

שטעלן דאָס אַלע צוזאַמען, און איר האָבן די פאלגענדע ביישפילן.

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 גיט אַ האַנדפול פון יוטילאַטיז פֿאַר באַשטעטיקן ברייט . דעפּענדינג אויף דיין באדערפענישן, דאָס קען העלפֿן צו געשווינד קאַנפיגיער פּראָגרעס.

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>

לאַבעלס

לייג לאַבעלס צו דיין פּראָגרעס באַרס דורך פּלייסינג טעקסט אין די .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>

הייך

מיר שטעלן בלויז אַ heightווערט אויף די .progress, אַזוי אויב איר טוישן דעם ווערט די ינער .progress-barוועט אויטאָמאַטיש רעסיזע אַקאָרדינגלי.

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>

באַקגראַונדז

ניצן הינטערגרונט נוצן קלאסן צו טוישן די אויסזען פון יחיד פּראָגרעס באַרס.

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>

קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .visually-hiddenקלאַס.

עטלעכע באַרס

אַרייַננעמען קייפל פּראָגרעס באַרס אין אַ פּראָגרעס קאָמפּאָנענט אויב איר דאַרפֿן.

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>

סטרייפּט

לייג .progress-bar-stripedצו קיין .progress-barצו צולייגן אַ פּאַס דורך CSS גראַדיענט איבער די הינטערגרונט פֿאַרב פון די פּראָגרעס באַר.

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>

אַנימאַטעד מלקות

די סטרייפּט גראַדיענט קענען אויך זיין אַנימאַטעד. לייג .progress-bar-animatedצו .progress-barצו ופלעבן די סטריפּס רעכט צו לינקס דורך 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

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, פּראָגרעס באַרס איצט נוצן היגע CSS וועריאַבאַלז .progressפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

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

סאָס וועריאַבאַלז

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

קייפראַמעס

געוויינט פֿאַר קריייטינג די CSS אַנאַמיישאַנז פֿאַר .progress-bar-animated. אַרייַנגערעכנט אין scss/_progress-bar.scss.

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