آموزش گام به گام بوت استرپ

مهمترین خصوصیات مجموعه ” آموزش گام به گام بوت استرپ ” به طور کلی :

– بیش از 6 ساعت آموزش فارسی بوت استرپ ۴ به صورت کاملا پروژه محور از مقدماتی تا پبشرفته 
– آموزش فوق العاده کاربردی از آشنایی مقدماتی تا انجام پروژه های مختلف کاربردی از اساتید معتبر برنامه نویسی دنیا
_ ترجمه و دوبله شده با بهترین کیفیت توسط متخصصین برنامه نویسی وب ایرانی
* شامل دوره فارسی و مثال محور :
 “آموزش جامع بوت استرپ ” – Bootstrap Essential Training
– به علاوه بیش از ۲۰ ساعت دوره های تخصصی آموزش Bootstrap به زبان انگلیسی و سورس ارزشمند پروژه های آموزشی فارسی
– همراه با تمام نرم افزار های مطرح کدنویسی وب Editors & IDEs

آنچه باید درباره بوت استرپ ( Bootstrap ) بدانیم :

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

Bootstrap مجموعه عظیمی از بیت کد مفید و قابل استفاده مجدد است که با HTML ، CSS و JavaScript نوشته شده است.

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

Bootstrap شما را از نوشتن کد CSS زیادی نجات می دهد و به شما زمان بیشتری را برای طراحی صفحات وب می دهد.

بوت‌استرپ محبوب‌ترین پروژه در GitHub است که توسط NASA و MSNBC و دیگر سایتهای مطرح استفاده شده است.

با استفاده از اطلاعات رابط برنامه‌نویسی (API) در بوت استرپ می‌توان اجزاء واسط پیشرفته مانند scrollspy و تکمیل کننده خودکار کلمات (typeahead) را بدون نیاز به نوشتن حتی یک خط کد جاوا اسکریپت ایجاد نمود.

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

آموزش گام به گام طراحی قالب وردپرس

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

1. Bootstrap’s Responsive Grid

با استفاده از بوت استرپ دیگر برای رمزگذاری شبکه خود وقت زیادی صرف نمی کنید – Bootstrap همراه با سیستم شبکه خود از پیش تعریف شده ارائه می شود!

اکنون می توانید همراه با سیستم شبکه از پیش تعریف شده Bootstrap مستقیماً به ایجاد محتویات خود بپردازید.

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

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

2. Bootstrap’s Responsive Images

بوت استرپ کد اختصاصی خود را برای تغییر اندازه خودکار تصاویر بر اساس اندازه صفحه فعلی ارائه می دهد.

فقط کافیست img-responsive را به تصاویر خود اضافه کنید ، و قوانین از پیش تعریف شده CSS از بقیه مراقبت می کند.

اجازه دهید بوت استرپ تصاویر شما را برای شما تغییر اندازه دهد

این حتی می تواند شکل تصاویر شما را با افزودن کلاسهایی مانند img-circle و img-round تغییر دهد ، و این بدون رفت و برگشت بین کد و نرم افزار طراحی شما است.

3. اجزای Bootstrap

بوت استرپ با تعداد کاملی از اجزای سازنده همراه است که می توانید به راحتی به صفحه وب خود بچسبانید ، از جمله:

میله های پیمایش
کرکره ای
میله های پیشرفت
عکسهای کوچک و …

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

4. Bootstrap’s JavaScript

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

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

5. مستندات Bootstrap

اسناد Bootstrap از بهترین مواردی است که من تاکنون دیده ام.

هر قطعه کد در وب سایت آنها با جزئیات صریح توصیف و توضیح داده شده است.

توضیحات همچنین شامل نمونه های کد برای پیاده سازی اساسی ، ساده سازی فرایند حتی برای مبتدیان مبتدی نیز می باشد.

تنها کاری که شما باید انجام دهید اینست که یک جز component را انتخاب کنید ، کد را در صفحه خود کپی و جایگذاری کنید.

6. قابلیت بوت استرپ

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

به عنوان مثال نسخه فعلی پرونده CSS Bootstrap با حجم عظیم 119 کیلوبایت است.

اگرچه این ممکن است در مقایسه با پرونده های تصویری و ویدئویی به خصوص زیاد به نظر نرسد ، اما برای یک فایل CSS بسیار زیاد است.

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

با رفتن به صفحه سفارشی و بارگیری آنها ، می توانید ویژگی هایی را که برای برنامه خود نیازی ندارید بررسی کنید ، وزن خود را کوتاه کنید و زمان بار اضافی را برای کاربران خود صرفه جویی کنید.

سفارشی سازی کلیدی است.

7. Bootstrap’s Community

همانند بسیاری از پروژه های منبع باز ، Bootstrap جامعه بزرگی از طراحان و توسعه دهندگان را پشت سر خود دارد.

میزبانی در GitHub باعث می شود تا توسعه دهندگان بتوانند کد Bootstrap را اصلاح کرده و به آن کمک کنند.

این امر همچنین باعث می شود افراد به راحتی بتوانند با یکدیگر همکاری کنند و با افراد دیگر و کاربران دیگر تعامل کنند.

8. الگوهای خارجی Bootstrap

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

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

