آموزش جامع بوت استرپ 4 Bootstrap از صفر تا صد

سلااااااااااااااام به همه دانشجوهای عزیز وی لرن، بازم با یک دوره فوق العاده جذااااااااب و کاربردی اومدیم پیشِتون. پس کمربندها رو محکم ببندین و از پشت کامپیوترتون تکون نخورین!!!
می خوایم فریم ورک بسیااااااااار مفید بوت استرپ رو خدمتتون معرفی کنیم.در این دوره بوت استرپ 4 آموزش داده میشه. bootstrap4 مزایای زیادی نسب به نسخه بوت استرپ3 داره.
یکی از مزایای بوت استرپ 4 (Bootstrap 4) نسبت به نسخه قبلیش، استفاده از تکنولوزی Flexbox هست(برای تماشای دوره رایگان آموزش Flexbox اینجا کلیک کنید.).
یکی دیگه از نکات مهم در بوت استرپ 4 استفاده از Sass به عنوان پیش پردازنده هست که این امر باعث عملکرد بهتر (bootstrap 4) نسبت به نسخه قبل میشه (برای تماشای دوره آموزش sass اینجا کلیک کنید.).
در انتهای دوره آموزش بوت استرپ 4 تم زیبا و کاملاً قابل استفاده در بازارِ کار هم براتون میزنیم تا آموزش دوره بوت استرپ کامل بشه.
حتما از خودتون میپرسین اگر از بوت استرپ استفاده کنیم چه اتفاقی میوفته یا اصلاً چه فایده ای داره؟؟؟!!!
سرعت کد زنی بالا میره، ساختن یه چارچوب کلی واسه سایت خیییییلی راحت تر میشه و موارد دیگه که طی دوره متوجه میشین.
اگر میخواین توانایی پیاده سازی یک طرح حرفه ای رو داشته باشین، تو این دوره با ما همراه باشین.

در نسخه جدید بوت استرپ کلاس های جدیدی برای استایل دهی به عکس ها اضافه شدن.با استفاده از این کلاس ها میتونیم چهار استایل مختلف به تصاویر بدیم.کلاس های استفاده شده img-fluid, img-thumbnail, rounded, rounded-circle هستن.همچنین کلاس های دیگه ای که در بوت استرپ 4 اضافه شدن و کار رو راحت کردن، mx-auto و d-block هستن که برای قراردادن المان در وسط صفحه استفاده میشن.
یکی دیگه از روش ها برای استایل دهی به عکس ها در bootstrap 4 استفاده از تگ figure و کلاس های figure-img و img-fluid هست.
روش دیگه هم استفاده از تگ picture هست. با استفاده از این تگ میتونیم در هر نقطه شکست عکس متفاوتی رو نشون بدیم.
برای توضیحات بیشتر حتما ویدیو رو تماشا کنین.

در نسخه قبلی بوت استرپ برای ریسپانسیو کردن از کلاس table-responsive استفاده می کردیم. در نسخه بوت استرپ 4 (Bootstrap4) هم میتونیم از این کلاس استفاده کنیم ولی چهار تا کلاس دیگه اضافه شدن که بهتر هست از اونا برای ریسپانسیو کردن جدول استفاده کنیم.مثلا یکی از اون کلا سها table-rasponsive-xl هست. معنی این کلاس اینه که اگر در صفحه نمایش با عرض کمتر از 1200 پیکسل، جدول به طور کامل قابل نمایش نبود، اسکرول افقی در جدول ایجاد شود.برای بقیه ابعاد هم کلاس های مشابه وجود داره.
دو تا کلاس table-dark و table-light هم در بوت استرپ 4 اضافه شدن که برای تیره و روشن کردن رنگ پس زمینه به کار میرن. به همین ترتیب کلاس های thead-dark و thead-light هم برای رنگ پس زمینه تگ thead وجود دارن.

گاهی اوقات پیش میاد که میخوایم یه اطلاعیه داخل سایتمون بزنیم. مثلاً اگر سایت فروشگاهی داشته باشیم، ممکنه بخوایم تخفیف برای یک مناسبت خاص بدیم. خب برای این کار باید یه alert داخل سایتمون بگذاریم.

خوشببختانه alert در بوت استرپ هم هست، که تو این درس به طور کامل براتون توضیح بدیم. کلاسی با نام alert وجود داره که میتونین اونو به المان مورد نظرتون بدین تا بتونین یه اطلاعیه ایجاد کنین. همچنین کلاس‌هایی هم برای رنگ دادن به المان وجود داره. در Bootstrap 4 چهار تا کلاس دیگه علاوه بر کلاس های قبل اضافه شدن که توضیحاتش داخل ویدیو داده شده.

یکی از چیزایی که استفاده زیادی داره دکمه ها در سایت هستن. دکمه در بوت استرپ هم هست. یه چند تایی استایل زیبا برای دکمه وجود داره که داخل فیلم آموزشی بوت استرپ بهتون میگیم. کلاس اصلِ کاری که برای دکمه ایجاد شده، btn هست. شما می‌تونین این کلاس رو به المان های مختلفی مثل تگ a ,div ,input و چیزایی از این قبیل اعمال کنین.در بوت استرپ 4 (Bootstrap 4) تفاوت عده ای ایجاد نشده، ولی چند تا کلاس رنگی جدید و استایل های دیگه ای اضافه شد که دست طراحان سایت رو باز تر کرده.
شما میتونین طریقه‌ی ایجاد دکمه در بوت استرپ رو تو فیلم آموزشی بوت استرپ ببینین.

