دوره ی آموزش کامل bootstrap 4 (بوت استرپ 4) به صورت رایگان

چگونه با bootstrap 4 ( بوت استرپ 4 ) سایت های حرفه ای طراحی کنیم ؟

آیا با بوت استرپ میتوان سایت های ریسپانسیو و حرفه ای طراحی کرد ؟

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

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

بوت استرپ دارای مزایا و معایبی است که در کل و طی بررسی هایی که در دوره ی bootstrap و مقدمات این دوره انجام داده ایم به نتیجه ی مثبت رسیدیم که یادگیری ان بسیار کاربردی است.

شما هنگامی که بوت استرپ را بلد باشید ، میتوانید انواع سایت ها را طراحی کنید ، اکثر طراح های حرفه ای نیز برای سرعت بخشیدن به کار خود از بوت استرپ استفاده میکنند ، اکثر افراد مبتدی راحت تر میتوانند با bootstrap سایت طراحی کنند.

پیش نیاز های یاد گیری دوره bootstrap 4 چیست ؟

شما برای یاد گیری bootstrap 4 به هیچ پیش نیازی نیاز نخواهید داشت ، این دوره بصورت کاملا واضح توضیح داده شده است ، در ویدیوهای این دوره اموزش های لازم برای html, css و جاوا اسکریپت برای شما قرار داده شده است.

بعد از یاد گیری بوت استرپ برای حرفه ای تر کردن سایت خود به یاد گیری زبان هایی مانند جاوا اسکریپت ، php و یا angularjs نیاز خواهید داشت که با کلیک بر روی اموزش جاوااسکریپت ، اموزش php و اموزش angularjs میتوانید به این اموزش ها دسترسی داشته باشید.

ایا کدپز ویدیوی اموزشی در این باره قرار خواهد داد ؟

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

آیا دوره ی ویدیویی پروژه محور خواهد بود یا بصورت مبحث به مبحث ؟

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

هنگامی که شما تک به تک مباحث را یاد بگیرید یاد گیری باقی مباحث برای شما ساده خواهد بود.

در این دوره به اموزش چه مباحثی خواهیم پرداخت ؟

قسمت اول bootstrap : اموزش نصب بوت استرپ + ویدیو

• بوت استرپ چیست؟
• ریسپانسیو یا واکنشگرا چیست؟
• تفاوت بوت استرپت ۳ با بوت استرپ ۴
• چرا از بوت استرپ استفاده کنیم؟
• چگونه بوت استرپ را نصب کنیم؟
• افزودن فایل های cdn bootstrap
• دانلود بوت استرپ
• ساخت اولین صفحه با استفاده از بوت استرپ ۴
• ویدیوی این قسمت

قسمت دوم bootstrap : مفاهیم مقدماتی بوت استرپ + ویدیو

• تقسیم بندی در bootstrap 4
• کلاس های تقسیم بندی
• ساختار پایه تقسیم بندی بوت استرپ ۴
• سه ستون برابر
• ستون های واکنشگرا
• دو ستون نابرابر واکنشگرا
• ویدیوی این قسمت

قسمت سوم bootstrap : نحوه ی تعریف انواع تایپوگرافی در بوت استرپ

• ساختار های پیش فرض bootstrap 4
• تگ های h1 تا h6
• بخش های نمایش
• تگ small
• تگ mark
• تگ abbr
• تگ blockqoute
• تگ dl
• تگ code
• تگ kbd
• تگ pre
• ویدیوی این قسمت

قسمت چهارم bootstrap :چگونه از انواع رنگ در بوت استرپ استفاده کنیم؟

• رنگ های متن
• رنگ های پس زمینه
• ویدیوی این قسمت

قسمت پنجم bootstrap :چگونه با بوت استرپ جدول طراحی کنیم؟

• جدول ساده
• ردیف های راه راه
• جدول مرز بندی شده
• افکت در هنگام اشاره موس
• جدول سیاه و سفید
• جدول مشکی و راه راه
• افکت موس در حالت تیره
• جدول بدون حاشیه دور
• کلاسهای متنی
• جداول کوچک
• جداول ریسپانسیو یا واکنشگرا
• ویدیوی قسمت پنجم

قسمت ششم bootstrap : استایل دادن به عکس ها در بوت استرپ

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

قسمت هفتم bootstrap : جومبوترن ( Jumbotron ) چیست و چگونه تعریف میشود ؟

• ساخت jumbotron
• jumbotron تمام صفحه
• ویدیوی قسمت هفتم

قسمت هشتم bootstrap : هشدار ها یا Alerts در بوت استرپ چگونه ساخته میشوند ؟

• هشدارهای بوت استرپ ۴
• افزودن لینک به هشدارها
• افزودن انیمیشن به هشدارها
• ویدیوی قسمت هشتم

قسمت نهم bootstrap : نحوه ی تعریف دکمه ها در بوت استرپ ۴

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

قسمت دهم bootstrap : نحوه ی تعریف گروه دکمه ها در بوت استرپ ۴

