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>

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

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

ಪಟ್ಟೆಯುಳ್ಳ

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

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

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

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

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