قسمت دوازدهم bootstrap : نحوه ی تعریف نوار پیشرفت در بوت استرپ ۴

قسمت دوازدهم bootstrap : نحوه ی تعریف نوار پیشرفت در بوت استرپ ۴

نوار پیشرفت یکی از مواردی است که در قسمت های مختلف یک سایت مانند اطلاع رسانی ظرفیت همایش ، اطلاع رسانی میزان پیشرفت یک پروژه و …. استفاده میشود . در این قسمت از اموزش های بوت استرپ ۴ به این پرداختیم که نحوه ی تعریف اصولی یک نوار پیشرفت را توضیح دهیم.

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

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

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

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

ارتفاع نوار پیشرفت به طور پیش فرض ۱۶px است. برای تغییر آن از ویژگی CSS height استفاده کنید. توجه داشته باشید که برای همان ظرف پیشرفت و نوار پیشرفت باید همان ارتفاع را تنظیم کنید:

افزودن برچسب به نوار پیشرفت

برای نمایش برچسب کافی است تا مقدار عدد مورد نظر را در تگ طبق کد زیر قرار دهیم:

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

به طور پیش فرض ، نوار پیشرفت آبی (اولیه) است. از هر یک از کلاس های پس زمینه متنی Bootstrap 4 به رنگ آن استفاده کنید:

نوار پیشرفت با استایل راه راه

برای استفاده از نوار توسعه ی راه راه کافی است تا کلاس .progress-bar-striped را طبق قطعه کد زیر در جای مناسب خود قرار دهید :

نوار توسعه یا پیشرفت متحرک

در مثال قبلی برای راه راه کردن از کلاس .progress-bar-striped استفاده شد ، حال کافی است در کنار یا بجای کلاس .progress-bar-striped ، کلاس .progress-bar-animated را قرار دهیم :

نوار توسعه ی چندمنظوره

از این نوع نوار توسعه در میزان نمایش فضای خالی معمولا استفاده میشود و کاربردویژه ای برای اطلاعاتی از این قبیل دارد ، برای درک کار کرد این نوع نوار توسعه به قطعه کد زیر توجه فرمایید :

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

موفق باشید.

برچسب ها : اموزش جامع بوت استرپ، نحوه ی ساخت نوار توسعه

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