آیا تا به حال به این فکر کردید که چگونه می‌توانید به یک فرانت اند کار تبدیل شوید؟ بله درست است! برای تبدیل شدن به یک فرانت اند کار باید یک مسیری را گام به گام بردارید. اولین گام، یادگیری زبان HTML است. آموزش HTML پیش از این در هم رویش منتشر شد. برای گام دوم باید به سراغ یادگیری زبان CSS بروید. که به عنوان گام دوم در مسیر یادگیری فرانت اند، آموزش CSS نیز در هم رویش منتشر شد. حال به گام سوم (گام آخر) رسیده ایم. آخرین گام برای تبدیل شدن به یک فرانت اند کار، یادگیری بوت استرپ است. مدت زمان آموزش bootstrap، یک ساعت و 50 دقیقه است. در این آموزش ما سعی کردیم خیلی سریع و پروژه محور شما را با اصول طراحی با بوت استرپ آشنا کنیم. لازم به ذکر است که در این آموزش با بوت استرپ 4 شروع، و در پایان پروژه به بوت استرپ 5 مهاجرت می‌کنیم. بنابراین این آموزش، آموزش بوت استرپ 4 و بوت استرپ 5 است.
آموزه‌های اصلی
- نصب vs code
- لینک کردن و وصل کردن فایل های بوت استرپ به پروژه
- شخصی سازی کردن منو با استفاده از css
- استفاده از کلاس‌های گرید، عکسی، فونتی، رنگی، فاصله گذار
- ایجاد نوار پیشرفت
- تفاوت بوت استرپ ۴ و ۵
- مهاجرت از بوت استرپ ۴ به بوت استرپ ۵
درس‌های رایگان این آموزش
تفاوت بوت استرپ 4 و 5 چیست؟ — در 7 دقیقه
بوت استرپ چیست؟ — ویژگی های بوت استرپ (BootStrap)
بوت استرپ چیست ؟
مجموعه ای از ابزارهای رایگان و متن باز است. بوت استرپ به ما در طراحی یک سایت زیبا و واکنش گرا کمک می‌کند. آقای مارک اتو و جیکوب ترونتون در سال‌های ۲۰۱۰-۲۰۱۱ در قلب توییتر مشغول به ساخت و توسعه این فریم ورک بودند (برای استفاده اختصاصی خود توییتر بود).
در اگوست سال ۲۰۱۱ توییتر بوت استرپ را در سایت گیت هاب به عنوان یک فریم ورک و کتابخانه متن باز و رایگان برای طراحی وبسایت منتشر کرد. در فوریه سال ۲۰۱۲ بوت استرپ تبدیل به محبوب‌ترین کتابخانه در سایت گیت‌هاب می‌شود.
آخرین نسخه بوت استرپ ۵ است. بوت استرپ ۵، در می سال ۲۰۲۱ منتشر شد.
چرا باید از بوت استرپ استفاده کنیم ؟
بوت استرپ با کلاس‌های آماده‌ای که دارد می‌تواند در خیلی از کارها کمک کند تا چرخ را از نو نخواهیم بسازیم. مثلا برای گریدبندی سایت، بوت استرپ کلاس‌های آماده دارد. با استفاده درست از کلاس‌های آماده، خیلی راحت می‌توانیم سایت را گریدبندی کنیم.
برای بسیاری از کارها بوت استرپ کلاس‌های آماده دارد. مانند منوی‌های آبشاری، فرم‌ها، دکمه و خیلی موارد دیگر نظیر اسلایدر تصاویر، Tooltipهای جذاب، آکاردئون و … .
این آموزش در یک نگاه
ما در این آموزش با داستان و تاریخچه بوت استرپ شروع کردیم.
در درس دوم به ابزارهای مورد نیاز مثل محیط توسعه vs code، اکستنشن‌های لازم و دریافت بوت استرپ و اضافه کردن آن به پروژه می‌پرداریم.
از درس سوم شروع به ساخت وبسایت کردیم. مانند دیگر سایت‌ها برای شروع طراحی، ما نیز از منوی بالای سایت (navigation-bar) شروع کردیم. و در نهایت navigation-bar را بخش به بخش با هم دیگر ساختیم. با مفهوم spacing در بوت استرپ آشنا شدیم و آن را آموختیم.
سپس در درس چهارم به قسمت خانه پرداختیم. در این قسمت با مفهوم گرید‌سیستم در بوت استرپ آشنا شدیم. یاد گرفتیم که چطور در بوت استرپ المان‌ها را در ستون قرار دهیم.
در درس پنجم قسمتی ایجاد کردیم تا اطلاعاتی از خودمان را در آن قرار دهیم. نام این قسمت را “درباره من” گذاشتیم.
در ادامه در درس ششم، به میزان توانایی‌هایمان در یکسری مهارت‌های خاص پرداختیم. پس نیاز به نوار پیشرفت (progress-bar) داشتیم تا میزان توانایی ما را به صورت گرافیکی به نمایش در بیاورد.
در درس هفتم شروع به ساخت فرم ارتباط با من کردیم. “فرم ارتباط با من” را با استفاده از کلاس‌های آماده بوت استرپ همچون form-control و … ساختیم.
در درس هشتم به تفاوت و جزئیات دو نسخه بوت استرپ 4 و بوت استرپ 5 پرداختیم. درس هشتم کاملا نظری است.
سپس در درس نهم به مهاجرت وبسایت از نسخه بوت استرپ 4 به نسخه بوت استرپ 5 پرداختیم. در این راستا، مقداری سایت به هم ریخت اما با هم سرچ و مشکلات را حل کردیم.
در نهایت در درس دهم که درس آخر بود جمع بندی کردیم. آموختیم که چه دستاورد‌هایی داریم و مسیر به چه صورت است.
پیشنیاز های این دوره
- آموزش CSS سریع و پروژه محور __ طراحی سایت با CSS در 60 دقیقه
- آموزش HTML سریع و پروژه محور __ طراحی سایت با HTML در 60 دقیقه
این آموزش بی‌نظیر است زیرا:
- خیلی سریع و کاملا پروژه محور
- در این آموزش با هر دو نسخه بوت استرپ 4 و بوت استرپ 5 کار می‌کنیم.
کلیدواژگان
آموزش بوت استرپ 4 – آموزش bootstrap – آموزش bootstrap 4 – آموزش bootstrap 5 – آموزش بوت استرپ 4 پروژه محور – آموزش نصب بوت استرپ 4 – آموزش bootstrap 5 – آموزش بوت استرپ پروژه محور – آموزش کامل bootstrap – آموزش پروژه محور بوت استرپ 5
امیرحسین عزیزی –
با سلام. استاد ارجمند این آموزش در ادامه آموزش های قبلی شماست یا متفاوت است؟ بوت استرپ 5 به طور کامل پوشش داده شده؟
ابوالفضل حسن زاده –
سلام به شما اقای عزیزی . در مورد این دوره باید خدمت شما عرض کنم بله این دوره در ادامه اموزش های قبلی هست و سوژه این دوره هم همان وب سایت شخصی هست. ما توی این دوره نه تنها بوت استرپ ۵ رو به طور کامل نگفتیم بلکه بوت استرپ ۴ رو هم تمام کامپوننت ها نگفتیم چون نیازی نیست. چرا که فردا روزی بوت استرپ ۶ اومد خب شما باید دوباره یه دوره دیگه درباره بوت استرپ ۶ ببینید ٬ این شما رو محدود میکنه. ما به شما توی این دوره یاد دادیم که چطور به کمک جست و جو کردن نیاز ها تون رو پیدا کنید و مشکلات خودتون رو حل کنید. ( پیشنهاد میکنم فیلم معرفی دوره رو با دقت یه بار دیگه ببینید )
مصطفی آصفی –
سلام و دست مریزاد. این که یه ورود اصولی به بوت استرپ 4 و 5 همزمان ایجاد کردین کار بزرگیه. یه بسته آموزشی بی نظیر.
ابوالفضل حسن زاده –
سلام به شما استاد بزرگوار ٬ استاد آصفی . از لطف ٬ محبت و انرژی مثبت شما سپاس گذارم.