Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
دوره ی اموزش کامل bootstrap 4 (بوت استرپ 4)

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

11223

Calendar-amico (2)

تاریخ انتشار:

8 , مرداد , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قسمت اول 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 ( بوت استرپ ) چه سایتی است ؟

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

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

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

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

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

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

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

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

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

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

موفق باشید

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

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

  1. میشه دقیق بگید کی ویدیوهای قسمت هایی که باقی مونده قرار داده میشه ؟

    • باعرض سلام
      متاسفانه فایل های ویدیوها دچار نقص شدن ، مجدد ریکورد شدن و روزانه درحال قرار گرفتن هستند ان شالله تا هفته آینده تمام ویدیوها تا قسمت ۲۲ در اختیار شما عزیزان قرار داده میشه.

  2. با سلام و عرض ادب و احترام خدمت شما.
    با تشکر از مطالب مفید شما.
    بنده طراح قالب های بیان بلاگ هستم و حدودا دوسال هست که به صورت حرفه ای در این زمینه فعالیت میکنم. اخیرا با بوت استرپ آشنا شدم و در زمینه طراحی با بوت استرپ تازه کارم و در همین زمینه میخواستم سوالی رو مطرح کنم که اگر جوابش رو لطف کنید بگید ، لطف بزرگی به من کردید.
    “سایت هایی هستند که قالب بوت استرپ آماده رو برای دانلود و استفاده قرار میدن (https://bootstraptaste.com/ مثل این سایت) . آیا میشه قالب های دانلود شده رو در بوت استرپ import کنیم و در بوت استرپ به ویرایش اون قالب ها بپردازیم؟

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

  3. الان دقیقا تمام قسمت ها کجاست اینجا فقط ۳ قسمته پس بقیه کجاست

  4. با سلام. اول از همه خیلی تشکر میکنم از شما برای آموزش های مفیدتون. من الان دارم آموزش بوت استرپ رو دنبال میکنم. خیلی عالیه.
    میخواستم خواهش کنم آموزش wordpress رو هم بذارید. و اگه ممکنه حتما اموزش بدید که چطور یه قالب HTML رو خودمون به قالب wordpress تبدیل کنیم.

    • سلام خدمت شما
      خواهش میکنم ، حتما طی آموزش های آینده طراحی قالب وردپرس و کار با وردپرس رو قرار میدیم ، تبدیل html به وردپرس رو هم در برنامه قرار میدیم.

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *