پیش رفتن

مستندات و مثال‌هایی برای استفاده از نوارهای پیشرفت سفارشی بوت استرپ با پشتیبانی از نوارهای انباشته، پس‌زمینه‌های متحرک و برچسب‌های متنی.

در این صفحه

چگونه کار می کند

کامپوننت های Progress با دو عنصر HTML، مقداری CSS برای تنظیم عرض و چند ویژگی ساخته شده اند. ما از عنصر HTML5<progress> استفاده نمی‌کنیم و اطمینان می‌دهیم که می‌توانید نوارهای پیشرفت را روی هم قرار دهید، آنها را متحرک کنید و برچسب‌های متنی را روی آنها قرار دهید.

.progressبرای نشان دادن حداکثر مقدار نوار پیشرفت از علامت به عنوان بسته بندی استفاده می کنیم .
ما از درونی .progress-barبرای نشان دادن پیشرفت تاکنون استفاده می کنیم.
برای تنظیم عرض .progress-barآنها به یک سبک درون خطی، کلاس ابزار یا CSS سفارشی نیاز دارد.
همچنین .progress-barبه برخی از ویژگی‌ها roleو ariaویژگی‌ها نیاز دارد تا آن را در دسترس قرار دهد، از جمله یک نام قابل دسترسی (با استفاده از aria-label، aria-labelledbyیا مشابه).

همه اینها را کنار هم بگذارید و نمونه های زیر را خواهید داشت.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

بوت استرپ تعدادی ابزار کمکی برای تنظیم عرض فراهم می کند . بسته به نیاز شما، اینها ممکن است به پیکربندی سریع پیشرفت کمک کنند.

html

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

برچسب ها

با قرار دادن متن در نوار پیشرفت، برچسب‌ها را به نوارهای پیشرفت خود اضافه کنید .progress-bar.

25%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

ارتفاع

ما فقط یک heightمقدار را بر روی تنظیم می کنیم .progress، بنابراین اگر آن مقدار را تغییر دهید، اندازه داخلی .progress-barبه طور خودکار مطابق با آن تغییر می کند.

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

پس زمینه ها

از کلاس های ابزار پس زمینه برای تغییر ظاهر نوارهای پیشرفت فردی استفاده کنید.

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hiddenکلاس، گنجانده شده است.

میله های متعدد

در صورت نیاز، چندین نوار پیشرفت را در یک جزء پیشرفت قرار دهید.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

راه راه

برای اعمال یک نوار از طریق گرادیان CSS روی رنگ پس‌زمینه نوار پیشرفت، .progress-bar-stripedبه هرکدام اضافه کنید..progress-bar

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

راه راه های متحرک

گرادیان راه راه نیز می تواند متحرک شود. .progress-bar-animatedبرای .progress-barمتحرک سازی نوارها از راست به چپ از طریق انیمیشن های CSS3 به آن اضافه کنید.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

CSS

متغیرها

اضافه شده در نسخه 5.2.0

به عنوان بخشی از رویکرد متغیرهای CSS در حال تکامل Bootstrap، نوارهای پیشرفت اکنون از متغیرهای CSS محلی .progressبرای سفارشی‌سازی در زمان واقعی استفاده می‌کنند. مقادیر برای متغیرهای CSS از طریق Sass تنظیم می‌شوند، بنابراین سفارشی‌سازی Sass نیز همچنان پشتیبانی می‌شود.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

متغیرهای Sass

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

فریم های کلیدی

برای ایجاد انیمیشن های CSS برای .progress-bar-animated. گنجانده شده در scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}