توضیحات

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

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

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

در این دوره قصد دارم شما را از مبتدی تا پیشرفته با بوت استرپ آشنا کنم و با ایجاد یک پروژه اونو به شما بصورت کامل آموزش بدم.

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

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


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

مدرس دوره علی شیخ
مدت دوره 12:08:39
تعداد ویدیو 66

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

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

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

  • سلام استاد وقت بخیر
    من ی مشکلی دارم برای checkbox ها و radio ها که بین نوشته ای که توی label قرار میدم و input ک دارم فاصله ی زیادی میوفته
    حتهی کدهاش رو مستقیم از داکیومنت بوت استرپ هم کپی کردم باز هم فاصله افتاد
    و مجبور میشم برای اینکه فاصله رو حذف کنم به div با کلاس form-check یدونه عرض بدم تا درست شه
    ممنون میشم راهنمایی کنید مشکلش کجاس

    • سلام وقت بخیر‌.
      Inspect بگیرید و ببینید چه استایل های اجرا شده و چرا فاصله داره

  • سلام بابت آموزش ممنون . ببخشید یک سوال داشتم برای ایجاد فرم ارتباط باما میوشد از node.js هم استفاده کرد؟؟ یا بهتره از php استفاده کنم ؟؟

    • سلام وقت بخیر‌.
      فرانت و بک اند جدا هستند، شما در سمت بک اند از هر چیزی که دوست دارید و راحتر هستید میتونید استفاده کنید.

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

  • سلام
    خسته نباشید
    استاد عذر میخوام توی bootstrap چند تا دایو رو چطور هم ارتفاع میکردیم؟
    مثلا چند تا دایو با کلاس card داریم که توی یه row تعریف شده، اما با توجه به تفاوت محتویاتشون، هم ارتفاع نیستن!

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

  • سلام استاد خسته نباشید ببخشید من قبلا دور بوت استرپ 4 شما را دیدم و واقعا عالی بود ولی اون عکس های وکتوری رو نمیدونم از کجا باید دانلود کنم ممنون میشم راهنماییم کنید و میشه بگید اموزش VAWE جلسه چنده ممنون

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

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

  • سلام استاد. میخواستم بدونم آیا میشه از بوت استرپ 5 در ریکت استفاده کرد یا باید از فریمورک هایی مثل react-bootstrap استفاده کرد؟ ممنون از شما.

    • سلام وقت بخیر.
      بله میتونید، اما خب وقتی react bootstrap هست از اون استفاده میشه

  • سلام استاد
    خسته نباشید و ممنون از آموزش های فوق العادتون
    چند تا سوال داشتم ازحضورتون
    اول اینکه آیا بعد از دیدن این دوره و دوره بوت استرپ 5 در دنیای واقعی که قراره به زودی برگزار کنید، دیگه تقریبا کامل میتونیم فرانت اند یه وبسایت رو از صفر تا صد پیاده کنیم؟ و آیا اصن میشه سایتی رو بدون نیاز به زبان برنامه نویسی و فقط با html و css و یه کتابخونه مثل بوت استرپ طراحی کرد ؟
    و سوال آخر اینکه دقیقا چه زمانی اون دوره بوت استرپ در دنیای واقعی رو قرار میدید جسارتا؟ چون میخوام برنامه ریزی داشته باشم و بلافاصله بعد اتمام این دوره اون رو تهیه کنم
    عذرخواهم پر حرفی کردم -_-

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

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

  • سلام؛
    خیلی ممنو از آموزش های خوبتون. میخواستم بدونم امکانش هست در این دوره کمی راجع به شخصی سازی بوت استرپ هم توضیح بدین؟ اگه یکی دوتا مثال ازش بزنید ممنون میشم.

    • سلام وقت بخیر.
      ممنون از شما.
      انشاا... توی دوره ای بوت استرپ ۵ در دنیای واقعی در قالب پروژه توضیح میدیم.

  • سلام استاد عزیز
    جسارتا دوره ادامه داره؟
    من موقع مشاهده قسمت های دوره دیدم قسمت ها رو جلو جلو نوشته بودید چه روزهایی آپلود میشه، برای همین فکر کردم همه ی قسمت های دوره همین 53 تاست
    اما مثل اینکه هنوز در حال برگزاری هستش!
    جسارتا قسمت های آموزشی تموم شده و الان فقط میخواید پروژه رو استارت بزنید؟

    • سلام وقت بخیر.
      بله دوره در حال برگزاری هست و حدودا ۱۰ قسمت دیگه مونده

  • سلام استاد خسته نباشید من با یک مشکلی در بوت استراپ 5 مواجه شدم و اون هم موقعی است که میخواهم در فوتر کارت مثلا 5 کارت قراردهم و بخواهم گرید بندی به شکل در موبایل 12 کالمن- در col-sm-6 و درmd به بعد هم بصورت col-md استفاده کنم . در حالیکه اصلا col-md را حساب نمی کند. در حالیکه در بوت استراپ 4 به خوبی کار میکند .

             <div class="card-footer">
    
    <div class="row text-center">
    <div class="col-12 col-sm-6 col-md card text-white bg-primary" >
    <div class="card-header">Header</div>
    <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>
    <div class="col-12 col-sm-6 col-md card text-white bg-primary" >
    <div class="card-header">Header</div>
    <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>
    <div class="col-12 col-sm-6 col-md card text-white bg-primary" >
    <div class="card-header">Header</div>
    <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>
    <div class="col-12 col-sm-6 col-md card text-white bg-primary" >
    <div class="card-header">Header</div>
    <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>
    <div class="col-12 col-sm-6 col-md card text-white bg-primary" >
    <div class="card-header">Header</div>
    <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>
    </div>
    </div>

    • سلام وقت بخیر.
      منظورتون چیه حساب نمیکنه؟! col-md کنار هم قرار میده
      لطفا کد هاتون رابین (۳تا بک تیک) قرار بدید.

    • سلام استاد - مثل اینکه بوت استراپ ورژن جدید یعنی v5.0.2 با گرید در حالت rtl مشکل دارد و در ورژن قبلی یعنی v5.0.1 درست عمل کرده و همانطوریکه شما هم اشاره کردید col-md کار خودش را درست انجام یعنی کارت ها را در کنار هم و 5 ستونه نمایش میدهد.
      در حالیکه اگر این کدی که برایتان ارسال کردم را امتحان کنید. اصلا گرید در این ورژن جدید کار نمیکندو تنها دو ستون که برای حالت col-sm-6 در نظر گرفتیم را برای بقیه حالت ها یعنی md و بقیه در نظر میگیرد.
      با تشکر

    • سلام وقت بخیر.
      بله درست میفرمائید توی نسخه v5.0.2 این مشکل هم توی نسخه rtl و هم ltr هست، که توی آپدیت های بعدی به احتمالا خیلی زیاد برطرف میشه.ممنون از اطلاع رسانی🙏

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