00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به تمام جلسات دوره
  • دسترسی به تمام جلسات دوره
  • اضافه شدن دوره به پروفایل
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

آموزش رایگان بوت استرپ 5 (Bootstrap)

دوره‌های رایگان
65 جلسه
97٪ (2902 رای)

توییتر در سال 2011 «بوت استرپ» (Bootstrap) را توسعه داد و در همان سال به‌عنوان نوعی فریمورک توسعه وب در GitHub منتشر شد. Bootstrap نوعی فریمورک منبع آزاد فرانت‌اند برای توسعه صفحات وب سریع و واکنشگرا برای دستگاه‌های تلفن همراه است. Bootstrap محبوب‌ترین چارچوب برای سازگاری با تمام مرورگرهای مدرن مانند Firefox ،Chrome ،Opera ،Safari ،Edge و غیره به‌حساب می‌آید. دوره آموزش بوت استرپ مکتب خونه با هدف آموزش این فریمورک محبوب تهیه و تدوین شده است. در ادامه به معرفی دوره آموزش رایگان بوت استرپ خواهیم پرداخت و در بخش بیشتر بدانید اطلاعات کاملی از Bootstrap را ارائه خواهیم داد.

معرفی دوره آموزش بوت استرپ

دوره آموزش بوت استرپ مکتب خونه با هدف آموزش نسخه ٥ این فریمورک تهیه و تدوین شده است. این دوره در ٥ فصل و ١٢ ساعت محتوا آموزشی به کاربران ارائه می‌شود و در آن دانشجویان و متقاضیان یادگیری بوت استرپ می‌توانند به‌صورت عملی و پروژه محور نحوه کار با این فریمورک محبوب فرانت‌اند را یاد بگیرند.

کاربرد دوره آموزش بوت استرپ 5 چیست؟

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

این یک دوره آموزشی جامع اما رایگان از بوت استرپ 5 بوده که در مکتب ‌خونه عرضه شده است. ازاین‌رو هرآنچه که درباره بوت استرپ 5 نیاز دارید بدانید در این دوره، در 5 فصل مختلف و حدود 6 ساعت آموزش مفید ارائه خواهد شد.

هدف از یادگیری دوره آموزش رایگان بوت استرپ چیست؟

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

دوره آموزش بوت استرپ مناسب چه کسانی است؟

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

البته اگر قبلاً هم با بوت استرپ 4 یا نسخه‌های قبلی کار کرده‌اید همچنان این دوره آموزش رایگان بوت استرپ 5 برایتان کاربردی خواهد بود. چراکه جزئیات این نسخه را به‌صورت اصولی درک کرده و در میان طراحی دچار سردرگمی نخواهید شد.

بعد از فراگیری دوره آموزش رایگان بوت استرپ چه مهارت‌هایی کسب خواهید کرد؟

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

پیش‌نیاز اصلی دوره آموزش بوت استرپ چیست؟

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

برای رفع پیش‌نیازهای خود جهت یادگیری بوت استرپ می‌توانید از دوره‌های آموزش جاوا اسکریپت و آموزش html css مکتب خونه استفاده کنید. در مکتب خونه دوره‌های آموزش رایگان و پولی زیادی برای این هدف وجود دارد که نیاز شما را پوشش خواهد داد.

سرفصل‌های دوره آموزش رایگان بوت استرپ 5 (Bootstrap)

فصل اول: آشنایی با بوت استرپ
00:36 ساعت
00:36
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

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

معرفی بوت استرپ
"11:01
بررسی وب‌سایت بوت استرپ
"07:49
الگوی شروع‌کننده (starter template)
"17:30
فصل دوم: چیدمان (layout)
01:34 ساعت
01:34
Combined Shape Created with Sketch. 7 جلسه
نمایش جلسات فصل  

در فصل دوم که به layout یا چیدمان پرداخته شده است شما با مفاهیم اصولی breakpoints و containerها آشنا شده و سپس آموزش‌های grid ،column و gutter به طور مفصل مورد بررسی قرار می‌گیرد. در مجموع این فصل شامل 7 قسمت خواهد بود.

