پیشرفت
مثال هایی برای استفاده از نوارهای پیشرفت سفارشی با پشتیبانی از نوارهای انباشته، پس زمینه متحرک و برچسب های متنی. کامپوننت های پیشرفت با دو عنصر HTML، مقداری CSS برای تنظیم عرض و چند ویژگی ساخته شدند.
مثال های پایه
از کلاس داخلی .progress-bar استفاده کنید و برای نشان دادن وضعیت پیشرفت، value را در ویژگی data-progress="" تنظیم کنید.
دش‌لایت تعداد معدودی ابزارهای اندازه گیری از کلاس های عرض را ارائه می دهد که می توانید به جای data-progress="" از آن ها استفاده کنید.
<div class="progress">
<div class="progress-bar" data-progress="25"></div>
</div>
<div class="progress">
<div class="progress-bar w-25"></div>
</div>
اندازه های مختلف
از کلاس های اضافی progress-{sm|lg} در .progress استفاده کنید.
<div class="progress progress-lg">
<div class="progress-bar" data-progress="75"></div>
</div>
با برچسب
با قرار دادن متن در .progress-bar، برچسب ها را به نوارهای پیشرفت خود اضافه کنید.
<div class="progress progress-lg">
<div class="progress-bar" data-progress="50">50%</div>
</div>
تنظیم پس زمینه
از کلاس های ابزار پس زمینه برای تغییر ظاهر نوارهای پیشرفت منحصر به فرد استفاده کنید.
<div class="progress">
<div class="progress-bar bg-success" data-progress="25"></div>
</div>
نوار های چندتایی
در صورت نیاز، چندین نوار پیشرفت را در یک کامپوننت پیشرفت قرار دهید.
<div class="progress">
<div class="progress-bar" data-progress="15"></div>
<div class="progress-bar bg-success" data-progress="30"></div>
<div class="progress-bar bg-warning" data-progress="20"></div>
</div>
نوار راه راه
.progress-bar-striped را به هر .progress-bar اضافه کنید تا یک نوار از طریق گرادیانت CSS روی رنگ پس زمینه نوار پیشرفت اعمال شود.
<div class="progress">
<div class="progress-bar progress-bar-striped" data-progress="10"></div>
</div>
راه راه های متحرک
گرادیانت راه راه نیز می تواند متحرک شود. .progress-bar-animated را به .progress-bar اضافه کنید تا نوارها از راست به چپ از طریق انیمیشن های CSS3 متحرک شوند.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" data-progress="75"></div>
</div>
