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

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت دوازدهم bootstrap : نحوه ی تعریف نوار پیشرفت در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

444

Calendar-amico (2)

تاریخ انتشار:

23 , آذر , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ویدیوی این قسمت

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

موفق باشید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

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

    ارسال یک پیام

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

    X