نقاط شکست (breakpoints)
"16:18
grid - بخش اول
"14:41
grid - بخش دوم
"15:31
grid - بخش سوم
"15:15
columns - بخش اول
"14:04
columns - بخش دوم
"08:46
gutters
"09:55
فصل سوم: محتوا (content)
00:41 ساعت
00:41
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

فصل سوم دوره آموزش رایگان بوت استرپ 5 شامل content یا محتوای موردنظر است که در 4 قسمت مجزا به آموزش کامل تصاویر و اشکال مختلف، reboot و تایپوگرافی و جداول پرداخته می‌شود.

راه‌اندازی مجدد و تایپوگرافی (reboot and typography)
"14:20
تصاویر و ارقام (images and figures)
"06:23
جدول‌‌ها (tables) - بخش اول
"07:01
جدول‌‌ها (tables) - بخش دوم
"13:36
فصل چهارم: Forms
01:34 ساعت
01:34
Combined Shape Created with Sketch. 9 جلسه
نمایش جلسات فصل  

در فصل چهارم آموزش bootstrap 5 به بررسی مفاهیم مانند کنترل فرم، گزینش آن‌ها، گروه‌های ورودی و برچسب‌های اعشاری، اعتبارسنجی و... اختصاص دارد.

ّForm Control
"15:28
Select
"04:12
Check and Radio
"12:32
دامنه (Range)
"03:51
گروه ورودی (input group)
"11:22
برچسب شناور (floating labels)
"05:53
چیدمان (layout)
"16:54
اعتبارسنجي (validation) - بخش اول
"13:19
اعتبارسنجي (validation) - بخش دوم
"10:39
فصل پنجم: Utilities
01:22 ساعت
01:22
Combined Shape Created with Sketch. 9 جلسه
نمایش جلسات فصل  
Bootstrap Icon
00:07 ساعت
00:07
Combined Shape Created with Sketch. 1 جلسه
نمایش جلسات فصل  
استاد دوره
علی شیخ علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون از سال 1398 تاکنون توانسته‌است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد.

درباره برگزارکننده
وب ‌پروگ وب ‌پروگ (اطلاعات بیشتر)

پیش‌نیاز‌های دوره آموزش رایگان بوت استرپ 5 (Bootstrap)

ازآنجایی‌که در بوت استرپ با کدهای CSS و HTML زیاد سروکار خواهید داشت، آشنایی کافی با CSS3 و HTML5 از جمله مفاهیم پیش‌نیاز این دوره در نظر گرفته شده است. البته دانش کافی در زمینه responsive layout و flex box نیز درک شما را نسبت به این دوره آموزشی بالا می‌برد. اما درصورتی‌که با این دو مورد آشنایی ندارید، می‌توانید به‌صورت هم‌نیاز، یعنی با شروع دوره آموزشی رایگان بوت استرپ، یادگیر مفاهیم responsive layout و flex box را شروع کنید. نکته قابل‌توجه اینجاست که سرعت یادگیری این دو مفهوم را باید نسبت به بوت استرپ کمی افزایش دهید تا زمانی که مقدمات بوت استرپ به پایان می‌رسد شما نیز به همه مفاهیم پیش‌نیاز این دوره تسلط کافی پیدا کرده باشید.

آموزش HTML و CSS
اطلاعات بیشتر

نظرات  (15 نظر)

صفحه 

از 

2

