ಪ್ರಗತಿ

ಸ್ಟಾಕ್ ಮಾಡಿದ ಬಾರ್‌ಗಳು, ಅನಿಮೇಟೆಡ್ ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು ಪಠ್ಯ ಲೇಬಲ್‌ಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಹೊಂದಿರುವ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಸ್ಟಮ್ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳನ್ನು ಬಳಸುವುದಕ್ಕಾಗಿ ದಾಖಲಾತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳು.

ಈ ಪುಟದಲ್ಲಿ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಪ್ರೋಗ್ರೆಸ್ ಘಟಕಗಳನ್ನು ಎರಡು HTML ಅಂಶಗಳು, ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ಕೆಲವು CSS ಮತ್ತು ಕೆಲವು ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಾವು HTML5 <progress>ಅಂಶವನ್ನು ಬಳಸುವುದಿಲ್ಲ , ನೀವು ಪ್ರಗತಿ ಪಟ್ಟಿಗಳನ್ನು ಜೋಡಿಸಬಹುದು, ಅವುಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬಹುದು ಮತ್ತು ಅವುಗಳ ಮೇಲೆ ಪಠ್ಯ ಲೇಬಲ್‌ಗಳನ್ನು ಇರಿಸಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ.

.progressಪ್ರಗತಿ ಪಟ್ಟಿಯ ಗರಿಷ್ಠ ಮೌಲ್ಯವನ್ನು ಸೂಚಿಸಲು ನಾವು ಹೊದಿಕೆಯಾಗಿ ಬಳಸುತ್ತೇವೆ .
.progress-barಇದುವರೆಗಿನ ಪ್ರಗತಿಯನ್ನು ಸೂಚಿಸಲು ನಾವು ಒಳಭಾಗವನ್ನು ಬಳಸುತ್ತೇವೆ .
.progress-barಅವುಗಳ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ಇನ್‌ಲೈನ್ ಶೈಲಿ, ಉಪಯುಕ್ತತೆ ವರ್ಗ ಅಥವಾ ಕಸ್ಟಮ್ CSS ಅಗತ್ಯವಿದೆ .
ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು (ಬಳಸಿ , , ಅಥವಾ ಅಂತಹುದೇ) ಒಳಗೊಂಡಂತೆ ಅದನ್ನು ಪ್ರವೇಶಿಸಲು .progress-barಕೆಲವು roleಮತ್ತು ಗುಣಲಕ್ಷಣಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ .ariaaria-labelaria-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>

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ಕೆಲವು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ . ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ಅನುಗುಣವಾಗಿ, ಪ್ರಗತಿಯನ್ನು ತ್ವರಿತವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಇವು ಸಹಾಯ ಮಾಡಬಹುದು.

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>

ಪಟ್ಟೆಯುಳ್ಳ

ಪ್ರಗತಿ ಪಟ್ಟಿಯ ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ಮೇಲೆ CSS ಗ್ರೇಡಿಯಂಟ್ ಮೂಲಕ ಪಟ್ಟಿಯನ್ನು ಅನ್ವಯಿಸಲು .progress-bar-stripedಯಾವುದಕ್ಕೂ ಸೇರಿಸಿ ..progress-bar

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>

ಅನಿಮೇಟೆಡ್ ಪಟ್ಟೆಗಳು

ಪಟ್ಟೆಯುಳ್ಳ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಸಹ ಅನಿಮೇಟೆಡ್ ಮಾಡಬಹುದು. CSS3 ಅನಿಮೇಷನ್‌ಗಳ ಮೂಲಕ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪಟ್ಟೆಗಳನ್ನು ಅನಿಮೇಟ್ .progress-bar-animatedಮಾಡಲು ಗೆ ಸೇರಿಸಿ ..progress-bar

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

ಅಸ್ಥಿರ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿಕಾಸಗೊಳ್ಳುತ್ತಿರುವ CSS ಅಸ್ಥಿರ ವಿಧಾನದ ಭಾಗವಾಗಿ, ಪ್ರಗತಿ ಬಾರ್‌ಗಳು .progressವರ್ಧಿತ ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ಈಗ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು Sass ಮೂಲಕ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ Sass ಗ್ರಾಹಕೀಕರಣವು ಇನ್ನೂ ಬೆಂಬಲಿತವಾಗಿದೆ.

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