آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتم

0 دیدگاه

سلام خدمت دوستان عزیز، توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده که به صورت متنی در ادامه مطلب ارائه می شود. بطور کلی در این جاسه با ایجاد نوار پیشرفت به شکل های مختلف آشنا خواهید شد.

آموزش ایجاد نوار پیشرفت بوت استرپ :

نوار پیشرفت پایه در بوت استرپ : میتوان از نوار پیشرفت در نشان دادن درصد پیشبرد کار استفاده کرد، بوت استرپ نوار ابزار های مختلفی را ارائه میکند.

نوار پیشرفت به صورت پیش فرض به شکل زیر است :

برای ایجاد یک نوار پیشرفت پیشفرض ، کلاس .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>

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

نکته : اینترنت اکسپلورر 9 و ورژن های قبلی آن نوار های پیشرفت را پشتیبانی نمیکنند . ( چون که انها از transitions ها و animations های CSS3 برای دستیابی به افکت هایشان استفاده میکنند ).

نوار پیشرفت به همراه برچسب در بوت استرپ : (progress bar with label) :

یک نوار پیشرفت به همراه برچسب مانند شکل زیر است :

کلاس .sr-only را از قسمت نوار پیشرفت پاک کنید تا میزان درصد قابل نمایش را ارائه کنید.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>

<div class="progress-bar" role="progressbar" aria-valuenow="70"

aria-valuemin="0" aria-valuemax="100" style="width:70%">

70%

</div>

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

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

مثال زیر نحوه ساخت نوار پیشرفت را با استفاده از کلاس های متنی مختلف نشان میدهد :

 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    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%">
    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%">
    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%">
    70% Complete (danger)
  </div>
</div>

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"

aria-valuemin="0" aria-valuemax="100" style="width:40%">

40% Complete (success)

</div>

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"

aria-valuemin="0" aria-valuemax="100" style="width:50%">

50% Complete (info)

</div>

<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100" style="width:60%">

60% Complete (warning)

</div>

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"

aria-valuemin="0" aria-valuemax="100" style="width:70%">

70% Complete (danger)

</div>

جهت مشاهده دمو کلیک نمایید.

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

میتوان نوار های پیشرفت را به صورت راه راه در اورد :

برای اضافه کردن این خطوط راه راه از کلاس .progress-bar-striped استفاده کنید :

 <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%">
    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%">
    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%">
    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%">
    70% Complete (danger)
  </div>
</div>

<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"

aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">

40% Complete (success)

</div>

<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"

aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">

50% Complete (info)

</div>

<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">

60% Complete (warning)

</div>

<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"

aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">

70% Complete (danger)

</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%">
    40%
  </div>
</div>

<div class="progress-bar progress-bar-striped active" role="progressbar"

aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">

40%

</div>

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

نوار های پیشرفت میتوانند به شکل زیر دسته بندی شوند :

با اضافه کردن چند نوارBar به همان کلاس <div class=”progress”> میتوانید نوار پیشرفت دسته بندی شده بسازید .

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

Free Space

</div>

Warning

</div>

Danger

</div>

جهت مشاهده دمو کلیک نمایید.

برای تازه شدن دیر نیست.

موفق و پیروز باشید

ارادتمند شما…

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش متوسطه بوت استرپ

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۲۴ فروردین ۱۳۹۵

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتم

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

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

لغو پاسخ

مطالب مرتبط