نوار پیشرفت
مستندات و نمونه هایی برای استفاده از نوارهای پیشرفت سفارشی بوت استرپ با پشتیبانی از نوارهای انباشته، پس زمینه متحرک و برچسب های متنی. برای لیست کامل دستورالعمل ها و گزینه های دیگر مستندات رسمی بوت استرپ را بخوانید.
مثال پایه
کامپوننت های نوار پیشرفت با دو عنصر HTML، مقداری CSS برای تنظیم عرض و چند ویژگی ساخته شده اند.
برچسب ها
با قرار دادن متن در .progress-bar، برچسب‌ها را به نوارهای پیشرفت
خود اضافه کنید.
ارتفاع
ما فقط یک مقدار height روی .progress تنظیم می کنیم،
بنابراین اگر آن مقدار را تغییر دهید، .progress-bar داخلی به طور خودکار اندازه
آن را تغییر می دهد.
پس زمینه
از کلاس های ابزار پس زمینه برای تغییر ظاهر نوارهای پیشرفت استفاده کنید.
چند تکه
در صورت نیاز، چندین نوار پیشرفت را در یک کامپوننت نوار پیشرفت قرار دهید.
راه راه
کد .progress-bar-striped را به هر .progress-bar اضافه
کنید تا یک نوار از طریق گرادیان CSS روی رنگ پس‌زمینه نوار پیشرفت اعمال شود.
راه راه انیمیشنی
گرادیان راه راه را می توان متحرک نیز کرد. .progress-bar-animated را
به .progress-bar اضافه کنید تا از طریق انیمیشن‌های CSS3 نوارها را از راست به چپ
متحرک کنید.