نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar)

آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar) از سری آموزش های تک قسمتی است.

 

نوار وضعیت (progress bar)

اگر نمیدانید نوار وضعیت چیست به راحتی متوانیم برای شما نوار سبز رنگ نصب برنامه ها در ویندوز یا حتی نوار سبز رنگ دانلود منیجر را مثال بزنیم به آنها نوار وضعیت میگویند حالا سوال اینجاست کاربرد این نوار در سایت چیست از این نوار ها برای نمایش میزان پیشرفت کارها ، تعداد پروژه های انجام شده ، تعداد فایل های دانلودی ، تکمیل ظرفیت کلاس های مجازی و موارد این چنینی میتوان استفاده کرد.

برای ساخت نوار وضعیت ما از کلاس های بوت استرپ که برای اینکار ایجاد شده اند و چند قطعه کد css استفاده میکنیم.برای ساخت نوار وضعیت باید ۲ div تعریف کنیم اولی میشود کل نوار ما و دومی میشود میزان پر شده از این نوار . در div اول ما از کلاس progress استفاده میکنم و div دوم را داخل div اول تعریف میکنیم و به آن کلاس progress-bar را میدهیم و برای نمایش میزان پرشدن نوار از استایل width با مقدار ۰ تا ۱۰۰% استفاده میکنیم. در این حالت ما یک progress bar ساده ساخته ایم که در حالت پیشفرض رنگ آن آبی است برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

ارتفاع نوار وضعیت

همانطور که با دادن استایل width توانستیم نوار خود را مقدار دهی کنیم با استایل height میتوانیم به آن ارتفاع دهیم . برای این کار باید از مقادیر پیکسلی استفاده کنید نکته ای که وجود دارد این است که این مقدار ارتفاع را باید به هر دو div بدهید برای واضح شدن موضوع میتوانی از کد زیر کمک بگیرید:

 

همچنین شما میتوانید به نوار خود لیبل نیز اضافه کنید کافیست بین div باز و بسته دوم متن مد نظر خود را بنویسید.

 کلاس های رنگی نوار وضعیت

نوار وضعیت نیز مانند جداول و دکمه ها و … از کلاس های رنگی پشتیبانی میکند اگر خاطرتان باشد در جلسه color گفتیم که اگر بخواهیم باکس یا کادری را رنگ کنیم کافیست از کلاس bg به اضافه نام آن کلاس رنگی استفاده کنیم به عنوان مثال bg-success . برای رنگ کردن نوار وضعیت هم از همین روش استفاده میکنیم کافیست در div داخلی که به آن width میدهیم این کلاس را در کنار کلاس progress-bar قرار دهیم . کلاس های رنگی را برای شما لیست میکنیم و رنگ هرکدام را میگوییم:

  • bg-success : به کمک این کلاس میتوانید رنگ سبز را به نوار خود بدهید.
  • bg-info : به کمک این کلاس رنگ آبی را میتوانید بسازید.
  • bg-warning : این کلاس رنگ نارنجی را به نوار شما میدهد.
  • bg-danger :رنگی که این کلاس میسازد قرمز است.
  • bg-white : رنگ سفید توسط این کلاس ساخته میشود.
  • bg-secondary : با این کلاس میتوانید نوار خود را خاکستری کنید.
  • bg-light : این کلاس رنگ روشن نزدیک به سفید میسازد.
  • bg-dark : این کلاس رنگ تیره نزدیک به مشکی میسازد.

برای واضح شدن موضوع ما از رنگ سبز در کد زیر استفاده کرده ایم:

 

ساخت نوار وضعیت به شکل striped

واژه striped به شکلات های لوله ای رنگی اطلاق میشود و از آنجایی که با اضافه کردن این کلاس میتوان نوار وضعیت ۲ رنگ شبیه این شکلات ها ساخت این اسم روی آن گذاشته شده است. برای ساخت این حالت شما باید در کنار کلاس رنگی و کلاس progress-bar کلاسی با نام progress-bar-striped اضافه کنید تا نوار های وضعیت شما ۲ رنگ شده و ظاهر زیباتری به خود بگیرند. این کلاس بنا به کلاس رنگی که به آن میدهید ۲ رنگ به نوار میدهد که یکی خود رنگ کلاس است و دیگری رنگی کمرنگ تر از همان رنگ برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

progress bar انیمیشنی

شما میتوایند به نوار های وضعیت خود حالتی انیمیشنی اضافه کنید که متحرک شوند و از حالت ساده بودن و یکنواختی در بیایند کلاس انیمیشنی کردن نوار وضعیت جلوه بسیار زیبایی به سایت شما میدهد و ساخت آن بسیار راحت است برای ساخت و ایجاد حالت انیمیشن برای نوار های خود کافیست کلاس progress-bar-animated را به عنوان آخرین کلاس در کنار کلاس های progress-bar و progress-bar-striped و کلاس رنگی قرار دهید . نکته استفاده از انیمیشن این است که حتما باید نوار شما از نوع striped باشد که بتوان حرکت نوار را نشان داد و انیمیشن روی حالت ساه کار نمیکند برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

نوار وضعیت چند حالته

شما میتوانید از چند نوار در کنار یکدیگر استفاده کنید به عنوان مثال قسمتی از نوار یک رنگ داشته باشد قسمتی دیگر رنگ دیگر و یا قسمتی striped باشد و قسمتی ساده و یا حتی هر قسمت لیبل مجزای خود را داشته باشد کل یک نوار وضعیت مقدار width به اندازه ۱۰۰% است یعنی اگر شما width را برابر با ۱۰۰% بگذارید کل نوار پر میشود مانند نصب برنامه ها که ۱۰۰% به معنی تکمیل شدن نصب است حال اگر قصد استفاده از چند حالت را دارید باید مجموع آن ها کمتر از ۱۰۰% و یا برابر آن باشد.

برای ساخت این نوار ها div بیرونی که کلاس progress را میگرفت ثابت است و هر چند نواری که بخواهیم میتوانیم در قالب div مجزا با کلاس progress-bar در آن ایجاد کنیم به این صورت شما میتوانید چند نوار را در کنار هم داشته باشید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

برای راحتی شما ما کد کامل این جلسه که در ویدیو آموزش از آن استفاده کرده ایم را قرار میدهیم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه یازدهم (Badge)

آموزش Bootstrap 4 جلسه سیزدهم (Spinner)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar): نوع فایل:mp4 حجم فایل:30.70 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.