آموزش صفر تا صد بوت استرپ (فیلم فارسی+دانلود PDF رایگان)

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

۱-توضیحاتی راجع به Bootstrap

بوت‌استرپ مجموعه‌ای برای ساخت ظاهری وب سایت‌ها و برنامه‌های وب است. یکی از محبوبترین فریم ورکهای css میباشد که از شیوه گرید بندی برای چیدمان صفحات وب استفاده میکند.بوت‌استرپ شامل تمپلت‌های طراحی اچ‌تی‌ام‌ال و سی‌اس‌اس محور برای typography، فرمها، دکمه‌ها، نمودارها، اجزاء راهبری و دیگر اجزاء رابط کاربری و الحاقات اختیاری (JavaScript Extensions)، می‌باشد. بوت‌استرپ محبوب‌ترین پروژه در GitHub است که توسط NASA و MSNBC و دیگر سایتهای مطرح استفاده شده است. با استفاده از اطلاعات رابط برنامه‌نویسی (API) در بوت استرپ می‌توان اجزاء واسط پیشرفته مانند scrollspy و تکمیل کننده خودکار کلمات (typeahead) را بدون نیاز به نوشتن حتی یک خط کد جاوا اسکریپت ایجاد نمود. بهترین نکته بوت استرپ این است که متن باز بوده و به صورت رایگان قابل دانلود و استفاده می‌باشد. (ویکی)

از مزایای بوت استرپ:

• استفاده آسان: هر فردی با داشتن اطلاعات پایه از HTML و CSS می تواند کار با بوت استرپ را شروع کند.
• ویژگی واکنش گرا: این ویژگی در بوت استرپ باعث می شود سایت روی گوشی، تبلت و کامپیوتر های شخصی به درستی نمایش داده شود.
• رویکرد موبایلی: در بوت استرپ ۳ استایل های موبایل جزء هسته این فریم ورک محسوب می شوند.
• سازگاری با انواع مرورگر ها: بوت استرپ با تمام مرورگرها سازگار است (Chrome, Firefox, Internet Explorer, Safari و Opera).

۲-موارد آموزش داده شده در این پکیج

• بوت استرپ چیست؟
• کاربردها و مبانی اصلی بوت استرپ
• معرفی بوت استرپ ,پیشنیاز ها و آماده سازی محیط کار
• سیستم شبکه بندی (Grid System) – مروری بر چارچوب کلی و اساس طراحی ریسپانسو تحت فریم ورک بوت استرپ
• ایجاد عناصر واکنش گرا در بوت استرپ – توسعه و طراحی توسط اجزا,ابزار و کامپونت های بوت استرپ
• تعامل جاوا اسکریپت و بوت استرپ
• و …

۳- نمونه آموزش

در زیر دو نمونه آموزش داریم. هر کدام را که دوست دارید و با سبک آموزشش سازگار تر هستین برای یادگیری انتخاب کنید (یا هر دو)

۴-دانلود آموزش اول

   دانلود فیلم های این پکیج: بخش ۱    بخش ۲

   دانلود جزوه PDF

   حجم: حدود ۲ گیگ

   سطح: از صفر تا صد

   نسخه آموزش داده شده: مناسب برای همه نسخه های برنامه

به دنبال یادگیری سریع تر، حرفه ای تر، کامل تر و با کیفیت فول اچ دی هستید؟ بهترین پکیج آموزش بوت استرپ موجود در ایران را ببینید!

چه چیزی Bootstrap را بسیار محبوب می‌کند؟

1. مؤلفه‌ها

Bootstrap مجموعه‌ای از مؤلفه‌ها را در اختیار توسعه‌دهندگان قرار می‌دهد که به‌راحتی می‌توان آن‌ها را در برنامه‌های وب گنجاند، از جمله:

• منوهای کشویی
• فرم‌ها
• نوارهای ناوبری
• دکمه‌ها
• جداول
• نوارهای پیشرفت
• تصاویر کوچک

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

2. سیستم شبکه (Grid) واکنش‌گرا

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

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

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

4. قابلیت سفارشی‌سازی

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

5. سازگاری

تیم توسعه‌دهنده Bootstrap سازگاری آن با تمامی مرورگرها و پلتفرم‌های مدرن را تضمین می‌کند. اگرچه مرورگرهای قدیمی و پروکسی‌ها پشتیبانی نمی‌شوند، این موضوع تأثیری بر نمایش یا عملکرد آن ندارد.

6. یکپارچگی و سازگاری تیم‌ها

برای رفع ناسازگاری‌های میان تیم‌های توسعه فرانت‌اند و بک‌اند، Bootstrap به‌گونه‌ای طراحی شده است که استفاده از کتابخانه‌های متفاوت را حذف کرده و یکپارچگی در پروژه را تضمین می‌کند. همچنین، سازگاری با مرورگرهای مختلف باعث می‌شود که نتایج یکسانی در همه مرورگرها داشته باشیم.

