Source

פּראָגרעס

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

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

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

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

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

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

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

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

לאַבעלס

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

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

הייך

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

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

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

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

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

עטלעכע באַרס

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

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

סטרייפּט

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

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

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

די סטרייפּט גראַדיענט קענען אויך זיין אַנימאַטעד. לייג .progress-bar-animatedצו .progress-barצו ופלעבן די סטריפּס רעכט צו לינקס דורך CSS3 אַנאַמיישאַנז.

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