نوار پیشرفت یکی از مواردی است که در قسمت های مختلف یک سایت مانند اطلاع رسانی ظرفیت همایش ، اطلاع رسانی میزان پیشرفت یک پروژه و …. استفاده میشود . در این قسمت از اموزش های بوت استرپ 4 به این پرداختیم که نحوه ی تعریف اصولی یک نوار پیشرفت را توضیح دهیم.
نوار توسعه یا پیشرفت پایه
یکی دیگه از مثالهایی که برای نوار توسعه میتوان نشان داد وضعیت پر کردن یک فرم یا اسکرول کردن تا پایین صفحه خواهد بود. به نمونه زیر توجه فرمایید.
برای سایت یک نوار پیشرفت کافی است تا کلاس .progress را به المان اصلی و کلاس .progress-bar را به زیر مجموعه کلاس اصلی و برای نمایش میزان پیشرفت عرض را در استایل به میزان درصد دلخواه خود اضافه کنید ، برای درک بهتر این موضوع قطعه کد زیر را اجرا کنید :
|
1 2 3 |
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div> |
ارتفاع نوار توسعه یا پیشرفت
ارتفاع نوار پیشرفت به طور پیش فرض 16px است. برای تغییر آن از ویژگی CSS height استفاده کنید. توجه داشته باشید که برای همان ظرف پیشرفت و نوار پیشرفت باید همان ارتفاع را تنظیم کنید:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="progress" style="height:10px"> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> |
افزودن برچسب به نوار پیشرفت
برای نمایش برچسب کافی است تا مقدار عدد مورد نظر را در تگ طبق کد زیر قرار دهیم:
|
1 2 3 |
<div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div> |
نوار پیشرفت رنگی
به طور پیش فرض ، نوار پیشرفت آبی (اولیه) است. از هر یک از کلاس های پس زمینه متنی Bootstrap 4 به رنگ آن استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- آبی --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- سبز --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- فیروزه --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- نارنجی --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- قرمز --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- سفید --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- خاکستری --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- خاکستری روشن --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- خاکستری تیره --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> |
نوار پیشرفت با استایل راه راه
برای استفاده از نوار توسعه ی راه راه کافی است تا کلاس .progress-bar-striped را طبق قطعه کد زیر در جای مناسب خود قرار دهید :
|
1 2 3 |
<div class="progress"> <div class="progress-bar progress-bar-striped" style="width:40%"></div> </div> |
نوار توسعه یا پیشرفت متحرک
در مثال قبلی برای راه راه کردن از کلاس .progress-bar-striped استفاده شد ، حال کافی است در کنار یا بجای کلاس .progress-bar-striped ، کلاس .progress-bar-animated را قرار دهیم :
|
1 |
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> |
نوار توسعه ی چندمنظوره
از این نوع نوار توسعه در میزان نمایش فضای خالی معمولا استفاده میشود و کاربردویژه ای برای اطلاعاتی از این قبیل دارد ، برای درک کار کرد این نوع نوار توسعه به قطعه کد زیر توجه فرمایید :
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="progress"> <div class="progress-bar bg-success" style="width:40%"> Free Space </div> <div class="progress-bar bg-warning" style="width:10%"> Warning </div> <div class="progress-bar bg-danger" style="width:20%"> Danger </div> </div> |
ویدیوی این قسمت
باتشکر از همراهی شما عزیزان ، پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید و همچنین در صورت تمایل میتوانید سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید.
موفق باشید.
