توضیحات

Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.

بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت.

Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.

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

دقت کنید، که این دوره بر اساس Bootstrap ورژن 4 میباشد،در حال حاضر آخرین ورژن 5 می باشد.

دوره های پیشنهادی، بعد از گذراندن این دوره :

پیش نیاز های این دوره فوق العاده کاربردی:


HTML CSS طراحی وب طراحی واکنشگرا Bootstrap Bootstrap v4 آموزش Bootstrap بوت استرپ طراحی سایت

مدرس دوره علی شیخ
مدت دوره 06:29:27
تعداد ویدیو 35

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام استاد خسته نباشید
    استاد چرا در دوره ی bootstrap در دنیای واقعی در چند پروژه ی آخر تایمر رو درست کردین اما در این دوره اون رو آموزش ندادین؟؟
    میشه بگین از چی استفاده کردین؟؟
    سپاس.

    • سلام وقت بخیر.
      Countdown یک کد جاوااسکریپتی هست که توی اینترنت میتوتید سرچ و استفاده کنید و مربوط به بوت استرپ نیست.ما از countdown استفاده کردیم و با بوت استرپ بهش استایل دادیم

  • سلام استاد خسته نباشید
    استاد من فایل bootstrap رو توی سایت خودش دانلود کردم و دوتا فایل به نام js و css هستن هردوتا رو هم در قسمت head آدرس دهی کردم بعضی از کلاس های bootstrap کار میکنن مثلا text-transform , text-primary , text-muted اما فونت ها و align ها کار نمیکنن مشکل چیه استاد ؟؟؟؟
    در پوشه ی bootstrap که از خود سایت دانلود کردم در پوشه ی js فایل bootstrap.bundle.min.js و در پوشه ی css فایل bootstrap.min.css رو آدرس دهی کردم آیا درست هستن ؟؟؟
    با تشکر

    • سلام وقت بخیر.
      ورژن bootstrap را چک کنید.به احتمال زیاد از ورژن 5 دارید استفاده میکنید.

    • آره استاد ورژن 5 بود چون آپدیت شده این خصوصیات هم دارن بیشتر میشن؟؟
      استاد من دو تا سوال داشتم اولی اینکه من bootstrap ورژن 4 رو دانلود کردم حالا باید چجوری آدرس بدم اسم کدوم فایلو داخل ادیتورم بنویسیم اینکه اصلا داخل پوشه هاش پوشه ای به نام css نداره ؟؟؟
      و دومی اینکه استاد من طبق چارت آموزشی تا bootstrap پیش رفتم و دیگه دوره های بعدی رو ندیدم برای کسب درآمد میتونم php رو ببینم وکسب درآمد کنم بعد بیام سراغ دوره های بعدی یا نه باید حتما javascript رو بلد باشم .
      خیلی ممنون

    • سلام شما باید فایل css و js رو به پروژه اضافه کنید.
      بله میتونید دوره ای php و لاراول رو مشاهده کنید

  • با سلام من بوت استرپ رو به پروژه خودم اضافه کردم ولی یک سری از ویژگی ها مثل مثلا drop down buttons کار نمیکنه در صورتی دقیقا کد ها از داخل document بوت استرپ برداشتم ...مشکل چیه؟

    • سلام وقت بخیر.
      بررسی کنید که بدرستی فایل های css و js را اضافه کرده اید و همچنین ورژن بوت استرپ هم چک کنید، که ورژن ۴ یا ۵ هست

    • سلام وقت بخیر.
      ممنون از شما❤
      اگه این دوره را مشاهده کرده باشید استفاده از بوت استرپ ۵، با دیدن تغییراتش در داکیومنت، راحت هست.
      ولی چشم انشاا... در اینده براش دوره اماده میکنیم

  • سلام وقتتون بخیر.
    من از سایت بوت استرپ سعی کردم با کپی کردن کدها و لینک های خودش یه navbar ایجاد کنم ولی درست کار نمیکرد. مثلا toggeler , dropdown ولی ورژن 4.0 رو امتحان کردم درست شد. این طبیعیه ؟ چون من مطمعنم که همه ی مراحل رد درست انجام دادم.

    • سلام وقت بخیر.
      ورژن ۵ بوت استرپ به تازگی منتشر شده، که یکسری تغییرات داشته.و طبیعتا شما هر ورژنی از بوت استرپ را به پروژه اضافه کنید، از کدها و استایل های همون ورژن میتونی استفاده کنید.
      شما نمیتونید فایل های css و js ورژن ۵ بوت استرپ را اضافه کنید و بعد از کد های ورژن ۴ استفاده کنید(در بعضی از مواقع ممکن هست توی بخشی تغییری نباشه و مشکلی پیش نیاد).

  • سلام و عرض ادب

    استاد ببخشید ما باید تمامی class های بوت استرپ حفظ کنم؟

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

    با تشکر

    • سلام وقت بخیر.
      توی برنامه نویسی شما باید درک کنید نه حفظ.
      شما باید درک کنید که این کلاس ها چکاری انجام میدن و هر وقت نیاز داشته باشی میتونی کپی کنی،چون فردا روز بوت استرپ ورژن ۵ میاد و ممکن هست اسم کلاس ها عوض بشه،پس اگه فقط حفظ کرده باشی مجبوری دوباره حفظ کنی.

  • خوبیه این دوره اینه که شما از قبل کدهارو نوشتید و بخش به بخش توضیح میدید و نیازی نیست هی خط به خط کد بنویسید و حوصله بیننده سر بره . در واقع اونی که باید خط به خط بنویسه ماییم تا یاد بگیریم. روشتون از نظر من عالیه♥

    • ممنون از شما.که پیشنهاد و نظر خوبتون را برای ما ارسال کردید❤

  • فقط میتونم بگم خدا خیرتون بده .
    سبک تدریس عالی♥
    طرز بیان و گفتار عالی♥
    محتوا عالی♥
    پروژه آخر که باعث شد مطالبی که یاد گرفتیم تو ذهنمون مرتب بشه عالی♥
    خدا از بلاها محفوظ نگهت داره .
    تشکر میکنم ازتون

    • سلام وقت بخیر.
      ممنون.خداروشکر که این دوره براتون مفید بوده❤

  • سلام خسته نباشید در قسمت منو
    من میخوام دوتا از liهارو به سمت چپ ببریم که ورود و ثبتنام رو بزاریم ولی نمیدونم چجورباید انو به سمت چپ اگه میشه راهنمایی کنید؟
    بازم ار دوره خوبتون متشکرم

    • سلام وقت بخیر.
      برای این منطور شما نباید توی li قرار بدید. میتونید از تگ a و یا button استفاده کنید و بیرون از ul قرار بدید و بفرستید سمت چپ navbar.دقیقا توی پروژه انتهای این دوره ما سمت چپ navbar، باکس سرچ قرار دادیم که شما بجای باکس سرچ میتونید دکمه های ورود و ثبت نام قرار بدید.همچنین توی دوره ای bootstrap در دنیای واقعی ما انواع navbar ها رو داریم و پیاده سازی کردیم.

  • سلام.مرسی از آموزش منظم و عالی که ارائه دادین.
    میخواستم بپرسم زمان تایپ نام کلاس ها آیا vscode کمک میکنه یا باید نام کلاس ها رو کامل بلد باشیم و خودمون تایپ کنیم؟

    • سلام وقت بخیر.
      ممنون از شما❤
      برای vscode شما میتونید از اکستنشن های که برای بوت استرپ هست استفاده کنید.

  • سلام
    میشه یه پروژه رو با بوت استرپ شروع کنی و نصفشو با بوت استرپ پیش بری و بقیشو جدا از قوانین کلس دهی بوت استرپ پیش ببری و خودت با استایل دهی style.css بسازی؟ (ترکیبی)

    یا اصلا میشه خود ایتم های بوت استرپ مثل card هارو با نوشتن استایل براشون تو style.css تغییر بدی؟
    سرعت یا بهینگی سایت که پایین نمیاد؟

    تنها علتی که میخوام از بوت استرپ استفاده کنم اسون بودن اضافه کردن ایتم هایی مثل اسلایدر و ... هستش

    • سلام وقت بخیر.
      ما از style.css بعد از بوت استرپ استفاده میکردیم که کد های css خودمون را بنویسیم.
      شما هر کجا که کلاس های بوت استرپ قرار ندید،خب استایل بدت استرپ نمیگیره و شما میتونید کلاس های خودتون را اضافه کنید.
      هر کلاسی از بوت استرپ هم را میتونید تغییر استایل بدید.
      بوت استرپ یکسری کلاس برای شما آماده کرده همین، خب ممکن شما نیاز به چیزی داشته باشید که بوت استرپ نداشته باشه پس خودتون کد css میزنید یا ممکن هست بوت استرپ داشته باشه ولی نیاز به تغییراتی داشته باشه پس بازم میتونید تغییر بدید

    • سلام وقت بخیر
      خواهش میکنم.خداروشکر راضی هستین❤
      برای دانلود فایل های تمرینی نباید مشکلی داشته باشید.چه خطایی بهتون نمایش میده؟؟
      در نظر بگیرید، به دلیل Hash بودن لینک ها با خوده مرورگر دانلود کنید و تست کنید.اگه فیلترشکن وصل هستید قطع کنید و دوباره روی دکمه دانلود فایل های تمرینی دوره کلیک کنید

  • سلام خسته نباشید.
    من در دکمه کشویی یا dropdown و همینطور منوی همبرگری که از
    collaps استفاده شده مشکل دارم و اصلا زیرمنو رو نشون نمیده. با توجه به اینکه این مشکل رو ازتون پرسیدن و به راه حل اشاره کردید من این کار رو هم انجام دادم ولی درست نشد. چون من هم از فایل ها ی دانلودی بوت استرپ استفاده کردم. راه حل دیگه ای وجود داره؟؟؟؟

    • سلام وقت بخیر.
      شما باید تست کنید اول فایل به درستی اضافه شده و کد های جاوااسکریپت کار میکنه یا خیر؟!
      اگه بازم نشد لطف کنید کدها تون را در تلگرام ارسال کنید.

      https://t.me/WebProgSupport

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

    • سلام وقت بخیر.
      خواهش میکنم❤
      لطف کنید کدها تون را در تلگرام ارسال کنید.

      https://t.me/WebProgSupport

    • سلام وقت بخیر.
      بله میتونید شروع به یادگیری کنید.ما از بوت استرپ در فرانت اند استفاده میکنیم و شما هر جور دوست داشته باشید میتونید استفاده کنید.میتونید از فریمورک های دیگه یا حتی کد های css خودتون استفاده کنید مهم نیست چون در دوره php ما در مورد بک اند صحبت میکنیم و کاملا بحثش با فرانت اند جدا هست. فقط برای زیبای پروژه ما از بوت استرپ استفاده کرده ایم

  • سلام وقت بخیر
    ممنون از آموزش خوبتون
    فقط من یه مشکلی که دارم .وقتی فایلهای بوت استرپ و جی کوئری رو از cdn ایمپورت میکنم پروژه به درستی کار میکنه. اما وقتی فایلها رو تو خود پروژه ایمپورت میکنم یه سری کلاسها رو نمیخونه. مثلا collapse رو از فایلها نمبخونه وفقط با cdn کار میکنه. مسیر دهی فایلها هم درسته .ممنون میشم راهنمایی کنید .

    • سلام وقت بخیر
      به احتمال خیلی زیاد دلیلش اینکه توی فایل های که ایمپورت کرده اید collapse و ... را نداره.شما اگه میخواهید فایل ایمپورت کنید میتونید همون فایل cdn رو باز کنید و کد ها رو کپی کنید و توی فایل به هر اسمی که میخواهید پیست کنید و استفاده کنید.
      لینک cdn را در مرورگر باز کنید کد ها را میتونید مشاهده کنید.