کاربر مکتب‌خونه
19:15 - 1401/11/09
کاربر‌ سایت
از هر لحاظ عالیه, مطالب رو با حوصله و دقیق توضیح میدن ممنونم
کاربر مکتب‌خونه
17:19 - 1401/06/26
کاربر‌ سایت
دوره جذاب و مفیدی بود و همه مباحث بوت استرپ توضیح داده شد. باتشکر
محمدمهدی
19:44 - 1401/06/12
کاربر‌ سایت
دوره فوق العاده ای بود فقط توی بخش پروژه footer رو قرار نداده اید
کاربر مکتب‌خونه
09:33 - 1401/06/08
کاربر‌ سایت
اصلا دوره مفیدی نیست!واقعا وقت هدر دادنه تماشای این دوره اینقدر تند تند و سریع مباحث رد میکنند که حتی خودشون هم بارها تو فیلم گیج میشن چه برسه به یه مبتدی من تمام دوره تماشا کردم اوایل از این اموزش چیزی سر در نیاوردم و هر چه هی صبر کردم که جلوتر شاید بهتر بشه اصلا فایده نداشت هر چه دقت میکردم فایده نداشت . ضعف مهم این دوره مباحث پایه ای رو با توجه به اسان بودن و پرکاربرد بودن برای یه فرد ماهر مثل مدرس عزیز گمان کردن به همان میزان برای مبتدی ها نیز اسان خواهد بود و خیلی نامناسب بهشون پرداختند تگ های مهم و پایه ای و غیره
کاربر مکتب‌خونه
14:50 - 1401/05/28
کاربر‌ سایت
واقعا مباحث خیلی خوب تدریس شد خدا خیرتون بده
سید علی
17:24 - 1401/04/27
کاربر‌ سایت
یعنی خدائیش آقای شیخ چقد خوب آموزش میدین. دمتون گرم چندین آموزش بوت استرپ دیدم هیچکدام به خوبی شما نیست واضح و شفاف همه چی رو توضیح میدین و اصلا دانشجو گیج نمیشه. واقعا واقعا واقعا عالی آموزش میدین
کاربر مکتب‌خونه
18:55 - 1401/04/16
کاربر‌ سایت
با سلام بسیار عالی بود. ممنونم . فقط در پروژه فیلم ساخت فوتر در ویدیوها نبود.
کاربر مکتب‌خونه
11:56 - 1401/04/13
کاربر‌ سایت
دوره فوق العاده با کیفیت هست و واقعا چیزی کم نداره اگر کمی در مورد پیش نیازهای دوره هم اطلاعات داشته باشید بدون شک بعد پایان دوره به بوت استرپ کاملا مسلط میشید چون واقعا راحت و کامل بیان شده دوره و یک سری از مفاهیم پایه و مهم بارها و بارها تکرار و تاکید شده واقعا ممنونم از آقای شیخ که انقدر دوره خوبی رو ساختن به نوبه خودم قطعا سایت رو به دوستانم پیشنهاد و معرفی خواهم کرد.
موسی
15:27 - 1401/04/07
کاربر‌ سایت
با سلام آقای شیخ ، واقعا دمت گرم. خدا خیرت بده ، مفید و عالی و دقیق و جامع و لطیف و ظریف توضیح دادید. هرجا هستی خدا یار و نگهدارت باشه
بهراد
19:05 - 1401/02/10
کاربر‌ سایت
سلام من بک اند کار میکنم و ااین دوره خیلی کمک کرد تو یکی از کارام. ولی بنظرم مدرس خیلی سریع مطالب رو رد میکرد مثلا این گریده و بعدا کار میکنیم دستتون میاد. اگر تجربه نداشته باشید یکمی سخته و اینکه بعضی وقتها برای شباهت با bs4 یکسری چیزا به bs4 پاس داده میشد و کامل دربارش حرف نمیزد

سوالات پرتکرار

آیا ممکن است که درسی ناقص ضبط شده باشد؟
ما همواره تلاش کرده­‌ایم که دروس را به طور کامل ضبط نماییم و در اختیار شما دوستان قرار دهیم. اما گاهی برخی ناهماهنگی ها سبب می شود که یک یا تعدادی از جلسات یک درس ضبط نشود. توضیح این گونه نواقص در توضیح درس­ ها آمده است.
اگر لینک دانلود یا پخش ویدئو مشکل داشت چه باید کرد؟
در صورتی که با هر گونه مشکلی رو به رو شدید می توانید از طریق صفحه ارتباط با ما به ما اطلاع دهید تا ما سریعا مشکل را پیگیری و برطرف نماییم.
آیا امکان دریافت فیلم های یک درس به صورت سی دی یا دی وی دی وجود دارد؟
در حال حاضر امکان ارسال دروس به صورت سی دی یا دی وی دی وجود ندارد.

