آموزش بوت استرپ

ساخت نوار پیشرفت progress bar بوت استرپ bootstrap

قبلی بعدی

ساخت نوار پیشرفت ،نحوه ساخت نوار پیشرفت در بوت استرپ bootstrap یا bootstrap progress bars

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

یک نوار پیشرفت Progress Bar می تواند برای نشان دادن پیشرفت کاربر در یک فرایند باشد.

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

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

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

مثال

نکته: نوارهای پیشرفت در اینترنت اکسپلورر ۹ و قبل از آن پشتیبانی نمی شوند (زیرا برای برخی از اثرات آنها از CSS3 استفاده می کنند و انیمیشن ها را متحول می کنند).

توجه: برای کمک به بهبود دسترسی افراد مبتلا به خواننده های صفحه، باید ویژگی های aria را وارد کنید.

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

Progress Bar With Label
یک نوار پیشرفت با یک برچسب به این شکل است:

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

مثال

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

Colored Progress Bars

کلاس های متنی  Contextual classes برای ارائه “معنی دادن از طریق رنگ” استفاده می شود.

کلاس های متنی Contextual classes که می توانند با میله های پیشرفت مورد استفاده قرار گیرند عبارتند از:

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

۴۰٪ کامل (موفقیت)
۵۰٪ کامل (اطلاعات)
۶۰٪ کامل (هشدار)
۷۰٪ کامل (خطر)

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

مثال

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

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

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

مثال

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

Animated Progress Bar
۴۰٪
اضافه کردن کلاس .active برای متحرک کردن نوار پیشرفت:

مثال

Stacked Progress Bars

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

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
بستن