در این بخش نحوه ایجاد نوارهای پیشرفت با استفاده از Bootstrap را خواهید آموخت.
نوارهای پیشرفت جهت نمایش میزان پیشرفت یک عملیات به کاربر استفاده میشوند.
ایجاد نوار پیشرفت با استفاده از Bootstrap :
مثال زیر نحوه ایجاد یک نوار پیشرفت ساده با گرادیان عمودی را نشان میدهد :
خروجی مثال بالا به شکل زیر خواهد بود :
ایجاد نوار پیشرفت دارای برچسب :
جهت نمایش وضعیت پیشرفت به صورت برچسب درصد، کافیست تگ span را با کلاس sr-only. از داخل نوار پیشرفت حذف کنید. همان طور که در مثال زیر نشان داده شده :
خروجی مثال بالا به شکل زیر خواهد بود :
در صورت استفاده از برچسب درصد، باید یک حداقل پهنا ( min-width ) هم به نوار پیشرفت اضافه کنید تا خوانا بودن متن برچسب حتی برای درصدهای پایین تضمین شود.
خروجی مثال بالا به شکل زیر خواهد بود :
ایجاد نوار پیشرفت خط دار :
جهت ایجاد نوار پیشرفت خط دار کافیست کلاس progress-striped. را به کلاس پایه progress. اضافه نمایید.
خروجی مثال بالا به شکل زیر خواهد بود :
هشدار : نوار پیشرفت خط دار از یک گرادیان برای ایجاد خط ها استفاده میکند. این نوار پیشرفت در IE 7-8 پشتیبانی نمی شود. به طور مشابه میتوانید نوار پیشرفت متحرک ایجاد کنید. تنها باید کلاس active. را به کلاس progress-striped. اضافه نمایید. کلاس active. خط ها را از راست به چپ حرکت میدهد.
هشدار : به دلیل عدم پشتیبانی خصوصیت های انیمیشن CSS3 ، نوار پیشرفت متحرک در هیچ کدام از نسخه های IE پشتیبانی نمی شود.
ایجاد نوار پیشرفت متحرک انباشته (stacked) :
همچنین میتوانید چندین نوار را در یک نوار پیشرفت قرار دهید.
خروجی مثال بالا به شکل زیر خواهد بود :
نوارهای پیشرفت همراه با کلاس های تأکیدی :
بوت استرپ همچنین کلاس های تأکیدی کاربردی برای نوارهای پیشرفت ارائه میکند که میتوانند جهت ارائه یک مفهوم خاص با استفاده از رنگ، به کار برده شوند.
خروجی مثال بالا به شکل زیر خواهد بود :
نوارهای پیشرفت خط دار به همراه کلاس های تأکیدی :
مشابه با رنگ های ساده، میتوانید نوارهای پیشرفت خط دار با رنگ های مختلف ایجاد نمایید.
.png "لوگو")
