حوادث چون روزها سپری می شوند.
خوش آمدید - امروز : یکشنبه ۳۰ مهر ۱۳۹۶

آموزش کار با فریمورک رایگان بوت استرپ / قسمت هشتم

آموزش کار با فریمورک رایگان بوت استرپ / قسمت هشتم

http://ivahid.com/wp-content/uploads/2014/11/cover8.png

در این قسمت از آموزش بوت استرپ به بررسی دو مبحث دیگر از بوت استرپ خواهیم پرداخت:
۱) Bootstrap Badges and Labels
۲) Bootstrap Progress Bars

bootstrap Badges

Badge ها نوعی شاخص عددی در بوت استرپ هستند که تعداد دیدگاه، پست یا هر چیزی که مربوط به یک لینک باشد را نمایش می دهد.

bootstrap-badges

عددهایی که در تصویر رو به رو می بینید همان Badge ها می باشند.

برای ساخت Badges ها کافیست از کلاس badge در داخل یک sapn استفاده کنید.

مثال:

۱
۲
۳
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

badge ها همچنین می توانند در داخل المان های دیگر مانند button استفاده شوند.
مثال:

۱
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

bootstrap Labels

Label ها برای اضافه کردن توضیحات به یک بخش خاص استفاده می شود.
bootstrap-label
برای ساخت label ها کافیست در داخل یک span از کلاس label استفاده کنید. همچنین کلاس های دیگری از label ها وجود دارد که می توانید برای سفارشی کردن label ها از آنها استفاده کنید.

۱
۲
۳
۴
۵
۶
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

نمونه کدهای بالا label های زیر را تولید می کند:
bootstrap-labels

Bootstrap Progress Bars

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

۱
۲
۳
۴
۵
۶
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Progress Bar With Label

نوار پیشرفت به همراه label مانند تصویر زیر:
bootstrap-progress-bar-with-label

۱
۲
۳
۴
۵
۶
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    ۷۰%
  </div>
</div>

نوار پیشرفت رنگی در بوت استرپ

برای ایجاد این نوع از نوارهای پیشرفت می توانید از کلاس های زیر استفاده کنید:
bootstrap-progress-bar-color

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
<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>

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

برای استفاده از نوار پیشرفت راه راه در بوت استرپ می توانید از کلاس progress-bar-striped استفاده کنید.
bootstrap-striped-progress-bar

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    ۷۰% Complete (danger)
  </div>
</div>

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

برای استفاده از این نوار پیشرفت از کلاس active بهره بگیرید.

۴۰%
۱
۲
۳
۴
۵
۶
<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>

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

developzoom-stacked-progress-bars
نمونه کد ایجاد نوار ابزار چندتایی در زیر آمده است:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
<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>

آموزش کار با فریمورک رایگان بوت استرپ / قسمت هشتم