آموزش طراحی سایت-کار با نشان برجسته و نوار پیشرفت در بوت استرپ

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با کار با لیست گروهی List Group در Bootstrap4 آشنا شدیم.

حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با نشان برجسته Badges در Bootstrap 4

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

برای مثال می توانید از یک عنصر با کلاس .badges به همراه یک عنصر دیگر که دارای کلاس های رنگی متنی (مثلا کلاس .badges-secondary) است مثل یک المنت <span> برای ایجاد یک نشان مستطیل رنگی، استفاده کنید.

توجه داشته باشید که چنانچه عنصر badge درون یک عنصر مادر یا parent باشد، اندازه خود را بر حسب بزرگی یا کوچکی آن ، تنظیم می کند.

مثال عملی: در کد مثال عملی زیر، نحوه ایجاد یک عنصر badge را درون تگ های عنوان <h1> تا <h6> نشان داده ایم:

مثال 1

<h1>Example heading New</h1>

<h2>Example heading New</h2>

<h3>Example heading New</h3>

<h4>Example heading New</h4>

<h5>Example heading New</h5>

<h6>Example heading New</h6>

آموزش استفاده از کلاس های متنی رنگی برای badge:

می توانید از کلاس های متنی رنگی پیش فرض بوت استرپ 4 ، که در بخش های قبلی آن ها را آموزش دادیم، برای تعیین رنگ عنصر badge استفاده نمایید.

مثال عملی : در کد مثال عملی زیر، انواع badge های رنگی را به وسیله کلاس های متنی رنگی Bootstrap 4 استفاده کرده ایم:

مثال 2

<span class=&quotbadge badge-primary&quot>Primary</span>

<span class=&quotbadge badge-secondary&quot>Secondary</span>

<span class=&quotbadge badge-success&quot>Success</span>

<span class=&quotbadge badge-danger&quot>Danger</span>

<span class=&quotbadge badge-warning&quot>Warning</span>

<span class=&quotbadge badge-info&quot>Info</span>

<span class=&quotbadge badge-light&quot>Light</span>

<span class=&quotbadge badge-dark&quot>Dark</span>

آموزش طراحی سایت ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4 :

از کلاس .badges-pill می توانید برای گرد کردن گوشه های عنصر badge در Bootstrap 4 استفاده کنید.

مثال: در کد مثال عملی زیر، نحوه استفاده از کلاس .badge-pill و ساخت Pill Badge را نشان داده ایم :

مثال 3

<span class=&quotbadge badge-pill badge-primary&quot>Primary</span>

<span class=&quotbadge badge-pill badge-secondary&quot>Secondary</span>

<span class=&quotbadge badge-pill badge-success&quot>Success</span>

<span class=&quotbadge badge-pill badge-danger&quot>Danger</span>

<span class=&quotbadge badge-pill badge-warning&quot>Warning</span>

<span class=&quotbadge badge-pill badge-info&quot>Info</span>

<span class=&quotbadge badge-pill badge-light&quot>Light</span>

<span class=&quotbadge badge-pill badge-dark&quot>Dark</span>

آموزش استفاده از Badge درون یک عنصر دیگر :

در کد مثال عملی زیر، از یک عنصر Badge در یک دکمه استفاده کرده ایم:

مثال 4

<p>Messages 4</p>

آموزش کار با نوار پیشرفت Progress Bar در Bootstrap 4

از نوار پیشرفت یا Progress Bar می توان برای نشان دادن میزان پیشرفت یک عملیات یا حجم انجام شده یک پروسه توسط کاربر، استفاده کرد.

برای ایجاد یک نوار پیشرفت یا Progress Bar در Bootstrap 4، کلاس .progress را به عنصر مادر یا Container و کلاس .progress-bar را به عنصر یا عناصر فرزند آن، اعمال کنید.

همچنین از خاصیت width نوار پیشرفت، از که 0 تا 100 درصد تعیین می شود، می توانید برای نمایش میزان کار، استفاده کنید.

نکته :

توجه داشته باشید که خاصیت width در نوار پیشرفت Bootstrap 4 را هم می توانید به صورت ثابت یا دستی و هم به صورت خودکار و لحظه ای تنظیم نمایید.

مثال: در کد مثال عملی زیر، یک نوار پیشرفت یا Progress Bar ساده با حجم 70 درصد پیشرفت را در بوت استرپ 4 ، ایجاد کرده ایم:

مثال 1

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar&quot style=&quotwidth:70%&quot></div>

</div>

آموزش تنظیم ارتفاع Progress Bar در Bootstrap 4:

ارتفاع نوار پیشرفت یا Progress Bar به صورت پیش فرض در بوت استرپ 4 ، مقدار 16 پیکسل است. می توانید از خاصیت ارتفاع CSS height برای تغییر آن به میزان دلخواه استفاده کنید. فقط توجه داشته باشید که مقدار خاصیت ارتفاع (height) در عنصر دربرگیرنده یا Container و عنصر یا عناصر فرزند، بایستی به یک اندازه باشد.

