نوار پیشرفت در Bootstrap ورژن 4

نوار پیشرفت ساده

یک نوار پیشرفت طول فرایند اجرا  را می تواند به کاربر نشان دهد.

25% Complete
50% Complete
100% Complete

برای ایجاد یک نوار پیشرفت به طور پیش فرض، یک کلاس .progress را به عنصر کانتینر اضافه کنید و کلاس progress-bar  را به عنصر فرزندش اضافه کنید. از width در  CSS برای تنظیم عرض نوار پیشرفت استفاده کنید:

نوار پیشرفت ساده
 <div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div> 
مشاهده مثال

ارتفاع نوار پیشرفت

 
 
 
 
 

ارتفاع نوار پیشرفت به طور پیش فرض 16 پیکسل است. برای تغییر آن از ویژگی height  در  CSS استفاده کنید. توجه داشته باشید که شما باید همان ارتفاع را برای محفظه پیشرفت و نوار پیشرفت تنظیم کنید:

ارتفاع نوار پیشرفت
 <div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div> 
مشاهده مثال

مقدار پیشرفت در نوار

برای نشان دادن درصد قابل مشاهده متن را داخل نوار پیشرفت وارد کنید:

70%

مقدار پیشرفت در نوار
 <div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div> 
مشاهده مثال

رنگ نوارهای پیشرفت

 

 

 

 

 

 

 

 

 

به طور پیش فرض، نوار پیشرفت آبی (اولیه) است. از هر یک از ز پس زمینه متنی بوت استرپ 4 برای رنگ از آن استفاده کنید:

رنگ های پیشرفته نوار
 <!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div> 
مشاهده مثال

نوارهای پیشرفته هاشور دار

 
 
 
 
 
 
 
 
 

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

نوارهای پیشرفته هاشور دار
 <div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div> 
مشاهده مثال

نوار پیشرفت متحرک

 

کلاس progressive-bar-animated را برای متحرک کردن نوار پیشرفت اضافه کنید:

نوار پیشرفت متحرک
 <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div> 
مشاهده مثال

پیشرفت های چندگانه

نوار های پیشرفت نیز می توانند انباشته شوند:

Free Space
Warning
Danger

پیشرفت های چندگانه
 <div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز