نمادها

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

آموزش Bootstrap جلسه پانزدهم(Progress Bars)

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

آموزش Bootstrap جلسه پانزدهم(Progress Bars) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش یاد می دهد که چطور در بوت استرپ نوار وضعیت بسازید

معمولا در سایت هایی که میخواهند میزان پیشرفت پروژه های خود را نمایش دهند از Progress bar استفاده میکنند

ما نیز در این آموزش نوار وضعیت های زیبایی تنها با کلاس های بوت استرپ طراحی می کنیم

حتی به کمک بوت استرپ می توانیم به این نوار ها انیمیشن هم بدهیم

 

کلاس progress bar

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

  • برای نمایش میزان پیشرفت پروژه های کاری
  • برای نمایش میزان تسلط شرکتی در انجام امور و مسئولیت ها
  • برای موجودی و تداد موارد خاص مثل محصول یا خدماتی

اگر بوت استرپ را نادیده بگیریم ساخت این نوار به صورت دستی کار راحتی نخواهد بود.
بوت استرپ تنها با استفاده از چند کلاس آماده این امکان را میدهد که از progress bar استفاده کنید.

میپردازیم به مثال هایی از استفاده progress bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      ۷۰%
    </div>
  </div>
</div>

</body>
</html>

همانطور که در کد های بالا دیدید با استففاده از چند کلاس ساده توانستیم یک نوار وضعیت بسازیم

اما اگر نیاز به رنگ های مختلف برای نوار وضعیت خود دارید مثال زیر مورد مناسبی است:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Colored Progress Bars</h2>
  <p>The contextual classes colors the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      ۴۰% Complete (success)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      ۵۰% Complete (info)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      ۶۰% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      ۷۰% Complete (danger)
    </div>
  </div>
</div>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      ۴۰%
    </div>
  </div>
</div>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Stacked Progress Bars</h2>
  <p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
      Warning
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
      Danger
    </div>
  </div>
</div>

</body>
</html>

 

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

آموزش Bootstrap جلسه چهاردهم(Badges/Labels)

آموزش Bootstrap جلسه شانزدهم(pagenation)

 

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

و یا آن را در آپارات ببینید:

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

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


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

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

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

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

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

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