முன்னேற்றம்

அடுக்கப்பட்ட பார்கள், அனிமேஷன் பின்னணிகள் மற்றும் உரை லேபிள்களுக்கான ஆதரவைக் கொண்ட பூட்ஸ்டார்ப் தனிப்பயன் முன்னேற்றப் பட்டிகளைப் பயன்படுத்துவதற்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள்.

இந்தப் பக்கத்தில்

எப்படி இது செயல்படுகிறது

முன்னேற்றக் கூறுகள் இரண்டு 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; }
  }
}