• گروه دکمه ها
• دکمه بزرگ :
• دکمه عادی
• دکمه کوچک
• گروه دکمه های عمودی
• منوهای گروهی و دکمه های کشویی
• تقسیم دکمه کشو
• گروه دکمه های عمودی با دکمه کشویی
• گروه های دکمه ای
• ویدیوی قسمت دهم

قسمت یازدهم bootstrap : نحوه ی تعریف نشانها در بوت استرپ ۴

• نشانها
• نشان های متنی
• نشان های قرصی شکل
• ویدیوی قسمت یازدهم

قسمت دوازدهم bootstrap : نحوه ی تعریف نوار پیشرفت در بوت استرپ ۴

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

قسمت سیزدهم bootstrap : نحوه ی تعریف اسپینرها در بوت استرپ ۴

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

قسمت چهاردهم bootstrap : نحوه ی صفحه بندی در بوت استرپ ۴

• صفحه بندی پایه
• حالت فعال
• حالت غیرفعال
• سایز صفحه بندی
• محل قرار گیری صفحه بندی
• ساخت بردکرامب (Breadcrumbs) در بوت استرپ ۴
• قسمت چهاردهم بوت استرپ

قسمت پانزدهم bootstrap : نحوه ی استفاده از لیست در بوت استرپ ۴

• لیست ساده
• حالت فعال
• لیست همراه با لینک
• آیتم های غیرفعال
• حذف مرز ها
• فهرست افقی
• کلاسهای متنی
• لینک در کلاسهای متنی
• لیست همراه با نشانه
• ویدیوی قسمت پانزدهم

قسمت شانزدهم bootstrap : نحوه ی استفاده از کادر در بوت استرپ ۴

• کارت ساده
• هدر و فوتر
• کارتهای رنگی
• تیتر ها ، نوشته ها و لینک ها
• عکس در کارت
• پیوند کارت
• پوشش تصویر کارت
• ستون کارتها
• عرشه کارتها
• گروه کارتها
• ویدیوی قسمت شانزدهم

قسمت هفدهم bootstrap : نحوه ی استفاده از لیست کشویی در بوت استرپ ۴

• لیست کشویی ساده
• جدا کننده در لیست کشویی
• سربرگ در لیست کشویی
• حالت فعال و یا غیرفعال
• موقعیت لیست کشویی
• راست چین باز شدن منو
• باز شدن منو در جهت بالا
• شکاف در دکمه ها
• ویدیوی قسمت هفدهم

قسمت هجدهم bootstrap : نحوه ی استفاده از لیست بازشونده در بوت استرپ ۴

• لیست بازشونده ی ساده
• آکاردئون
• ویدیوی قسمت هجدهم

قسمت نوزدهم bootstrap : نحوه ی ساخت منو در بوت استرپ ۴

• ساخت منو
• چینش منو
• منوی عمودی
• استفاده از تب در منو
• طراحی منو به روش قرص توپی
• منوی بازشونده در منوی قرصی
• تب ها با لیست بازشونده
• منوهای پویا
• ویدیوی قسمت نوزدهم

قسمت بیستم bootstrap : نحوه ی ساخت منوی ناوبری در بوت استرپ ۴

• منوی ناوبری ساده
• منوی عمودی
• منو وسط چین
• منوی رنگی
• نام برند یا لوگو
• نوار بازشونده در منو
• منوی ناوربری با لینک بازشونده
• فرم ها و دکمه های نوار
• متن در منوی ناوربری
• نوار پیمایش ثابت
• ویدیوی قسمت بیستم

قسمت بیست و یکم bootstrap : نحوه ی ساخت فرم در بوت استرپ ۴

• تنظیمات پیش فرض فرم ها
• لایه های فرم ها
• راه اندازی فرم در بوت استرپ ۴
• فرم درون خطی
• فرم درون خطی با برنامه های کاربردی
• ردیف یا شبکه فرم
• اعتبار سنجی فرم ها
• ویدیوی قسمت بیست و یکم

قسمت بیست و دوم bootstrap : نحوه ی ساخت فرم ورودی در بوت استرپ ۴

• ورودی های مجاز
• ورودی های بوت استرپ ۴
• ناحیه ی متنی در بوت استرپ ۴
• چک باکس ها در بوت استرپ ۴
• دکمه های رادیویی در بوت استرپ ۴
• لیست انتخاب در بوت استرپ ۴
• سایز فرم ها
• فرم کنترل فایل و دامنه تغییرات
• ویدیوی قسمت بیست و دوم

قسمت بیست و سوم bootstrap : نحوه ی ساخت گروه فرم در بوت استرپ ۴

• گروه فرم‌های ورودی
• اندازه گروه ورودی
• ورودی‌های چندگانه و راهنماها
• گروه فرم همراه با چک باکس یا دکمه‌های رادیویی
• گروه ورودی به همراه دکمه
• گروه ورودی به همراه لیست بازشونده
• برچسب در گروه ورودی

قسمت بیست و چهارم bootstrap : نحوه ی ساخت فرم دلخواه در بوت استرپ ۴