امکان جدید و کاربردی که در بوت استرپ 4 اضافه شده مبحث کارت هست. با استفاده از کارت ها (cards) میشه پست ها رو به راحتی در صفحه ایجاد کرد. مثلا اگر بخواین یه سایت فروشگاهی یا یه سایت خبری ایجاد کنین، احتیاج به بخشی دارین که پست ها رو نمایش بدین. با استفاده از امکان جدید کارت ها در Bootstrap 4 میتونین به راحتی این کار رو انجام بدین.

ساختار collapse در (bootstrap 4) مثل نسخه قبلی هست. یعنی مثل قبل یک div با کلاس collapse میسازیم و با قرار دادن یک دکمه، collapse رو باز و بسته میکنیم.

تفاوت عمده ای که در بوت استرپ 4 ایجاد شده، استفاده از هر المانی برای ساخت منو هست. در صورتی که در نسخه قبلی فقط با تگ ul میشد منو ساخت. الان فقط کافیه کلاس های مربوط به منوی کشویی مثل dropdown رو به المان مورد نظر اختصاص بدیم.

حتماً تاحالا خودتون فرم ساختین و دیدین که یکم آدمو به دردسر میندازه. ولی ما تو این درس میخوایم بهتون بگیم که با بوت استرپ میشه به راحتی یه فرم خوب و مناسب ساخت.

ایجاد فرم در بوت استرپ نیازمند کلاسی به نام form-group هست، که به المان والد داده میشه و بقیه المان‌ها مثل ورودی ها داخل اون قرار میگیرن. البته کلاس‌های دیگه ای هم هستن که به المان ها میدیم، مثل کلاس form-control ،form-check-input و …

اولین قدم برای ساخت فرم ، ایجاد تگ form هست. بعد از اون یک div با کلاس form-group می‌سازیم و المانی مثل input با کلاس form-control رو داخلش قرار میدیم. و به همین ترتیب می‌تونیم فرم مورد نظرمون رو بسازیم. اگر هم از کلاس های bootstrap خوشتون نیومد می‌تونین اونا رو به میل خوددتون تغییر بدین.
در بوت استرپ 4 هم بسیاری از کلاس های قبلی مورد استفاده قرار میگیره. برای این که بتونین مثل آب خوردن فرم های مختلف بسازین و با کلاس های جدید در bootstrap 4 آشنا بشین، فیلم آموزش ایجاد فرم در بوت استرپ رو ببینین.

تو درسِ قبل، ایجاد فرم با بوت استرپ رو آموزش دادیم. حالا میخوایم بحث رو بیشتر باز کنیم و چیزایی بیشتری در مورد ایجاد فرم بگیم. تو این در درس در مورد checkbox ,radio ,range,switch  و تگ select  در بوت استرپ4 صحبت می‌کنیم.

در این بخش فرم های ورودی گروهی در بوت استرپ 4 رو براتون توضیح میدیم.

اگر بخوایم وقتی که روی یک عکس یا یک متن یا یک دکمه کلیک می‌کنیم یه چیزی رو به صورت light box به ما نشون بده، باید از modal در بوت استرپ استفاده کنیم. برای این که بتونین modal رو ایجاد کنین باید یکم هم javascript  بلد باشین. ولی با وجود بوت استرپ احتیاجی به کد نویسی جاوا اسکریپت ندارین.
ما هم سعی کردیم تو این درس به طور کامل کار با modal رو آموزش بدیم.

تو این جلسه نحوه ساخت تب در بوت استرپ رو آموزش میدیم. با استفاده از کلاس هایی که در بوت استرپ 4 هست میشه استایل های دلخواهمون رو به تب ها بدیم و به راحتی تب رو ایجاد کنیم.برای توضیحات بیشتر حتما ویدیو رو تماشا کنین.

نحوه طراحی نوار پیشرفت (progress bar)،صفحه بندی(pagination) و breadcrumb در بوت استرپ مثل قبل هست.تفاوت عمده ای که در بوت استرپ 4 ایجاد شده،کلاس های بیشتر برای اختصاص به المان هاست. همچنین لازم به ذکر هست که اینجا هم دیگه محدود به ul نیستیم.

در این درس خواهید دید که به راحتی هر چه تمام تر میشه پاپ اور طراحی کرد.همچنین یه خاصیت خیلی جالبی هم در پاپ آور (Popover) وجود داره، میشه تگ html تعریف کرد و استایل های مد نظر رو براش تعریف کرد.

این درس هم در مورد آموزش ساخت تولتیپ(tooltip) در بوت استرپ 4 هست.نحوه ایجاد تولتیپ (tooltip) در بوت استرپ4 مثل ایجاد پاپ اور (Popover) هست.

کامپوننت اسپینر (bootstrap spinner) قابلیتی هست که فقط در بوت استرپ 4 وجود داره.با استفاده از اسپینر میشه لودینگ های زیبایی رو به راحتی ایجاد کرد، بدون این که نیاز به کد نویسی جاوا اسکریپ یا css خاصی باشه.