പുരോഗതി
ബൂട്ട്സ്ട്രാപ്പ് ഇഷ്‌ടാനുസൃത പുരോഗതി ബാറുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും സ്റ്റാക്ക് ചെയ്‌ത ബാറുകൾ, ആനിമേറ്റുചെയ്‌ത പശ്ചാത്തലങ്ങൾ, ടെക്സ്റ്റ് ലേബലുകൾ എന്നിവയ്‌ക്കുള്ള പിന്തുണ ഫീച്ചർ ചെയ്യുന്നു.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു
രണ്ട് HTML ഘടകങ്ങൾ, വീതി സജ്ജീകരിക്കാൻ ചില CSS, കുറച്ച് ആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിച്ചാണ് പ്രോഗ്രസ് ഘടകങ്ങൾ നിർമ്മിച്ചിരിക്കുന്നത്. ഞങ്ങൾ HTML5 <progress>ഘടകം ഉപയോഗിക്കുന്നില്ല , നിങ്ങൾക്ക് പ്രോഗ്രസ് ബാറുകൾ അടുക്കിവെക്കാനും അവയെ ആനിമേറ്റ് ചെയ്യാനും അവയുടെ മുകളിൽ ടെക്സ്റ്റ് ലേബലുകൾ സ്ഥാപിക്കാനും കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു.
.progressപ്രോഗ്രസ് ബാറിന്റെ പരമാവധി മൂല്യം സൂചിപ്പിക്കാൻ ഞങ്ങൾ ഒരു റാപ്പറായി ഉപയോഗിക്കുന്നു ..progress-barഇതുവരെയുള്ള പുരോഗതി സൂചിപ്പിക്കാൻ ഞങ്ങൾ ആന്തരികം ഉപയോഗിക്കുന്നു ..progress-barഅവയുടെ വീതി സജ്ജീകരിക്കുന്നതിന് ഒരു ഇൻലൈൻ ശൈലി, യൂട്ടിലിറ്റി ക്ലാസ് അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത CSS എന്നിവ ആവശ്യമാണ് .- ആക്‌സസ് ചെയ്യാവുന്ന ഒരു പേര് (ഉപയോഗിക്കുന്നത് , , അല്ലെങ്കിൽ സമാനമായത്) ഉൾപ്പെടെ, ആക്‌സസ്സ് ചെയ്യാൻ ചിലതും ആട്രിബ്യൂട്ടുകളും ആവശ്യമാണ്
.progress-bar.roleariaaria-labelaria-labelledby
ഇതെല്ലാം ഒരുമിച്ച് ചേർക്കുക, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ഉദാഹരണങ്ങളുണ്ട്.
<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>വീതി ക്രമീകരിക്കുന്നതിന് ബൂട്ട്സ്ട്രാപ്പ് ഒരുപിടി യൂട്ടിലിറ്റികൾ നൽകുന്നു . നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച്, പുരോഗതി വേഗത്തിൽ കോൺഫിഗർ ചെയ്യാൻ ഇവ സഹായിച്ചേക്കാം.
<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.
<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അതിനനുസരിച്ച് ആന്തരികം യാന്ത്രികമായി വലുപ്പം മാറ്റും.
<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>പശ്ചാത്തലങ്ങൾ
വ്യക്തിഗത പുരോഗതി ബാറുകളുടെ രൂപം മാറ്റാൻ പശ്ചാത്തല യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക.
<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ക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.
ഒന്നിലധികം ബാറുകൾ
നിങ്ങൾക്ക് വേണമെങ്കിൽ ഒരു പുരോഗതി ഘടകത്തിൽ ഒന്നിലധികം പ്രോഗ്രസ് ബാറുകൾ ഉൾപ്പെടുത്തുക.
<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
<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 ആനിമേഷനുകൾ വഴി വലത്ത് നിന്ന് ഇടത്തേക്ക് സ്ട്രൈപ്പുകൾ ആനിമേറ്റ് ചെയ്യാൻ to .progress-bar-animatedചേർക്കുക ..progress-bar
<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>സി.എസ്.എസ്
വേരിയബിളുകൾ
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; }
}
}