• نحوه‌ی ساخت چک باکس دلخواه
• ایجاد سویچ دلخواه
• ایجاد دکمه رادیویی دلخواه
• فرم درون خطی دلخواه
• منوی دلخواه
• سایز دلخواه برای منو
• ایجاد محدوده سفارشی
• فایل آپلود دلخواه

قسمت بیست و پنجم bootstrap : نحوه ی ساخت اسلایدر در بوت استرپ ۴

• چگونه اسلایدر بسازیم ؟
• توضیحات قسمت های مختلف اسلایدر
• افزودن توضیحات به اسلایدر

قسمت بیست و ششم bootstrap : نحوه ی ساخت مودال ( modal ) در بوت استرپ ۴

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

قسمت بیست و هفتم bootstrap : نحوه ی ساخت اعلان راهنما در بوت استرپ ۴

• اعلان راهنما
• نحوه ی ساخت اعلان راهنما
• موقعیت قرارگیری اعلان راهنما

قسمت بیست و هشتم bootstrap : نحوه ی ساخت Popover در بوت استرپ ۴

• نحوه ساخت پاپ آپ
• موقعیت قرار گیری پاپ آپ
• بستن پاپ آپ ها

قسمت بیست و نهم bootstrap : نحوه ی ساخت Toast در بوت استرپ ۴

• آموزش ساخت Toast
• نمایش و عدم نمایش Toast

قسمت سی ام bootstrap : نحوه ی ساخت Scrollspy در بوت استرپ 4

• ساخت Scrollspy
• توضیحات مثال
• منوی عمودی Scrollspy

قسمت سی و یکم bootstrap : نحوه ی استفاده از Utilities در بوت استرپ 4

• Utilities یا راهنماهای کمکی
• حاشیه ها ( Borders )
• حاشیه های رنگی
• شعاع مرزی ( Border Radius )
• حالت شناور و ثابت کردن ( Float and Clearfix )
• حالت واکنشگرای شناور ( Responsive Floats )
• وسط چین
• عرض
• ارتفاع
• فاصله
• سایه ها
• تراز عمودی
• Embed واکنشگرا
• نمایش
• موقعیت ها
• نماد بستن
• صفحه خوان ها ( Screenreaders )
• رنگ ها
• عناصر بلوک
• فلکس

قسمت سی و دوم bootstrap : نحوه ی استفاده از Flex در بوت استرپ 4

• flexbox
• جهت افقی
• جهت عمودی
• چینش محتوا
• پوشش کامل
• پوشش خاص
• ترتیب
• حاشیه های خودکار
• بسته بندی کردن
• چینش محتوا
• چینش آیتم ها
• تراز تک آیتم

قسمت سی و سوم bootstrap : نحوه ی استفاده از آیکون ها در بوت استرپ 4

• آیکون ها در بوت استرپ 4

قسمت سی و چهارم bootstrap : نحوه ی استفاده از Media Objects در بوت استرپ 4

• Media Objects
• Media Objects پایه
• رسانه های تو در تو
• قرادادن تصویر در سمت راست رسانه
• ترازهای مختلف تصویر

قسمت سی و پنجم bootstrap : نحوه ی استفاده از فیلتر در بوت استرپ 4

• فیلتر در بوت استرپ 4
• فیلتر کردن جدول
• فیلتر کردن لیست
• فیلتر برای همه المان ها

قسمت سی و ششم bootstrap : نحوه ی تقسیم بندی المان ها در بوت استرپ 4

• شبکه بندی در بوت استرپ 4
• کلاس های شبکه بندی
• قوانین شبکه بندی
• طرح پایه شبکه بندی
• عملکرد شبکه

قسمت سی و هفتم bootstrap : تراز بندی افقی در بوت استرپ 4

• مثالی برای تراز افقی
• تراز خودکار

تمامی مطالب این دوره به صورت کامل ارائه شده است . منتظر ویدئوهای آموزشی قسمت های مختلف باشید.

منبع اصلی اموزش bootstrap ( بوت استرپ ) چه سایتی است ؟

ما سعی بر این داریم تا اموزش هایی که از سایت اصلی getbootstrap.com است را ترجمه کنیم و با دانش خود به ان نقش و رنگ دهیم تا بصورت کاملا ساده و روان و کاربردی برای شما عزیزان قرار داده شود.

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

بیشتر بخوانید!

شاید برای شما هم لزوم داشتن سایت بجای استفاده از شبکه های مجازی سوال باشد ، میتوانید از مقاله ی چرا باید سایت داشته باشیم استفاده کنید و اگر قصد استفاده از شبکه های مجازی را دارید میتوانید اموزش کار با اینستاگرام را دنبال کنید.

شاید گذراندن دوره ی رایگان و جامع انگولار جی اس برای شما عزیزان مفید باشد.

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

راه های ارتباطی

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

حرفه ای ها دست نمیکشند!

اگر بعد از این قسمت های اموزشی قصد دارید تا پیشرفت بهتری کنید و یک قدم به سمت و سوی جلو حرکت کنید ، حتما و حتم به سراغ یکی از دوره های اموزش angularjs و یا اموزش php بروید تا راحت تر در بازار کار بتوانید موفق شوید.

موفق باشید