اطلاعات بیشتر

بوت استرپ چیست؟

«بوت استرپ» (Bootstrap) یک مجموعه ابزار رایگان و منبع باز برای ایجاد وب‌سایت‌های واکنشگرا و برنامه‌های وب است. این ابزار در واقع محبوب‌ترین چارچوب HTML ،CSS و JavaScript برای توسعه وب‌سایت‌های واکنشگرا به‌حساب می‌آید. امروزه، وب‌سایت‌ها برای همه مرورگرها (Firefox و Chrome) و برای همه اندازه‌های صفحه (دسکتاپ، تبلت و تلفن همراه) مناسب هستند.

در واقع Bootstrap یک کتابخانه توسعه فرانت‌اند قدرتمند است که توسط کارمندان سابق توییتر Mark Otto و Jacob Thornton ایجاد شده و شامل اجزای HTML ،CSS و JS از پیش‌ساخته شده برای ساخت وب‌سایت‌های واکنش‌گرا برای موبایل با هر اندازه و پیچیدگی است. بوت استرپ اساساً به توسعه‌دهندگان در زمان نوشتن CSS و HTML با ارائه قالب‌های رایگان به‌عنوان نقطه شروع پروژه وب کمک می‌کند. دوره آموزش بوت استرپ مکتب خونه با این هدف تهیه و تدوین شده است.

ویژگی‌های بوت استرپ

با استفاده از این چارچوب می‌توانیم به‌راحتی یک ظاهر طراحی شده در هر صفحه وب مانند سبک قلم، رنگ متن، رنگ پس‌زمینه، رنگ فلکس، سیستم شبکه و غیره را دست‌کاری کنیم. بوت استرپ در دو نسخه Vesrion 4 & Vesrion 5 که محبوب‌ترین نسخه‌ها هستند و وجود دارد و با این حال نسخه‌های قدیمی آن در حال حاضر کمتر استفاده می‌شوند. بسیاری از چارچوب‌های CSS دیگر شبیه بوت استرپ مانند Tailwind CSS ،Bulma و Foundation وجود دارند، اما در این میان بوت استرپ به دلیل ویژگی‌های زیر محبوب‌ترین است:

  • ابزاری سریع‌تر و آسان‌تر برای توسعه وب و نرم‌افزارهای تحت وب است.
  • بوت استرپ صفحات وب مستقل از بستر را ایجاد می‌کند.
  • بوت استرپ صفحات وب واکنشگرا ایجاد می‌کند.
  • این فریمورک صفحات وب واکنشگرا را برای دستگاه‌های تلفن همراه نیز طراحی می‌کند.
  • این چارچوب منبع آزاد است و نرم‌افزار آن در سایت www.getbootstrap.com به‌صورت رایگان موجود است.

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

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

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

  • سیستم شبکه واکنشگرا
  • سفارش سازی آسان
  • به‌کارگیری آسان
  • قابلیت اتصال به جاوا اسکریپت
  • جامعه پشتیبان فعال
  • و غیره

سیستم شبکه واکنشگرا

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

سفارشی‌سازی آسان

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

قابلیت اتصال با جاوا اسکریپت

بیش از دوازده پلاگین سفارشی JQuery وجود دارد که توسعه‌دهندگان می‌توانند با Bootstrap از آن‌ها استفاده کنند تا سایت آن‌ها نه‌تنها سایتی جذاب به‌حساب آید، بلکه کاملاً تعاملی نیز باشد. شما می‌توانید بسته به نیاز خود از این افزونه‌های جاوا اسکریپت استفاده کنید تا دقیقاً همان چیزی را که از وب‌سایت خود می‌خواهید به دست آورید.

کتابخانه عظیم اجزای تعاملی

