முன்னேற்றம்

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

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

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

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

சாஸ்

மாறிகள்

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