Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--میله یا نوار پیشرفت در بوت استرپ (Progress Bars)

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت بیستم آموزش در زیر قرار داده شده است.

میله یا نوار پیشرفت در بوت استرپ (Progress Bars)                                                قسمت بیستم

نوار پیمایش عمومی :

از یک progress bar می توان برای نشان دادن اینکه فرایند کار یک کاربر تا چه حد طول می کشد یا تا چه حد انجام شده است استفاده شود

بوت استرپ انواع مختلفی از progress bar را فراهم کرده است که ساده ترین آن که پیش فرض نیز می باشد به صورت زیر است :

 

6358439135030337061.png

  • برای ایجاد یک progress bar به صورت پیش فرض کلاس progress. را به المان <div>  اضافه می کنیم
  • خصوصیت "aria-valuemin="0  و "aria-valuemax="100 نشان دهنده اندازه میله پیشرفت می باشد
  • خصوصیت "aria-valuenow="70 نشان می دهد که  کار ما تا چه اندازه ای پیشرفت کرده است

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-        valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

میله پیشرفت با برچسب :

برای نشان دادن یک درصد قابل مشاهده بر روی میله پیشرفت کافیست کلاس sr-only. را از progress bar حذف کنید

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

6358439157949447962.png

میله های  پیشرفت رنگی :

برا ی رنگ کردن progress bar از کلاس های متنی استفاده می کنیم تا معنی میله پیشرفت  را با استفاده از رنگ ها نمایش دهیم

کلاس های متنی که می توانند با progress bar استفاده شوند به صورت زیر می باشند

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger

مثال زیر نشان می دهد که چگونه یک progress bar را با کلاس های متنی ایجاد کنیم : 

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

 

6358439171709234973.png

میله های پیشرفت راه راه (Striped Progress Bars) :

همچنین میله پیشرفت می تواند به صورت راه راه باشد برای این کار کلاس progress-bar-striped. را به progress bar اضافه می کنیم

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

6358439183879731084.png

میله پیمایش متحرک (Animated Progress Bar) :

برای متحرک کردن  progress bar  کلاس active. را به آن اضافه می کنیم

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>

پایان قسمت بیستم

 ادامه آموزش در قسمت بیست و یکم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید. 

منبع :https://www.w3schools.com

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.