در یازدهمین جلسه از دوره بوت استرپ آخرین بخش Components را تقدیمتان میکنم. در این جلسه بطور خلاصه با نوار پیشرفت آشنا میشوید. ویدیو این قسمت را میتوانید از باکس زیر دانلود کنید : (دوستانی برای دریافت فایل بصورت حجم پایین تر میتوانند این قسمت را از کانال ما در آپارات دریافت کنند)
| لینک دانلود | 31 مگابایت | 8 دقیقه |
در ابتدای ویدیو با Alert ها آشنا خواهید شد که نمونه سورس آنرا را میبتوانید در باکس زیر مشاهده کنید :
|
1 2 3 4 |
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> |
در ادامه با آبجکت ProgressBars کار میکنیم ، نمونه ساده آنرا در زیر میبینید :
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div> |
برای تغییر رنگ کافیست هر کدام از کلاس های progress-bar-success ، progress-bar-info ، progress-bar-warning یا progress-bar-danger را در کنار کلاس progress-bar بکار ببرید :
با اضافه کردن کلاس progress-bar-striped در کنار کلاس progress-bar میتوانید به نوار پیشرفت خود هاشور اضافه کنید و افزودن کلاس active در کنار کلاس progress-bar-striped میتواند هاشور های نوار پیشرفت را متحرک کند :
|
1 2 3 4 5 |
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> |
سایر آبجکت های بخش Components را میتوانید با تست اجرا و استفاده کنید . از جلسه آینده بخش JavaScript را آغاز خواهیم کرد.
ما در اینستاگرام ...
سلام.
خدا شاهده هر روز به سایتتون سر میزدم تا ببینم آموزش ها آپدیت شدن یا نه..
مرررسی از اینکه قسمت جدید رو گذاشتین و ممنون بابت آموزش ها که با بهترین کیفیت داره اجرا میشن.
بازم ممنون.
لطفا اگه شد قسمت بعدی آموزش رو هم سریعتر بگذارید .
مررررسی از لطفتون.
سلام ، خواهش میکنم ، چشم…
داداش من تو خبر نامت عضو شدم اما مطالب جدید نمیاد
واقعا چرا نمیتواند بیاید؟؟
یه سوالم دارم این جمع و تفریق رو برای کامنت گذاشی
به ما هم یاد بده
واقعا ممنون شما جوان ایرانی هستم
در ابتدا ایمیل تاید را برای خبرنامه باید قبول کنید
این جمع و تفریق افزونه کپچا وردپرس هست ، سرچ کنید…
سلام. جدا از فیلم های آموزشی تون استفاده کردم. خیلی ممنون
ادامه بدید ک واقعا داره به دردمون می خوره!!!!!!!
آقا لینک خراب شد 😀
بدو درستش کن کار ما لنگ مونده 🙂
تصحیح شد ، تا کارتون لنگ نشه که کامنت نمی ذارید !
دستت درد نکنه، خدا خیرت بده 😀
میخواستم کامنت تشکر بذارم، دیدم لینک خرابه، یادم رفت تشکر کنم، آقا متچکرم 😉 دمت گرم.
خواهش میکنم ، پایدار باشید
سلام روز بخیر
فکر کنم یک مشکلی در قسمت دانلودها وجود داره
نمی توانم دانلود اجام بدم با کد 404 مواجه می شوم
با تشکر
سلام ، بله سرور دانلود با مشکل مواجه شده که بزودی برطرف میشه
سلام
اقا واقعا شما حرفه ای هستید .ممنون از اموزشاتون
موفق و سلامت باشید
درود
مرسی لطف دارین علی جان
سلام
این پراگرس را چطوری میشه راست به چپ کرد؟
احتمالا باید از float در css استفاده کنید
با سلام. خیلی ممنون آقای شفیعیان. اولین پوئن مثبت اینه که خوب و جمع و جور تدریس میکنید و دومین پوئن اینکه ویدئوهاتون رایگان هستند.
خیلی متشکرم.
سلام خدمت سایت عالی تون.
واقعا دستتون درد نکنه واسه این اموزش های عالی.
امیدوارم ادامه بدین.
سلام
متشکر
پیروز باشید
دستتون درد نکنه.
واقعا عالی توضیح میدین.
حتما اگه تونستید تعداد کلاس طراحی قالب (پروژه محور)حرفه ای رو زیاد کنید.
خسته نباشید
سلام.
دستتون درد نکنه.
آموزش هاتون خیلی خوبن؛ عالین
فقط اگه بیشتر به صورت پروژه محور باشه دیگه فوق العاده میشه
سلام ،حسین آقای گل
از اینکه وقت صرف کردید و اموزش ها رو گذاشتید ممنونم
درود جـناب شفیعیان گـرامی…!
وظیفه دونستم خدمتتون یه خسته نباشید
عرض کنم بابت نشر علوم کامپیوتر !بدون چشم داشت!
زکات علمتون رو به اهلش پرداخت کردید…الـتماس دعـا یـا عــلی !
مشهد
با سلام و خسته نباشید
بسیار بسیار ممنون از اینکه همچین دوره هایی رو رایگان قرار میدید و سپاسگذارم.
تنها گلایه ی من از فرمت ویدیوهاست ، یکجا mp4 و جاهایی mkv و avi و حتی web هم گذاشته بودید.
اگه میشه mp4 بزارید.
با تشکر از شما و همیشه شاد و سلامت باشید.