آموزش بوت استرپ [گام 11] ProgrssBar

دوره بوت استرپ نوامبر 2015 04

در یازدهمین جلسه از دوره بوت استرپ آخرین بخش Components را تقدیمتان میکنم. در این جلسه بطور خلاصه با نوار پیشرفت آشنا میشوید. ویدیو این قسمت را میتوانید از باکس زیر دانلود کنید : (دوستانی برای دریافت فایل بصورت حجم پایین تر میتوانند این قسمت را از کانال ما در آپارات دریافت کنند)

دانلود فیلم آموزشی
لینک دانلود31 مگابایت8 دقیقه

در ابتدای ویدیو با Alert ها آشنا خواهید شد که نمونه سورس آنرا را میبتوانید در باکس زیر مشاهده کنید :

Screenshot from 2015-11-04 11:51:12

 

در ادامه با آبجکت ProgressBars کار میکنیم ، نمونه ساده آنرا در زیر میبینید :

Screenshot from 2015-11-04 11:50:08

 

برای تغییر رنگ کافیست هر کدام از کلاس های progress-bar-success ، progress-bar-info ، progress-bar-warning یا progress-bar-danger را در کنار کلاس progress-bar بکار ببرید :

Screenshot from 2015-11-04 11:50:32

با اضافه کردن کلاس progress-bar-striped در کنار کلاس progress-bar میتوانید به نوار پیشرفت خود هاشور اضافه کنید و افزودن کلاس active در کنار کلاس progress-bar-striped میتواند هاشور های نوار پیشرفت را متحرک کند :

 

سایر آبجکت های بخش Components را میتوانید با تست اجرا و استفاده کنید . از جلسه آینده بخش JavaScript را آغاز خواهیم کرد.

دیدگاه ها
  • علیرضا گفت:

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

  • محمد گفت:

    داداش من تو خبر نامت عضو شدم اما مطالب جدید نمیاد
    واقعا چرا نمیتواند بیاید؟؟
    یه سوالم دارم این جمع و تفریق رو برای کامنت گذاشی
    به ما هم یاد بده
    واقعا ممنون شما جوان ایرانی هستم

    • حسین شفیعیان گفت:

      در ابتدا ایمیل تاید را برای خبرنامه باید قبول کنید
      این جمع و تفریق افزونه کپچا وردپرس هست ، سرچ کنید…

  • مجتبی سالک گفت:

    سلام. جدا از فیلم های آموزشی تون استفاده کردم. خیلی ممنون
    ادامه بدید ک واقعا داره به دردمون می خوره!!!!!!!

  • Muhammad گفت:

    آقا لینک خراب شد 😀
    بدو درستش کن کار ما لنگ مونده 🙂

  • Muhammad گفت:

    دستت درد نکنه، خدا خیرت بده 😀
    میخواستم کامنت تشکر بذارم، دیدم لینک خرابه، یادم رفت تشکر کنم، آقا متچکرم 😉 دمت گرم.

  • aliking56 گفت:

    سلام روز بخیر
    فکر کنم یک مشکلی در قسمت دانلودها وجود داره
    نمی توانم دانلود اجام بدم با کد 404 مواجه می شوم
    با تشکر

  • علی.نت گفت:

    سلام
    اقا واقعا شما حرفه ای هستید .ممنون از اموزشاتون
    موفق و سلامت باشید

  • میرهادی گفت:

    سلام
    این پراگرس را چطوری میشه راست به چپ کرد؟

  • ریحانه گفت:

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


Time limit is exhausted. Please reload CAPTCHA.