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

  • مدرس : علی مظلوم
  • سطح آموزش : پیشرفته
  • مدت : ۲۶۸ دقیقه
  • تعداد دانشجو : ۲۹۳
شما در گام دهم از ۲۴ گام مسیر طراحی رابط کاربری هستید

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

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

بوت استرپ چیست؟ 

فریم ورکی هست که بر اساس html، css و  jquery ساخته شده تا کار ما رو برای طراحی وب سایت راحت تر کنه.

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

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

در این دوره آموزشی به طور کامل مباحث فریم ورک بوت استرپ (‌Bootstrap)  را برای شما دانشجویان عزیز وی لرن شرح خواهیم داد. با توجه به برزورسانی نسخه بوت استرپ و کوچ وب سایت ها به بوت استرپ 4، ما نیز در این دوره به آموزش بوت استرپ 4 (bootstrap 4) می پردازیم. در ابتدا مقایسه ای بین بوت استرپ 4 و نسخه قبلی انجام می دهیم. سپس مباحث مر بوط به فریم ورک بوت استرپ 4 را آموزش می دهیم.ویژگی بارزی که در نسخه 4 بوت استرپ وجود دارد، استفاده از تکنولوژی فلکس باکس هست.

بعد از اتمام توضیحات در مورد المان های مختلف و تسلط کافی به بوت استرپ4 (Bootstrap 4)، به طراحی یک قالب زیبا که از تم فارست انتخاب کردیم می پردازیم.قالب انتخاب شده بر اساس بوت استرپ 4 طراحی شده و تلاش کردیم مباحثی که در این دوره آموزش داده شده را در این قالب پیاده سازی کنیم.

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

 

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

  • درس ۱ :‌ معرفی دوره آموزش فریم ورک بوت استرپ 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 میتونین به راحتی این کار رو انجام بدین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۶ دقیقه

    این جلسه میخوایم آموزش ساخت اسلایدر در بوت استرپ رو براتون بگیم. ایجاد اسلایدر در بوت استرپ با کتابخونه carousel slider انجام میشه.

    اگر بخواین یه اسلایدر رو بدون فریم ورک استفاده کنین، باید از کتابخونه های موجود برای ایجاد اسلایدر استفاده کنین. ولی با استفاده از فریم ورک بوت استرپ و بدون اضافه کردن هیچ کتابخونه ای م‌یتونین با استفاده از چند تا کلاس مثل carousel , slide ,carousel-inner ,item و کلاس های دیگه، یک اسلایدشو در بوت استرپ بسازین. داخل اسلایدر میشه مطالب مختلفی مثل تصویر، فیلم، متن قرار داد. به این نکته توجه داشته باشین که اسلایدر carousel در بوت استرپ 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 رو براتون توضیح میدیم.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۲ دقیقه

    این مبحث پیچیدگی خاصی نداره و با چند تا کلاس به سادگی میتونین list group ایجاد کنین.برای توضیحات بیشتر ویدیو آموزش ایجاد گروه های لیست در بوت استرپ رو تماشا کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۲ دقیقه

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۴ دقیقه

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۴ دقیقه

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۵ دقیقه

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۳ دقیقه

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۳ دقیقه

    برای ساختن نوتیفیکیشن یا toast در بوت استرپ 4 (Bootstrap) فقط کافیه یه div با کلاس toast ایجاد کنین. و بعد از اون موارد لازم رو داخل اون div قرار بدین.حتما ویدیو آموزش ساخت توست نوتیفیکیشن در بوت استرپ رو مشاهده کنین.

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۳ دقیقه

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۹ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۳ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۹ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۹ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۳ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۵ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۶ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۲ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۴ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۲ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۱ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • ۰ دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    تمام ویدیو های مربوط به دوره بوت استرپ در این قسمت بارگذاری شده است.

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

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما