ප්රගතිය

බූට්ස්ට්‍රැප් අභිරුචි ප්‍රගති තීරු භාවිතා කිරීම සඳහා ප්‍රලේඛන සහ උදාහරණ ගොඩගැසී ඇති තීරු, සජීවිකරණ පසුබිම් සහ පෙළ ලේබල සඳහා සහය දක්වයි.

මෙම පිටුවේ

එය ක්රියා කරන ආකාරය

ප්‍රගති සංරචක 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>

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>

ඉරි සහිත

ප්‍රගති තීරුවේ පසුබිම් වර්ණයට ඉහළින් 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 හි එකතු කරන ලදී

Bootstrap හි විකාශනය වන 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};

Sass විචල්යයන්

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