منوهای موبایل تاشو، نوار ناوبری چرخ فلک تعاملی، مدل‌های پاپ‌آپ استایل، اسپینرها و غیره همه آن‌ها در طیف عظیمی از اجزای Bootstrap گنجانده شده‌اند. شما می‌توانید اجزای تعاملی و زیبا را در سایت خود با کمترین کد نویسی ایجاد کنید. بسیاری از آن‌ها فقط نیاز به یک نام کلاس ساده دارند تا به عنصر<div> اضافه شود. همه این مؤلفه‌ها نیز قابل تنظیم هستند، بنابراین می‌توانید آن‌ها را در قالب کلی سایت خود قرار دهید.

جامعه پشتیبان بوت استرپ

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

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

مزایای بوت استرپ در توسعه وب

جذابیت بوت استرپ این است که فرآیند توسعه وب را ساده می‌کند و به افراد متخصص این امکان را می‌دهد که وارد دنیای ساخت وب‌سایت نیز شوند. در دوره آموزش بوت استرپ ما به این مزایا پی خواهیم برد و با این حال در اینجا نیز برخی از مزایای اضافی استفاده از بوت استرپ ذکر شده‌اند:

واکنشگرایی

اصطلاح طراحی وب واکنشگرا (RWD) به این معنی است که محتوا و طرح‌بندی می‌تواند با انواع مختلف دستگاه‌ها مانند کامپیوتر رومیزی، تبلت‌ها و گوشی‌های هوشمند متناسب باشد. احتمالاً هنگام وبگردی با تلفن خود متوجه شده‌اید که برخی از وب‌سایت‌ها به درستی بارگیری نمی‌شوند یا برای دیدن همه بخش‌های آن نیاز به بزرگنمایی، کوچک نمایی و یا پیمایش به چپ و راست است که این به معنای غیر واکنشگرا بودن آن سایت خواهد بود. سیستم شبکه واکنشگرای Bootstrap تضمین می‌کند که محتوای ساخته شده از طریق پلتفرم هنگام مشاهده از هر دستگاهی واضح و قابل‌دسترس خواهد بود.

قابل تنظیم

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

آسان برای استفاده

همان‌طور که در دوره آموزش بوت استرپ نیز این مزیت برای شما قابل‌رؤیت خواهد بود، یکی از بهترین مزایای بوت استرپ سهولت استفاده از آن است که این چارچوب را قادر می‌سازد تا برای توسعه‌دهندگان وب تازه‌کار و همچنین متخصصان جذاب باشد. اکثر مردم با استفاده از بوت استرپ برای طراحی وب‌سایت خود مشکلی ندارند. علاوه بر این، Bootstrap با یک جامعه پشتیبانی بزرگ ارائه می‌شود، بنابراین تقریباً به هر سؤالی در آن پاسخ داده شده است و آن‌ها همچنین به‌طور مداوم به‌روزرسانی‌هایی را برای رفع هرگونه مشکل منتشر می‌کنند.

صرفه‌جویی در زمان

بوت استرپ در هنگام ساخت وب‌سایت‌ها در زمان زیادی صرفه‌جویی می‌کند زیرا نیازی به نوشتن کدهای شخصی خود ندارید. بوت استرپ بلوک‌های کد نویسی را ارائه می‌دهد که به شما کمک می‌کند پایه خود را سریع و کارآمد بسازید.

متن‌باز

بوت استرپ منبع باز است، به این معنی که هرکسی می‌تواند از آن استفاده کند و کدها را برای رفع نیازهای وب‌سایت خود تغییر داده یا سفارشی کند. این همچنین به این معنی است که استفاده از آن رایگان خواهد بود.

چگونه از بوت استرپ در توسعه وب استفاده می‌شود؟

