آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتمReviewed by صابر بوستانی on Apr 12Rating: 5.0آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتمآموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید.
آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هشتم

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

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

 

 

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

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

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

01

برای ایجاد یک نوار پیشرفت پیشفرض ، کلاس .progress را به عنصر <div>  اضافه می کنیم :

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

 

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

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

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

 

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

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

03

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

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

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

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

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

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

 

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

در زیر یک نوار پیشرفت انیمیشنی را مشاهده میکنید : (راه راه ها حالت انیمیشنی و مترحک دارند )

05

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

 

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

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

06

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

 

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

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

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

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