آموزش نصب بوت استرپ و آشنایی با ویژگی‌های Bootstrap 4

آموزش نصب بوت استرپ و آشنایی با ویژگی‌های Bootstrap 4
آکادمی آی تی
آکادمی آی تی
dots

آموزش نصب بوت استرپ و آشنایی با ویژگی‌های Bootstrap 4

زمان مورد نیاز برای مطالعه 5 دقیقه

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

دپارتمان ‌ها: آموزش طراحی سایت
1399/01/30
6,078 بازدید

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


نصب  بوت استرپ

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

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

 

آموزش بوت استرپ 4آموزش مرتبط: آموزش بوت استرپ 4

 

آیا ترکیب دو فریم ورک لاراول و بوت استرپ امکان پذیر است؟

در حال حاضر با توجه به توسعه ابزارهای برنامه نویسی قابلیت نصب بوت استرپ در لاراول امکان پذیر شده است. بنابراین می‌توان با بهره گیری از فریم ورک bootstrap بسیاری از کدهای ریسپانسیو را در لاراول استفاده کرد. جهت آشنایی بیشتر با این مسئله باید خدمت شما عرض کنیم که لاراول فریم ورکی بر پایه php است که در واقع برای طراحی Back-end سایت‌ها استفاده می‌شود. حال در مقابل بوت استرپ دارای کدهای HTML، CSS و JS است که در واقع برای طراحی Front-end از آن استفاده می‌شود. 

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

 

لاراول چیست؟مقاله مرتبط: لاراول چیست؟

 

طریقه نصب بوت استرپ

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

دانلود بوت استرپ

 

حال بدون در نظر گرفتن شیوه دانلود، در روش cdn باید فایل‌های ذخیره شده از سایت را که به صورت CSS و جاوا اسکریپت است، به بخش HTML سایت وارد کنید. در این صورت باید فایل‌های CSS را داخل تگ <head> و فایل‌های JS را درون تگ <body> قرار دهید.

روش دیگر نیز دانلود فایل‌های CSS و Java Script مربوط به bootstrap و قرارگیری آن درون سایت است. با کمک این روش می‌توان پس از قرارگیری لینک درون سایت به راحتی از این فریم ورک استفاده کرد. پیش از دانلود فایل بوت استرپ باید نسخه مورد نظر آن را دانلود کنید که در حال حاضر نسخه 3 و 4 بوت استرپ بین برنامه نویسان از محبوبت بیشتری برخوردار است.
 

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

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

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

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

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

 

آموزش cssآموزش مرتبط: آموزش css

 

آشنایی با ویژگی‌های Bootstrap 4

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

علاوه بر ویژگی‌های گفته شده، برخی از ویژگی‌های دیگر نسخه 4 را جهت آشنایی بیشتر در این خصوص برای شما نام می‌بریم:

  •   تغییر سایز فونت‌های این نسخه از 14 پیکسل به 16 پیکسل
  •   تغییر در واحد اندازه گیری از پیکسل به rem
  •   امکان بازنویسی پلاگین‌های جاوا اسکریپت
  •    تغییر نام برخی از کلاس‌ها در این نسخه
  •    حذف پشتیبانی از آیکن‌ها
  •   استفاده از کامپوننت‌های جدید Cards
  •    حذف پشتیبانی از نسخه‌های قدیمی مرورگرهایی همچون اینترنت اکسپلورر 9 به پایین
  •    پشتیبانی از ویژگی Flexbox
  •   ارتقا از Less به Sass
  •    و غیره

حال که با ویژگی‌های نسخه بوت استرپ 4 آشنا شدید می‌توانید به سادگی در خصوص نصب آن اقدام کنید.
 

استفاده از بوت استرپ 4 خوب است یا بد؟

برخی از افراد در هنگام نصب بوت استرپ با این سوال مواجه می‌شوند که نسخه 4 آن خوب است یا بد؟ آیا یادگیری این فریم ورک کاربردی است یا خیر؟ و کلی سوال دیگر که ممکن است در هنگام نصب این فریم ورک ذهن افراد را درگیر کند. 
پیش‌تر در خصوص این فریم ورک و نحوه نصب بوت استرپ توضیحاتی را خدمت شما ارائه کردیم حال باید خدمت‌تان عرض کنیم که به کارگیری از این فریم ورک کاملا به نحوه کار و سایتی که قصد طراحی آن را دارید، بستگی دارد و اگر برنامه نویس Front-end هستید می‌توانید به سادگی از این فریم ورک بهره‌مند شوید.

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