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

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


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

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

بوت استرپ انواع بسیاری از نوارهای پیشرفت دارد.

یک نوار پیشرفت پیش فرض در بوت استرپ اینگونه است:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


برای ایجاد یک نوار پیشرفت پیش فرض، کلاس .progress را به عنصر <div> اضافه کنید:

مثال

1 <div class="progress">
2   <div class="progress-bar" role="progressbar" aria-valuenow="70"
3   aria-valuemin="0" aria-valuemax="100" style="width:70%">
4     <span class="sr-only">70% Complete</span>
5   </div>
6 </div>
توجه: نوارهای پیشرفت در Internet Explorer 9 و قدیمی تر پشتیبانی نمی‌شوند (زیرا آنها از انیمیشن‌ها و تراکنش‌های CSS3 برای دستیابی به برخی از نتایج‌شان استفاده می‌کنند).
توجه: برای بهبود دسترسی افرادی که از صفحه خوان‌ها (به انگلیسی: Screen Readers) استفاده می‌کنند، باید ویژگی‌های aria-* را اضافه کنید.

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

نوار پیشرفت با یک برچسب اینگونه است:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


برای نمایش درصد پیشرفت، کلاس .sr-only را از نوار پیشرفت حذف کنید:

مثال

1 <div class="progress">
2   <div class="progress-bar" role="progressbar" aria-valuenow="70"
3   aria-valuemin="0" aria-valuemax="100" style="width:70%">
4     70%
5   </div>
6 </div>

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

کلاس‌های متنی برای فراهم کردن «مفهوم از طریق رنگ‌ها» استفاده می‌شوند.

کلاس‌های متنی که می‌توانند با نوار پیشرفت به کار روند عبارتند از:

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال زیر نحوه ایجاد نوارهای پیشرفت با کلاس‌های متنی متفاوت را نمایش می‌دهد:

مثال

 1 <div class="progress">
 2   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
 3   aria-valuemin="0" aria-valuemax="100" style="width:40%">
 4     40% Complete (success)
 5   </div>
 6 </div>
 7 
 8 <div class="progress">
 9   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
10   aria-valuemin="0" aria-valuemax="100" style="width:50%">
11     50% Complete (info)
12   </div>
13 </div>
14 
15 <div class="progress">
16   <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
17   aria-valuemin="0" aria-valuemax="100" style="width:60%">
18     60% Complete (warning)
19   </div>
20 </div>
21 
22 <div class="progress">
23   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
24   aria-valuemin="0" aria-valuemax="100" style="width:70%">
25     70% Complete (danger)
26   </div>
27 </div>

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

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

مثال

 1 <div class="progress">
 2   <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
 3   aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
 4     40% Complete (success)
 5   </div>
 6 </div>
 7 
 8 <div class="progress">
 9   <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
10   aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
11     50% Complete (info)
12   </div>
13 </div>
14 
15 <div class="progress">
16   <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
17   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
18     60% Complete (warning)
19   </div>
20 </div>
21 
22 <div class="progress">
23   <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
24   aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
25     70% Complete (danger)
26   </div>
27 </div>

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


کلاس .active را بمنظور متحرک ساختن نوار پیشرفت به کار ببرید:

مثال

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

نوارهای پیشرفت پشته ای (به انگلیسی: Stacked)

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نوار پیشرفت پشته ای را با قرار دادن چند بار در یک تگ <div class="progress"> ایجاد کنید:

مثال

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


منابع آموزشی