7. پشتیبانی جامعه

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

آیا Bootstrap معایبی هم دارد؟

• گاهی نیاز به تغییرات و بازنویسی استایل‌ها به زمان زیادی برای طراحی و کدنویسی نیاز دارد، به‌ویژه اگر طراحی با طرح اصلی Bootstrap تفاوت زیادی داشته باشد.
• اگر تغییرات سنگین اعمال نشود، بسیاری از وب‌سایت‌ها ظاهری مشابه خواهند داشت.
• استایل‌های Bootstrap بسیار گسترده هستند و می‌توانند منجر به تولید کدهای HTML غیرضروری شوند.

6- نکات فوق العاده کاربردی که الان باید یاد بگیرید!

متوجه شدید که شروع کار با بوت‌استرپ، یک فریم‌ورک محبوب برای توسعه وب سایت‌های واکنش‌گرا (responsive)، می‌تواند به شما در ایجاد وب‌سایت‌های زیبا و کاربرپسند کمک کند. در اینجا راهنمایی کلی برای شروع کار با بوت‌استرپ به همراه برخی نکات و اصطلاحات مهم آورده شده است:

۱. دانلود و نصب بوت‌استرپ

بوت‌استرپ به دو روش عمده قابل استفاده است:

• استفاده از CDN: لینک‌های CDN بوت‌استرپ را می‌توانید به HTML خود اضافه کنید:

<br> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <br> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> <br>

• دانلود فایل‌ها: بوت‌استرپ را از سایت رسمی بوت‌استرپ دانلود کنید و فایل‌های CSS و JS آن را به پروژه خود اضافه کنید.

۲. ساختار پایه HTML

شروع با یک ساختار پایه HTML به همراه لینک‌ها و اسکریپت‌های بوت‌استرپ:

<br><br> <br> <br> <br> <br><br>

۳. استفاده از کلاس‌های بوت‌استرپ

بوت‌استرپ از کلاس‌های CSS برای ایجاد طرح‌بندی‌ها و المان‌های واکنش‌گرا استفاده می‌کند. برخی از کلاس‌های مهم عبارتند از:

• Container: کلاس container برای ایجاد یک بخش مرکزی با حاشیه استفاده می‌شود.
• Grid System: سیستم شبکه‌ای بوت‌استرپ برای ایجاد طرح‌های واکنش‌گرا با استفاده از کلاس‌هایی مانند row و col استفاده می‌شود:

• Typography: بوت‌استرپ شامل کلاس‌های زیادی برای استایل‌دهی به متن‌ها است، مانند h1 تا h6 برای عنوان‌ها، و lead برای متن‌های بزرگ‌تر.
• Buttons: بوت‌استرپ انواع مختلفی از دکمه‌ها را با استفاده از کلاس btn ارائه می‌دهد:

<button class="btn btn-primary">Primary Button</button><br><button class="btn btn-secondary">Secondary Button</button><br>

۴. کامپوننت‌های بوت‌استرپ

بوت‌استرپ مجموعه‌ای از کامپوننت‌های آماده برای استفاده دارد، مانند:

• Navbars: برای ایجاد نوارهای ناوبری:

۵. نکات مهم

• واکنش‌گرا بودن (Responsive Design): بوت‌استرپ به طور پیش‌فرض واکنش‌گرا است و به شما امکان می‌دهد که طرح‌های خود را برای دستگاه‌های مختلف بهینه‌سازی کنید.
• استفاده از کلاس‌های کمکی: بوت‌استرپ شامل کلاس‌های کمکی زیادی برای تنظیم مارژین، پدینگ، تایپوگرافی و رنگ‌ها است، مانند mt-3 برای تنظیم مارژین بالا.
• سفارشی‌سازی: می‌توانید با استفاده از فایل‌های SASS، بوت‌استرپ را بر اساس نیازهای خود سفارشی‌سازی کنید.

۶. اصطلاحات کلیدی بوت استرپ

• Grid System: سیستم شبکه‌ای که برای ایجاد طرح‌بندی‌های واکنش‌گرا استفاده می‌شود.
• Container: عنصری که محتوای اصلی صفحه را نگه می‌دارد و به دو نوع container (ثابت) و container-fluid (تمام عرض) تقسیم می‌شود.
• Breakpoints: نقاط توقف که در آنها طرح‌بندی واکنش‌گرا تغییر می‌کند، مانند sm, md, lg, xl.
• Navbar: نوار ناوبری که برای مسیریابی صفحات وب استفاده می‌شود.
• Card: یک بلوک محتوایی با استایل‌های پیش‌فرض.
• Modal: پنجره پاپ‌آپ که برای نمایش اطلاعات اضافی یا تعاملات کاربر استفاده می‌شود.

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