بوت استرپ که یک فریم ورک front-end با استفاده از HTML، CSS و jQuery است، برای کمک به توسعه دهندگان وب طراحی شده است تا به سرعت و به راحتی وبسایت های واکنش گرا و سازگار با موبایل بسازند که با مرورگرهای مختلف سازگاری دارند. بوت استرپ که یک فریم ورک منبع باز است شامل یک Grid دوازده ستونه و کامپوننت های آماده استفاده است. در این دوره یک مرور کلی بر روی تمام قسمت های مهم این فریم ورک محبوب خواهیم داشت تا در شروع کار با بوت استرپ به شما کمک کنیم. در این دوره گزینه های نصب را پوشش می دهیم و استایل های اصلی را بررسی می کنیم که نحوه نمایش محتوا در پلتفرم ها و مرورگرهای مختلف را یکپارچه سازی می کنند. همچنین نحوه استفاده از سیستم flexbox grid را توضیح می دهیم تا بتوانید هر نوع صفحه بندی که بخواهید را انجام دهید، از کلاس های مختلف استفاده کنید تا در پروژه خود حرکت کنید و با مولفه های تعاملی مثل منوهای کشویی و گالری تصاویر و غیره کار کنید.

عناوین  دوره ” آموزش بوت استرپ ” به زبان فارسی و پروژه محور:

مقدمه

۱- خوش آمدگویی
۲- چیزهایی که باید بدانید
۳- استفاده از فایل های تمرینی

فصل اول – آغاز به کار

۱- مقدمه
۲- گزینه های نصب
۳- ساخت یک قالب ساده

فصل دوم – استفاده از استایل ساده

۱- بررسی استایل های ساده
۲- تایپوگرافی ساده
۳- ابزارهای تایپوگرافی
۴- Blockquoteها و لیست ها
۵- استفاده از رنگ ها در بوت استرپ
۶- کار با تصاویر

فصل سوم – کسب مهارت در طرح بندی با بوت استرپ

۱- مروری بر Layout
۲- Container ها و سطرها
۳- استفاده از ستون ها
۴- کلاس های چند ستونی
۵- آفست کردن ستون ها
۶- ستون های Nest شده
۷- ترتیب اختصاصی
۸- گزینه های ترازبندی grid
۹- خصوصیات نمایش
۱۰- گزینه های Flexbox Container
۱۱- المان های Flex انفرادی
۱۲- عناصر شناور
۱۳- Margin و Padding
۱۴- قابلیت رویت
۱۵- ابزارهای اندازه دهی

فصل چهارم – استفاده از ناوها و مولفه های ناوبار

۱- مروری بر Navbar
۲- ساخت ناوبری ساده
۳- ساخت یک Navbar
۴- استفاده از Branding و متن
۵- افزودن یک منوی کشویی به ناوبری
۶- افزودن المان های فرم
۷- کنترل کردن موقعیت
۸- ایجاد محتوای قابل بسته شدن

فصل پنجم – بررسی المان استایل

۱- بررسی المان Style ساده
۲- ساخت دکمه ها
۳- گروه های دکمه
۴- استفاده از Badge ها
۵- استایل های نوار پیشرفت
۶- گروه های لیست
۷- Breadcrumb ها

فصل ششم – استفاده از کامپوننت طرح بندی

۱- بررسی کامپوننت Layout
۲- افزودن یک Jumbotron
۳- استایل های جدول
۴- Layout های ساده Card
۵- کلاس های محتوای Card
۶- Layout های Card
۷- استفاده از شی Media

فصل هفتم – استفاده از استایل های فرم

۱- بررسی استایل های Form
۲- ساخت یک فرم ساده
۳- چک باکس ها و کلاس های Radio
۴- استایل های سایز و اعتبارسنجی
۵- فرم های چند ستونی
۶- ساخت گروه های Input

فصل هشتم – کار با کامپوننت های تعاملی

۱- بررسی کامپوننت های تعاملی
۲- افزودن Tooltip ها
۳- نمایش Popover ها
۴- ساخت Alert ها
۵- استفاده از منوهای Dropdown
۶- افزودن Collapse Accordion
۷- استفاده از Modal ها
۸- ساخت Carousel ها
۹- استفاده از ScrollSpy

فصل نهم – نتیجه گیری

۱- گام های بعدی

همراه با بهترین دوره های تخصصی آموزش Bootstrap به زبان انگلیسی :

–  دوره آموزشی ۳ ساعته ” آموزش Bootstrap : پروژه های عملی در بوت استرپ ”
Packt Publishing – Bootstrap 4 Projects

–  دوره آموزشی ۵ ساعته ” آموزش Bootstrap : توسعه سایتهای ریسپانسیو یا واکنش گرا”
Packt Publishing – Learn Bootstrap 4 Responsive Web Development

–  دوره آموزشی ۱ ساعته ” آموزش Bootstrap : نکات یادگیری بوت استرپ ”
Packt Publishing – Bootstrap 4 Recipes

–  دوره آموزشی ۴ ساعته ” آموزش Bootstrap 4 به صورت گام به گام ”
Packt Publishing – Learning Bootstrap 4

–  دوره آموزشی ۳ ساعته ” آموزش حرفه ای Bootstrap 4 سطح پیشرفته “
Packt Publishing – Mastering Bootstrap 4