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

مارکاپ اصلی

میله های پیشرفت افقی استک از نشانه گذاری ساده و بدون پرده استفاده می کنند ، با استفاده از یک ویژگی داده ساده برای تعیین نوار مقدار پیشرفت آن.

در ابتدایی ترین شکل آن نوار به والدین نیاز دارد .progress-horizontal عنصر با کودک .progress-horizontal__bar عنصر. این عنصر به ویژگی های داده که باید یک مقدار عددی را از 1 - 100 اختصاص دهد (توجه: نیازی به اضافه کردن نماد "٪" به ویژگی نیست).

برچسب که در زیر ظاهر می شود توسط a & lt ؛ span & gt ؛ عنصر با کلاس .progress-horizontal__label

<div class="progress-horizontal">
  <div class="progress-horizontal__bar" data-value="80"></div>
  <span class="progress-horizontal__label h5">Progress: 80%</span>
</div>

اصلاح ظاهر

کنترل ظاهر نوار پیشرفت با استفاده از کلاسهای زیر اضافه شده به .progress-horizontal عنصر:

توجه: میله های پیشرفت انیمیشن در به روزرسانی آینده اضافه می شوند.

• .progress-horizontal-lg -یک نوار پیشرفت بزرگتر را ارائه می دهد
• .progress-horizontal-sm -یک smaler را ارائه می دهد