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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

نوار پیشرفت را می‌توان برای نشان دادن اینکه کاربر چه میزان پردازش داشته به کار برد.[۱]

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

مثال

1 <div class="progress">
2   <div class="progress-bar" style="width:70%"></div>
3 </div>


مشاهدهٔ نتیجه


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

بطو پیش فرض، ارتفاع نوار پیشرفت برابر ۱۶ پیکسل است. می‌توان از خصوصت height در CSS برای تغییر آن استفاده کرد. دقت داشته باشید که ارتفاع نوار پیشرفت و ارتفاع ظرف آن با هم برابر باشند:

مثال

1 <div class="progress" style="height:20px">
2   <div class="progress-bar" style="width:40%;height:20px"></div>
3 </div>


مشاهدهٔ نتیجه


برچسب‌های نوار پیشرفت

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

مثال

1 <div class="progress">
2   <div class="progress-bar" style="width:70%">70%</div>
3 </div>


مشاهدهٔ نتیجه


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

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

مثال

 1 <!-- Blue -->
 2 <div class="progress">
 3   <div class="progress-bar" style="width:10%"></div>
 4 </div>
 5 
 6 <!-- Green -->
 7 <div class="progress">
 8   <div class="progress-bar bg-success" style="width:20%"></div>
 9 </div>
10 
11 <!-- Turquoise -->
12 <div class="progress">
13   <div class="progress-bar bg-info" style="width:30%"></div>
14 </div>
15 
16 <!-- Orange -->
17 <div class="progress">
18    <div class="progress-bar bg-warning" style="width:40%"></div>
19 </div>
20 
21 <!-- Red -->
22 <div class="progress">
23   <div class="progress-bar bg-danger" style="width:50%"></div>
24 </div>
25 
26 <!-- White -->
27 <div class="progress border">
28   <div class="progress-bar bg-white" style="width:60%"></div>
29 </div>
30 
31 <!-- Grey -->
32 <div class="progress">
33   <div class="progress-bar bg-secondary" style="width:70%"></div>
34 </div>
35 
36 <!-- Light Grey -->
37 <div class="progress border">
38   <div class="progress-bar bg-light" style="width:80%"></div>
39 </div>
40 
41 <!-- Dark Grey -->
42 <div class="progress">
43   <div class="progress-bar bg-dark" style="width:90%"></div>
44 </div>


مشاهدهٔ نتیجه


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

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

مثال

1 <div class="progress">
2   <div class="progress-bar progress-bar-striped" style="width:40%"></div>
3 </div>


مشاهدهٔ نتیجه


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

برای متحرک ساختن نوار پیشرفت از کلاس .progress-bar-animated استفاده می‌شود:

مثال

1 <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>


مشاهدهٔ نتیجه


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

همچنین نوارهای پیشرفت را می‌توانند روی هم قرار گیرند (به انگلیسی: Stacked):

مثال

 1 <div class="progress">
 2   <div class="progress-bar bg-success" style="width:40%">
 3     Free Space
 4   </div>
 5   <div class="progress-bar bg-warning" style="width:10%">
 6     Warning
 7   </div>
 8   <div class="progress-bar bg-danger" style="width:20%">
 9     Danger
10   </div>
11 </div>


مشاهدهٔ نتیجه



منابع آموزشی