در این بخش با نوارهای پیشرفت در بوت استرپ (Progress Bars) آشنا می شوید. نوار پیشرفت یکی از اجزای رابط کاربری (UI Component) است که میزان پیشرفت یا تکمیل یک فرآیند را به صورت بصری نشان می دهد. بسیاری از توسعه دهندگان این نوارها را برای نمایش وضعیت پیشرفت عملیاتی مانند بارگذاری فایل ها، ارسال فرم ها یا لود شدن داده ها در پروژه های خود به کار می برند.
بوت استرپ مجموعه ای از کلاس های آماده ارائه می دهد که با آن ها می توانید نوارهای پیشرفت را با سبک ها، اندازه ها و انیمیشن های متنوع طراحی کنید. همچنین امکان شخصی سازی ظاهر و رفتار نوارهای پیشرفت به کمک این کلاس ها فراهم می شود. به عنوان مثال، می توانید رنگ های مختلف به نوار اختصاص دهید، برچسب به آن اضافه کنید، از نوارهای راه راه (striped) یا دارای انیمیشن استفاده کنید و حتی چند نوار پیشرفت را به صورت پشته ای (stacked) در کنار هم نمایش دهید.
- برای ساخت یک نوار پیشرفت، ابتدا عنصر والد (wrapper) را با استفاده از کلاس
.progressایجاد کنید تا مقدار حداکثر نوار مشخص شود. - سپس عنصر داخلی
.progress-barرا اضافه کنید و میزان پیشرفت تا لحظه فعلی را در آن نمایش دهید. - برای تنظیم عرض نوار پیشرفت، کافی است از یک استایل درون خطی (inline style)، کلاس کمکی (utility class) یا CSS سفارشی استفاده کنید.
- اگر قصد دارید نوار پیشرفت را از نظر دسترسی (Accessibility) بهینه کنید، باید ویژگی های role و aria مناسب را به آن اضافه کنید.
- برای نمایش چند نوار پیشرفت به صورت پشته ای، از کلاس
.progress-stackedاستفاده کنید.
نمونه ساده از نوار پیشرفت در بوت استرپ
در ادامه یک مثال ساده از نوار پیشرفت در بوت استرپ آمده است:
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar</h4><br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </body> </html> |
تنظیم اندازه نوار پیشرفت
تنظیم عرض Progress Bars در بوت استرپ
فریم ورک بوت استرپ مجموعه کاملی از کلاس های کمکی (Utility Classes) برای تعیین عرض (Width) در اختیار توسعه دهندگان قرار می دهد. با استفاده از این کلاس ها به راحتی می توانید عرض نوار پیشرفت را به دلخواه تنظیم کنید.
در ادامه یک مثال از نحوه استفاده از این کلاس ها را مشاهده می کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar</h4><br><br> <div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> </body> </html> |
تنظیم ارتفاع Progress Bars در بوت استرپ
به طور پیش فرض، ارتفاع نوار پیشرفت در بوت استرپ ۱rem است. با این حال، شما می توانید این مقدار را به کمک ویژگی height در CSS تغییر دهید. برای اینکه نوار پیشرفت به درستی نمایش داده شود، باید ارتفاع یکسانی برای هر دو عنصر والد (.progress) و نوار داخلی (.progress-bar) تعیین کنید.
نکته مهم این است که باید مقدار ارتفاع را فقط روی کلاس .progress تنظیم کنید. زمانی که ارتفاع عنصر والد را تغییر می دهید، نوار داخلی .progress-bar به طور خودکار با همان ارتفاع تنظیم می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar Height</h4><br> <div class="progress" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 25%;height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <br> <div class="progress" style="height: 30px;"> <div class="progress-bar" role="progressbar" style="width: 25%;height: 30px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </body> </html> |
افزودن برچسب به نوار پیشرفت
شما می توانید به راحتی برچسب (Label) به نوار پیشرفت اضافه کنید. کافی است متن دلخواه خود را داخل عنصر .progress-bar قرار دهید تا این متن به عنوان برچسب روی نوار پیشرفت نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar Label</h4><br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div> </body> </html> |
نمایش یا مخفی کردن برچسب های بیرون زده از نوار پیشرفت
- برای جلوگیری از بیرون زدگی محتوای داخل نوار پیشرفت، بوت استرپ به صورت پیش فرض روی عنصر
.progress-barویژگیoverflow: hiddenرا اعمال می کند. - در صورتی که می خواهید محتوا قابل مشاهده باشد (به خصوص زمانی که عرض نوار پیشرفت از اندازه برچسب کمتر است)، می توانید با استفاده از کلاس های کمکی overflow مقدار
overflow: visibleرا اعمال کنید. با این کار، محتوای برچسب به صورت کامل نمایش داده می شود و خوانا خواهد بود. - برای اطمینان از خوانایی متن، بهتر است رنگ متن (text color) را نیز به صورت صریح مشخص کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar Long Label</h4><br> <div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar overflow-visible text-dark" style="width: 20%">Overflow visible on progress bar, but the label is too long, but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long</div> </div> <br> <div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar overflow-hidden text-dark" style="width: 20%">Overflow hidden on progress bar, but the label is too long, but the label is too long,but the label is too long,;/div> </div> </body> </html> |
تغییر پس زمینه نوار پیشرفت در بوت استرپ
برای تغییر ظاهر هر نوار پیشرفت می توانید از کلاس های کمکی مربوط به پس زمینه (background utilities) استفاده کنید.
به طور پیش فرض، رنگ نوار پیشرفت در بوت استرپ آبی (primary) است.
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar Background</h4><br> <!-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- Turquoise --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- Red --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- White --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- Grey --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- Light Grey --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- Dark Grey --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </body> </html> |
استفاده از رنگ در نوارهای پیشرفت صرفاً یک نشانه بصری ایجاد می کند و این نشانه برای کاربرانی که از فناوری های کمکی مانند صفحه خوان (Screen Reader) استفاده می کنند، قابل تشخیص نیست. به همین دلیل باید مفهوم نوار پیشرفت را به گونه ای منتقل کنید که مستقیماً از محتوای موجود نیز قابل درک باشد.
برای افزایش وضوح محتوا می توانید از کلاس
.visually-hiddenاستفاده کنید. این کلاس به شما اجازه می دهد اطلاعات کمکی را به محتوای نوار اضافه کنید، به طوری که این اطلاعات برای صفحه خوان ها قابل خواندن باشد، ولی برای کاربران معمولی در صفحه نمایش داده نشود.
همچنین هنگام استفاده از پس زمینه های رنگی برای نوار پیشرفت، حتماً رنگ متن (Text Color) را به دقت انتخاب کنید تا برچسب ها خوانا باقی بمانند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar - Text Color</h4> <br> </div><div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-success" style="width: 25%">Default text color</div> </div><br> <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-info text-dark" style="width: 50%">Dark text on Info</div> </div><br> <div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-warning text-dark" style="width: 75%">Dark text on warning</div> </div><br> <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-danger" style="width: 100%">Light text on danger</div> </div> </body> </html> |
همچنین می توانید از کلاس های کمکی ترکیبی جدید برای تنظیم رنگ متن (Color) و رنگ پس زمینه (Background) به صورت همزمان استفاده کنید. این کلاس ها امکان مدیریت بهتر هماهنگی رنگ ها در نوار پیشرفت را فراهم می کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar - Text & Background Color</h4> <br> <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar text-bg-success" style="width: 75%">Text and Background Color</div> </div> </body> </html> |
نوار پیشرفت چندتایی (Multiple Bars)
شما می توانید چند نوار پیشرفت را به صورت پشته ای (Stacked) در یک نوار واحد قرار دهید. برای این کار کافی است از کلاس .progress-stacked در بوت استرپ استفاده کنید تا چند نوار پیشرفت در یک ساختار ترکیبی نمایش داده شوند.
در دوره تخصصی بوت استرپ معمولاً از این تکنیک برای نمایش همزمان چند وضعیت یا چند بخش از یک فرآیند استفاده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Progress Bar - Multiple</h4> <br> <div class="progress-stacked"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </body> </html> |
نوار پیشرفت راه راه در بوت استرپ (Striped Progress Bar)
برای افزودن افکت راه راه (Stripes) به نوار پیشرفت، می توانید کلاس .progress-bar-striped را به عنصر .progress-bar اضافه کنید. با این کار نوار پیشرفت با ظاهر راه راه نمایش داده می شود.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Striped Progress Bar</h4><br> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> </body> </html> |
نوار پیشرفت با نوارهای متحرک (Animated Stripes)
شما می توانید به نوار پیشرفت انیمیشن اضافه کنید تا نوارهای راه راه آن به صورت متحرک از راست به چپ حرکت کنند.
برای این منظور کافی است کلاس .progress-bar-animated را به عنصر .progress-bar اضافه کنید. این انیمیشن از طریق CSS3 animations اجرا می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Progress</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Animated Progress Bar</h4><br> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل
- انتشار: ۱۹ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
