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

رتبه: 5 ار 3 رای SSSSS

نویسنده: تیم تولید محتوا زمان مطالعه 6 دقیقه

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

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

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

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

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

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

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

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

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

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

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

دانلود جزوه PDF

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

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

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

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

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

برای مشاهده بهتر ویدیوها در موبایل، گوشی را افقی نگه دارید. ضمنا لینک دانلود هر ویدیویی روی خود ویدیو قرار دارد. بهتر است وی پی ان روشن نباشد.

از پیج ونتیوک:

درس 1	درس 2
درس 3،بخش اول	درس3،بخش دوم
درس3،بخش سوم	درس 3،بخش چهارم
درس 3،بخش پنجم	درس 3،بخش ششم
درس 4	درس 5(آخر)

با دانلود دروس بالا نیازی به مورد دیگری در زمینه این برنامه ندارید و از این به بعد فقط بایستی به صورت پروژه ای کار کنید و تجربه کسب نمایید. همه دستورات را بلدید!

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

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

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

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

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"><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 به همراه لینک‌ها و اسکریپت‌های بوت‌استرپ:

<!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>My Bootstrap Site</title><br> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"><br></head><br><body><br> <div class="container"><br> <h1>Hello, Bootstrap!</h1><br> </div><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></body><br></html><br>

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

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

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

<div class="container"><br> <div class="row"><br> <div class="col-md-6">Column 1</div><br> <div class="col-md-6">Column 2</div><br> </div><br></div><br>

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: برای ایجاد نوارهای ناوبری:

<nav class="navbar navbar-expand-lg navbar-light bg-light"><br> <a class="navbar-brand" href="#">Navbar</a><br> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"><br> <span class="navbar-toggler-icon"><br> </button><br> <div class="collapse navbar-collapse" id="navbarNav"><br> <ul class="navbar-nav"><br> <li class="nav-item active"><br> <a class="nav-link" href="#">Home</a><br> </li><br> <li class="nav-item"><br> <a class="nav-link" href="#">Features</a><br> </li><br> </ul><br> </div><br></nav>

۵. نکات مهم

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

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

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