آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

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

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

مثال:

60% Complete

خروجی مثال بالا مانند زیر می باشد .

Bootstrap

ایجاد نوار پیشروی خط دار

برای ایجاد نوار پیشروی خط دار گروه .progress-striped را به گروه پایه ی .progress اضافه کنید.

مثال:

    
60% Complete

خروجی مثال بالا مانند تصویر زیر خواهد بود .

Bootstrap
توجه:

نوار پیشروی خط دار از یک گرادیانت برای ایجاد این افکت استفاده می کند. نوار پیشروی خط دار درIE7- 8پشتیبانی نمی شود. به طور مشابه شما می توانید یک نوار پیشروی متحرک ایجاد کنید. کافیست گروه .activeرا به .progress- stripped اضافه کنید. گروه .active خط ها را از راست به چپ متحرک می کند.

مثال:

60% Complete
توجه:

به خاطر پشتیبانی نشدن ویژگی های انیمیشن CSS3 ، نوار پیشروی در هیچ کدام از ورژن های IE تا IE9 پشتیبانی نمی شود. ایجاد نوار پیشروی هم پوشانی شده همچنین می توانید چند نوار پیشروی را در یک نوار قرار داده تا روی یکدیگر قرار بگیرند.

مثال:

خروجی مثال بالا تصویر زیر خواهد بود .

Bootstrap

نوارهای پیشروی با گروه های تاکید

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

مثال:

  
20% Complete
40% Complete
60% Complete
80% Complete

خروجی مثال بالا مانند تصویر زیر خواهد بود .

Bootstrap

نوارهای پیشروی خط دار با گروه های تاکید مانند رنگ های ثابت، شما هم می توانید نوارهای پیشروی خط دار متنوعی ایجاد کنید.

مثال:

    
20% Complete
40% Complete
60% Complete
80% Complete

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap
  • 1356
  •    1848
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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