توضیحات

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

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

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

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

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

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


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

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

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

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

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

  • با سلام من بوت استرپ رو به پروژه خودم اضافه کردم ولی یک سری از ویژگی ها مثل مثلا 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 را در مرورگر باز کنید کد ها را میتونید مشاهده کنید.

  • با سلام و خسته نباشید،من درحال گذروندن این دوره هستم و میخواستم بدونم که این دوره چند درصد از frame work بوتسترپ رو شامل میشه!به عنوان مثال اگه ۸۰٪،اون ۲۰٪ چه چیزهایی هستند ک باید یاد بگیریم

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

  • سلام خسته نباشید
    ببخشید این جدولhelpآنلاین درvs code برای من درست کار نمیکند باید چه کار کنم تا درست کار کند مثلاوقتی text رامیزنی باید text با کل رنگ ها برایت بیاید تا هر رنگی را که دوس داری انتخاب کنی ولی این اتفاق نمی افتد
    ممنون میشم از راهنماییتون

    • سلام وقت بخیر
      vscode بر پایه ای extension ها هست و نیاز به نصب extension برای bootstrap دارید.که میتونید سرچ کنید توی بخش extension در vscode و همچنین اینترنت.
      مثلا من Bootstrap v4 Snippets را نصب کردم که باید -b قرار بدی و بگی چی نیاز داری و برات ایجاد میکنه.شما سرچ کنید و extension که راحت هستید و دوس دارید انتخاب و نصب کنید.

    • خیلی ممنون از راهنمایی تون
      جناب ببخشید خب الان من دقیقا چه چیزی رو باید در extension ها سرچ کنم که این جدول برام درست بشه

    • شما سرچ کنید bootstrap و براتون extension های مرتبط براتون میاد که روش کلیک کنید در سمت راست توضیحات را نوشته و شما میتونید مطالعه کنید و هر کدوم که دوست داشتین نصب کنید مثلا من Bootstrap v4 Snippets را نصب کردم