പുരോഗതി

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്‌ടാനുസൃത പുരോഗതി ബാറുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും സ്റ്റാക്ക് ചെയ്‌ത ബാറുകൾ, ആനിമേറ്റുചെയ്‌ത പശ്ചാത്തലങ്ങൾ, ടെക്‌സ്‌റ്റ് ലേബലുകൾ എന്നിവയ്‌ക്കുള്ള പിന്തുണ ഫീച്ചർ ചെയ്യുന്നു.

ഈ പേജിൽ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

രണ്ട് HTML ഘടകങ്ങൾ, വീതി സജ്ജീകരിക്കാൻ ചില CSS, കുറച്ച് ആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിച്ചാണ് പ്രോഗ്രസ് ഘടകങ്ങൾ നിർമ്മിച്ചിരിക്കുന്നത്. ഞങ്ങൾ HTML5 <progress>ഘടകം ഉപയോഗിക്കുന്നില്ല , നിങ്ങൾക്ക് പ്രോഗ്രസ് ബാറുകൾ അടുക്കിവെക്കാനും അവയെ ആനിമേറ്റ് ചെയ്യാനും അവയുടെ മുകളിൽ ടെക്സ്റ്റ് ലേബലുകൾ സ്ഥാപിക്കാനും കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു.

.progressപ്രോഗ്രസ് ബാറിന്റെ പരമാവധി മൂല്യം സൂചിപ്പിക്കാൻ ഞങ്ങൾ ഒരു റാപ്പറായി ഉപയോഗിക്കുന്നു .
.progress-barഇതുവരെയുള്ള പുരോഗതി സൂചിപ്പിക്കാൻ ഞങ്ങൾ ആന്തരികം ഉപയോഗിക്കുന്നു .
.progress-barഅവയുടെ വീതി സജ്ജീകരിക്കുന്നതിന് ഒരു ഇൻലൈൻ ശൈലി, യൂട്ടിലിറ്റി ക്ലാസ് അല്ലെങ്കിൽ ഇഷ്‌ടാനുസൃത CSS എന്നിവ ആവശ്യമാണ് .
ആക്‌സസ് ചെയ്യാവുന്ന ഒരു പേര് (ഉപയോഗിക്കുന്നത് , , അല്ലെങ്കിൽ സമാനമായത്) ഉൾപ്പെടെ, ആക്‌സസ്സ് ചെയ്യാൻ ചിലതും ആട്രിബ്യൂട്ടുകളും ആവശ്യമാണ് .progress-bar.roleariaaria-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 ആനിമേഷനുകൾ വഴി വലത്ത് നിന്ന് ഇടത്തേക്ക് സ്ട്രൈപ്പുകൾ ആനിമേറ്റ് ചെയ്യാൻ to .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>

സി.എസ്.എസ്

വേരിയബിളുകൾ

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