قبل از استفاده از بوت استرپ، به حداقل دانش HTML ،CSS و جاوا اسکریپت نیاز دارید. HTML مخفف HyperText Markup Language است و اساساً زبان کامپیوتری برای توصیف ساختار و محتوای یک صفحه وب به‌حساب می‌آید. CSS که مخفف عبارت Cascading Style Sheets بوده و ابزاری است که برای قالب‌بندی و طرح‌بندی صفحه وب استفاده می‌شود. با CSS می‌توانید رنگ، اندازه متن و فونت، موقعیت تصاویر و هر چیز دیگری که برای طراحی یک صفحه وب نیاز است را کنترل کنید. همچنین برای استفاده از بوت استرپ به جاوا اسکریپت نیاز دارید. همان‌طور که میدانید جاوا اسکریپت نوعی زبان برنامه‌نویسی است که صفحات وب تعاملی ایجاد می‌کند.

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

بوت استرپ 5 چیست؟

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

حال اینکه بوت استرپ 5 نسخه‌ای از آن است که امروزه در میان برنامه‌نویسان وب کاربرد بیشتری داشته و دلیل آن‌هم امکانات و ویژگی‌هایی بوده که به آن اضافه شده است. این ویژگی‌ها عبارت‌اند از:

  • عدم پشتیبانی از اینترنت اکسپلورر
  • عدم نیاز به کتابخانه jQuery
  • بهبود فرم‌ها و NavBar
  • فونت‌های استاندارد و بهینه‌تر
  • به‌روزرسانی برخی از کلاس‌های موجود
  • و غیره

بوت استرپ 5 چه تفاوتی با بوت استرپ 4 دارد؟

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

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

سخن پایانی

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

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول: آشنایی با بوت استرپ
00:36 ساعت
00:36
Combined Shape Created with Sketch. 3 جلسه
نمایش جلسات فصل  

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

معرفی بوت استرپ
"11:01
بررسی وب‌سایت بوت استرپ
"07:49
الگوی شروع‌کننده (starter template)
"17:30
فصل دوم: چیدمان (layout)
01:34 ساعت
01:34
Combined Shape Created with Sketch. 7 جلسه
نمایش جلسات فصل  

در فصل دوم که به layout یا چیدمان پرداخته شده است شما با مفاهیم اصولی breakpoints و containerها آشنا شده و سپس آموزش‌های grid ،column و gutter به طور مفصل مورد بررسی قرار می‌گیرد. در مجموع این فصل شامل 7 قسمت خواهد بود.

نقاط شکست (breakpoints)
"16:18
grid - بخش اول
"14:41
grid - بخش دوم
"15:31
grid - بخش سوم
"15:15
columns - بخش اول
"14:04
columns - بخش دوم
"08:46
gutters
"09:55
فصل سوم: محتوا (content)
00:41 ساعت
00:41
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

فصل سوم دوره آموزش رایگان بوت استرپ 5 شامل content یا محتوای موردنظر است که در 4 قسمت مجزا به آموزش کامل تصاویر و اشکال مختلف، reboot و تایپوگرافی و جداول پرداخته می‌شود.

راه‌اندازی مجدد و تایپوگرافی (reboot and typography)
"14:20
تصاویر و ارقام (images and figures)
"06:23
جدول‌‌ها (tables) - بخش اول
"07:01
جدول‌‌ها (tables) - بخش دوم
"13:36
فصل چهارم: Forms
01:34 ساعت
01:34
Combined Shape Created with Sketch. 9 جلسه
نمایش جلسات فصل  

در فصل چهارم آموزش bootstrap 5 به بررسی مفاهیم مانند کنترل فرم، گزینش آن‌ها، گروه‌های ورودی و برچسب‌های اعشاری، اعتبارسنجی و... اختصاص دارد.

ّForm Control
"15:28
Select
"04:12
Check and Radio
"12:32
دامنه (Range)
"03:51
گروه ورودی (input group)
"11:22
برچسب شناور (floating labels)
"05:53
چیدمان (layout)
"16:54
اعتبارسنجي (validation) - بخش اول
"13:19
اعتبارسنجي (validation) - بخش دوم
"10:39
فصل پنجم: Utilities
01:22 ساعت
01:22
Combined Shape Created with Sketch. 9 جلسه
نمایش جلسات فصل  
Bootstrap Icon
00:07 ساعت
00:07
Combined Shape Created with Sketch. 1 جلسه
نمایش جلسات فصل