Source

പുരോഗതി

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

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

രണ്ട് 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 ആനിമേഷനുകൾ വഴി വലത്ത് നിന്ന് ഇടത്തേക്ക് സ്ട്രൈപ്പുകൾ ആനിമേറ്റ് ചെയ്യാൻ to .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>