آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar)

بازدید
7251

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

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

آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar) از سری آموزش های تک قسمتی است.

نوار وضعیت (progress bar)

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

برای ساخت نوار وضعیت ما از کلاس های بوت استرپ که برای اینکار ایجاد شده اند و چند قطعه کد css استفاده میکنیم.برای ساخت نوار وضعیت باید ۲ div تعریف کنیم اولی میشود کل نوار ما و دومی میشود میزان پر شده از این نوار . در div اول ما از کلاس progress استفاده میکنم و div دوم را داخل div اول تعریف میکنیم و به آن کلاس progress-bar را میدهیم و برای نمایش میزان پرشدن نوار از استایل width با مقدار ۰ تا ۱۰۰% استفاده میکنیم. در این حالت ما یک progress bar ساده ساخته ایم که در حالت پیشفرض رنگ آن آبی است برای واضح شدن موضوع از کد زیر کمک بگیرید:

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

ارتفاع نوار وضعیت

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

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

همچنین شما میتوانید به نوار خود لیبل نیز اضافه کنید کافیست بین div باز و بسته دوم متن مد نظر خود را بنویسید.

کلاس های رنگی نوار وضعیت

نوار وضعیت نیز مانند جداول و دکمه ها و … از کلاس های رنگی پشتیبانی میکند اگر خاطرتان باشد در جلسه color گفتیم که اگر بخواهیم باکس یا کادری را رنگ کنیم کافیست از کلاس bg به اضافه نام آن کلاس رنگی استفاده کنیم به عنوان مثال bg-success . برای رنگ کردن نوار وضعیت هم از همین روش استفاده میکنیم کافیست در div داخلی که به آن width میدهیم این کلاس را در کنار کلاس progress-bar قرار دهیم . کلاس های رنگی را برای شما لیست میکنیم و رنگ هرکدام را میگوییم:

bg-success : به کمک این کلاس میتوانید رنگ سبز را به نوار خود بدهید.
bg-info : به کمک این کلاس رنگ آبی را میتوانید بسازید.
bg-warning : این کلاس رنگ نارنجی را به نوار شما میدهد.
bg-danger :رنگی که این کلاس میسازد قرمز است.
bg-white : رنگ سفید توسط این کلاس ساخته میشود.
bg-secondary : با این کلاس میتوانید نوار خود را خاکستری کنید.
bg-light : این کلاس رنگ روشن نزدیک به سفید میسازد.
bg-dark : این کلاس رنگ تیره نزدیک به مشکی میسازد.

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

<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

ساخت نوار وضعیت به شکل striped

واژه striped به شکلات های لوله ای رنگی اطلاق میشود و از آنجایی که با اضافه کردن این کلاس میتوان نوار وضعیت ۲ رنگ شبیه این شکلات ها ساخت این اسم روی آن گذاشته شده است. برای ساخت این حالت شما باید در کنار کلاس رنگی و کلاس progress-bar کلاسی با نام progress-bar-striped اضافه کنید تا نوار های وضعیت شما ۲ رنگ شده و ظاهر زیباتری به خود بگیرند. این کلاس بنا به کلاس رنگی که به آن میدهید ۲ رنگ به نوار میدهد که یکی خود رنگ کلاس است و دیگری رنگی کمرنگ تر از همان رنگ برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>
</div>

progress bar انیمیشنی

شما میتوایند به نوار های وضعیت خود حالتی انیمیشنی اضافه کنید که متحرک شوند و از حالت ساده بودن و یکنواختی در بیایند کلاس انیمیشنی کردن نوار وضعیت جلوه بسیار زیبایی به سایت شما میدهد و ساخت آن بسیار راحت است برای ساخت و ایجاد حالت انیمیشن برای نوار های خود کافیست کلاس progress-bar-animated را به عنوان آخرین کلاس در کنار کلاس های progress-bar و progress-bar-striped و کلاس رنگی قرار دهید . نکته استفاده از انیمیشن این است که حتما باید نوار شما از نوع striped باشد که بتوان حرکت نوار را نشان داد و انیمیشن روی حالت ساه کار نمیکند برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>
</div>

نوار وضعیت چند حالته

شما میتوانید از چند نوار در کنار یکدیگر استفاده کنید به عنوان مثال قسمتی از نوار یک رنگ داشته باشد قسمتی دیگر رنگ دیگر و یا قسمتی striped باشد و قسمتی ساده و یا حتی هر قسمت لیبل مجزای خود را داشته باشد کل یک نوار وضعیت مقدار width به اندازه ۱۰۰% است یعنی اگر شما width را برابر با ۱۰۰% بگذارید کل نوار پر میشود مانند نصب برنامه ها که ۱۰۰% به معنی تکمیل شدن نصب است حال اگر قصد استفاده از چند حالت را دارید باید مجموع آن ها کمتر از ۱۰۰% و یا برابر آن باشد.

برای ساخت این نوار ها div بیرونی که کلاس progress را میگرفت ثابت است و هر چند نواری که بخواهیم میتوانیم در قالب div مجزا با کلاس progress-bar در آن ایجاد کنیم به این صورت شما میتوانید چند نوار را در کنار هم داشته باشید برای واضح شدن موضوع از کد زیر کمک بگیرید:

<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>

برای راحتی شما ما کد کامل این جلسه که در ویدیو آموزش از آن استفاده کرده ایم را قرار میدهیم:

<!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/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Progress Bar</h2>
  <p>To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:</p>
  <div class="progress">
    <div class="progress-bar" style="width:90%"></div>
  </div>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Progress Bar Height</h2>
  <p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:</p> 
  <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:50px">
    <div class="progress-bar" style="width:60%;height:50px"></div>
  </div>
</div>


----------------------------------------------------------------------------
<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
  </div>
</div>

----------------------------------------------------------------------------

<div class="container">
  <h2>Colored Progress Bars</h2>
  <p>Use any of the contextual color classes to change the color of the progress bar:</p> 
  <!-- 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>
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Striped Progress Bars</h2>
  <p>The .progress-bar-striped class adds stripes to the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
  </div>
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>Add the .progress-bar-animated class to animate the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>
</div>
----------------------------------------------------------------------------
<div class="container">
  <h2>Multiple 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 bg-success" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar bg-warning progress-bar-striped" style="width:10%">
      Warning
    </div>
    <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:20%">
      Danger
    </div>
  </div>
</div>
<br>
</body>
</html>

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

آموزش Bootstrap 4 جلسه یازدهم (Badge)

آموزش Bootstrap 4 جلسه سیزدهم (Spinner)

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

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

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

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

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3