تبلیغات

مراحل شروع آموزش فارسی bootstrap

BOOTSTRAP8

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

بوت استرپ یکی از محبوب ترین کتابخانه های فرانت اند است که قالب های قابل تنظیم HTML، CSS و JS را برای ایجاد وب سایت های واکنش گرا و مدرن ارائه می دهد.

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

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

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

Bootstrap یک فریم ورک فرانت اند اوپن سورس است که از طراحی مبتنی بر CSS و HTML استفاده می کند. این یک فریم ورک محبوب است که فقط با برنامه های کاربردی از جمله توپوگرافی، فرم ها، اجزای جلویی و پلاگین های جاوا اسکریپت سروکار دارد.

یکی از محبوب ترین فریم ورک ها است و از نظر تعداد پروژه ها در GitHub در رتبه دوم قرار دارد. Bootstrap توسط Mark Otto و Jacob Thornton برای ایجاد سازگاری بین بسیاری از کتابخانه ها در توسعه وب ایجاد شد. آخرین نسخه، Bootstrap 4، در سال 2014 منتشر شد و ویژگی های جدید به طور مداوم اضافه خواهد شد.

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

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

چرا Bootstrap یاد بگیریم؟

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

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

مزایای اصلی Bootstrap به شرح زیر است:

  • استفاده آسان : هر کسی که دارای دانش اولیه در مورد HTML و CSS باشد می تواند از Bootstrap استفاده کند.
  • واکنش گرا : به راحتی با بوت استرپ می توان سایت های واکنش گرا و سازگار با موبایل و تبلت ایجاد نمود.
  • کدنویسی سریع : یکی از مزایای اصلی استفاده از Bootstrap سرعت توسعه است
  • قابلیت سفارشی سازی : با استفاده از بوت استرپ طراحی هر نوع صفحه ای آسان خواهد شد.
  • پشتیبانی : از آنجایی که Bootstrap دارای یک انجمن پشتیبانی بزرگ است، در صورت بروز هر گونه مشکلی می توانید کمک بگیرید.
  • و …

معایب Bootstrap

اگرچه مزایای بوت استرپ بسیار جذاب و کاربردی است ، اما معایبی داشته که باعث شده در برخی از سایت ها از آن استفاده نکنند. در ادامه به آن ها می پردازیم :

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

چگونه آموزش فارسی bootstrap را شروع کنیم ؟

همانطور که در ابتدا توضیح دادیم آشنایی با دو زبان فرانت اند CSS و HTML یکی از مهم ترین پیش نیاز های بوت استرپ می باشد. به همین دلیل پیش از شروع یادگیری بوت استرپ بهتر است این دو زبان را یاد بگیرید.

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

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

آموزش فارسی bootstrap

برای شروع آموزش بوت استرپ باید با مفاهیم اولیه ان آشنا شوید در زیر انواع شبکه یا Grid در بوت استرپ را معرفی می کنیم.

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

آموزش فارسی bootstrap

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

آموزش فارسی bootstrap

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

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

1- کانتینر ( Container )

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

  • فیکس ( Fixed ) : به محض رسیدن به نقاط شکست مشخص شده، ناگهان تغییر می کند.
  • فلوید ( Fluid ) : تغییر صاف و نرم

2- ردیف ( Row )

خط تقسیم افقی صفحه را نشان می دهد که در ردیف bootstrap دارای 15 برابر حاشیه منفی در هر طرف است.

3- ستون ( Column )

ستون ها تقسیمات عمودی روی صفحه هستند. پدینگ 15x ستون کمک می کند تا محتوا به خوبی در ستون قرار گیرد.

آموزش فارسی نصب bootstrap

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

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

گام اول:

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

https://getbootstrap.com را در نوار آدرس تایپ کنید و Enter یا Return را در صفحه کلید خود فشار دهید.

نصب بوت استرپ

گام دوم :

روی دکمه دانلود کلیک کنید. با این کار صفحه “دانلود” باز می شود.

نصب بوت استرپ

گام سوم :

بر روی دکمه دانلود در زیر تیتر “Compiled CSS and JS” کلیک کنید. با این کار فایل های کامل Bootstrap به عنوان یک فایل ZIP در رایانه شما دانلود می شود.

نصب بوت استرپ

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

گام چهارم :

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

نصب بوت استرپ

با این کار دو پوشه با نام “css” و “js” استخراج می شود.

گام پنجم :

نصب بوت استرپ

پوشه های استخراج شده را به همان پوشه فایل های HTML وب سایت خود منتقل کنید. پوشه ای را که حاوی تمام فایل های HTML وب سایت است باز کنید و فایل های “css” و “js” در آن کپی کنید تا به همان پوشه ای منتقل کنید که اسناد وب سایت شما قرار دارد.

گام ششم :

روی فایل HTML که می خواهید در آن از Bootstrap استفاده کنید کلیک راست کنید و آن را با Notpad اجرا کنید.

نصب بوت استرپ

گام هفتم :

پیوندهای Bootstrap را به هدر فایل HTML خود اضافه کنید. قبل از استفاده از کد Bootstrap در کد HTML خود، باید خطوط زیر را در هدر کد خود وارد یا جایگذاری کنید:

نصب بوت استرپ

<link rel=”stylesheet” a href=”css/bootstrap.css”/>
<script src=”js/bootstrap.js/>

همچنین اگر می خواهید فایل های دیگری را از پوشه‌های css و js متصل کردهو از آن ها استفاده کنید، می توانید خطوط جدیدی را به هدر اضافه کنید و قسمت‌های css/bootstrap.css و js/bootstrap.js را با نام فایل های مورد نظر جایگزین کنید.

گام هشتم :

نصب بوت استرپ

محل قرارگیری پیوند Bootstrap خود را در کد بررسی کنید. در هدر HTML، هر دو خط باید بین خطوط <meta> و خطوط <title> قرار گیرند.

هنگامی که این خطوط را به هدر اضافه کردید، می توانید از عناصر Bootstrap در این فایل HTML استفاده کنید.

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

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

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

 

 

تبلیغات

ارسال دیدگاه

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