مثال عملی: در کد مثال عملی زیر، یک نوار پیشرفت Progress Bar با ارتفاع 20 پیکسل را ایجاد کرده ایم:

مثال 2

<div class=&quotprogress&quot style=&quotheight:20px&quot>

<div class=&quotprogress-bar&quot style=&quotwidth:40%;height:20px&quot> </div>

</div>

آموزش نمایش متن در Progress Bar بوت استرپ 4 :

می توانید با قرار دادن متن درون عنصر فرزند آیتم نوار پیشرفت در Bootstrap 4 میزان پیشرفت کار را به صورت متنی نیز نشان دهید.

دقت نمایید که این متن را می توانید با استفاده از جاوا اسکریپت یا jQuery به صورت داینامیک نیز تغییر دهید.

مثال: در کد مثال عملی زیر، با قرار دادن عدد 70% درون تگ <div> عنصر فرزند نوار پیشرفت، میزان حجم جلورفت کار را به صورت متنی نیز نشان داده ایم:

مثال 3

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar&quot style=&quotwidth:70%&quot>70%</div>

</div>

آموزش ایجاد نوار پیشرفت رنگی در Bootstrap 4:

در Bootstrap 4 به صورت پیش فرض رنگ نوار پیشرفت آبی (کلاس primary) است. می توانید از کلاس های متنی رنگی بوت استرپ 4 ، که در بخش های گذشته آموزش دادیم، برای تعیین رنگ دلخواه Progress Bar استفاده کنید.

مثال: در کد مثال عملی زیر، با استفاده از کلاس های متنی رنگی Bootstrap 4 رنگ پس زمینه (برای مثال .bg-success برای رنگ سبز)، نوار پیمایش ها را تغییر داده ایم:

مثال 4

<!-- Blue -->

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar&quot style=&quotwidth:10%&quot></div>

</div>

<!-- Green -->

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar bg-success&quot style=&quotwidth:20%&quot></div>

</div>

<!-- Turquoise -->

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar bg-info&quot style=&quotwidth:30%&quot></div>

</div>

<!-- Orange -->

<div class=&quotprogress&quot>

   <div class=&quotprogress-bar bg-warning&quot style=&quotwidth:40%&quot></div>

</div>

<!-- Red -->

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar bg-danger&quot style=&quotwidth:50%&quot></div>

</div>

<!-- White -->

<div class=&quotprogress border&quot>

  <div class=&quotprogress-bar bg-white&quot style=&quotwidth:60%&quot></div>

</div>

<!-- Grey -->

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar bg-secondary&quot style=&quotwidth:70%&quot></div>

</div>

<!-- Light Grey -->

<div class=&quotprogress border&quot>

  <div class=&quotprogress-bar bg-light&quot style=&quotwidth:80%&quot></div>

</div>

<!-- Dark Grey -->

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar bg-dark&quot style=&quotwidth:90%&quot></div>

</div>

ایجاد نوار پیشرفت راه راه Striped Progress Bar در بوت استرپ 4 :

از کلاس ویژه .progress-bar-striped می توانید جهت راه راه کردن بخش رنگی نوار پیشرفت در Bootstrap 4 استفاده کنید:

مثال 5

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar progress-bar-striped&quot style=&quotwidth:40%&quot></div>

</div>

نکته :

کلاس .progress-bar-striped بایستی به عنصر یا عناصر فرزند نوار پیشرفت بوت استرپ 4 ، اضافه شوند نه عنصر مادر یا Container.

آموزش ایجاد نوار پیشرفت متحرک Animated Progress Bar:

در صورت اضافه کردن کلاس .progress-bar-animated به عنصر سازنده نوار پیشرفت و استفاده همزمان از کلاس .progress-bar-strped، خط های راه راه قسمت پر شده در نوار پیشرفت، حالت متحرک و پویا پیدا می کنند. برای درک بهتر مثال عملی زیر را مشاهده کنید :

مثال 6

<div class=&quotprogress-bar progress-bar-striped progress-bar-animated&quot style=&quotwidth:40%&quot></div>

آموزش ایجاد نوار پیمایش چندگانه Multiple Progress Bar:

می توانید با قرار دادن چندین المنت با کلاس .progress-bar درون یک المنت مادر با کلاس .progress که هر کدام از عناصر فرزند درصدی بین 0 تا 100 دارند، یک نوار پیمایش چندگانه و با رنگ های مختلف (با استفاده از کلاس های رنگی متنی ویژه Bootstrap 4)، همانند عکس زیر ایجاد نمایید :

مثال 7

<div class=&quotprogress&quot>

  <div class=&quotprogress-bar bg-success&quot style=&quotwidth:40%&quot>

    Free Space

  </div>

  <div class=&quotprogress-bar bg-warning&quot style=&quotwidth:10%&quot>

    Warning

  </div>

  <div class=&quotprogress-bar bg-danger&quot style=&quotwidth:20%&quot>

    Danger

  </div>

</div>