قسمت اول bootstrap : اموزش نصب بوت استرپ

قسمت اول bootstrap : اموزش نصب بوت استرپ + ویدیو

باسلام، در این اموزش قصد داریم تا به بررسی اموزش نصب بوت استرپ و یا راه اندازی bootstrap در قدم اول بپردازیم.

برای دسترسی سریعتر به قسمت های مختلف این مقاله از لینک زیر میتوانید استفاده کنید.

شما با مراجعه به مقاله ی ” بوت استرپ چیست ؟ ” میتوانید اطلاعاتی درباره ی بوت استرپ و تاریخچه ی ان بدست اورید. اما در این مقاله نیز به مختصر به ان خواهیم پرداخت پس تا انتهای مقاله با ما همراه باشید تا از اطلاعات ارزشمند bootstrap باخبر شوید.

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

  • بوت استرپ یک فریم ورک رایگان است که برای ایجاد ظاهر هایی سریع و راحت استفاده میشود.
  • bootstrap شامل الگوهای طراحی مبتنی بر html و css برای تایپوگرافی, فرم‌ها, دکمه‌ها, جداول, ناوبری, برجستگی تصویر و بسیاری دیگر و همچنین متصل شونده‌های اختیاری جاوا اسکریپت است.
  • bootstrap همچنین به شما این اجازه را میدهد تا صفحات ریسپانسیو یا واکنشگرا نیز بسازید.

ریسپانسیو یا واکنشگرا چیست ؟

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

تفاوت بوت استرپ ۳ با بوت استرپ ۴

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

چرا از بوت استرپ استفاده کنیم؟

مزایای استفاده از bootstrap به شرح زیر است:

  • به راحتی استفاده کنید : هرکس با اندک دانشی درباره ی html و css میتواند از بوت استرپ استفاده کند.
  • طراحی واکنشگرا : شما قابلیت طراحی سایت برای گوشی های هوشمند و تلبت ها و … دارید.
  • اولین رویکرد تلفن همراه: در بوت استرپ، سبک های اولیه تلفن همراه بخشی از چارچوب هسته ای هستند.
  • سازگاری مرورگر: bootstrap 4 سازگار با تمام مرورگرهای مدرن (Chrome، Firefox، Internet Explorer 10+، Edge، Safari، Opera)

چگونه بوت استرپ را نصب کنیم ؟

برای استفاده از bootstrap در سایت خود ، شما دو راه خواهید داشت:

  • افزودن فایل های cdn bootstrap
  • دانلود از سایت getbootstrap.com

افزودن فایل های cdn bootstrap

اگر شما میخواهید فضای کمتری را اشغال کنید و فایل های bootstrap را در سایتتان قرار ندهید میتوانید از cdn ( Content Delivery Network) استفاده کنید.

MaxCDN پشتیبانی CDN برای CSS و جاوا اسکریپت Bootstrap را فراهم می کند. شما همچنین باید jQuery را وارد کنید:

یکی از مزایای استفاده از cdn

بسیاری از کاربران در حال بارگیری Bootstrap 4 از MaxCDN هنگام بازدید از یک سایت دیگر. در نتیجه، هنگام بازدید از سایت شما از حافظه پنهان بارگذاری می شود، که منجر به زمان بارگذاری سریعتر می شود. همچنین، بیشتر CDN ها اطمینان می دهند که یک بار که کاربر یک پرونده را از آن درخواست می کند، آن را از سرور نزدیک به آنها خدمت می شود، که همچنین به زمان بارگیری سریع تر منجر می شود.

jQuery and Popper چیست؟

bootstrap 4 از jQuery و Popper.js برای اجزای جاوا اسکریپت استفاده می کند (مانند modals، tooltips، popovers و غیره). با این حال، اگر شما فقط از بخش CSS بوت استرپ استفاده کنید، به آنها نیازی ندارید.

موارد زیر برای اجرا نیاز به jQuery دارند:

  • هشدارهای بسته
  • دکمه ها و جعبه ها / دکمه های رادیویی برای تعویض حالت ها
  • گردش برای اسلایدها، کنترل ها و شاخص ها
  • بستن و باز کردن جبعه محتوا
  • Dropdowns (همچنین نیاز به Popper.js برای موقعیت مطلوب)
  • Modals (باز و بسته)
  • Navbar (برای منوهای قابل انعطاف)
  • راهنمای ابزار و popovers (همچنین نیاز به پوپر.js برای موقعیت مطلوب)
  • Scrollspy برای رفتار حرکت و به روز رسانی ناوبری

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

برای دانلود bootstrap نیاز دارید تا به سایت https://getbootstrap.com مراجعه کنید و از طریق راهنمای سایت دانلود کنید.

ساخت اولین صفحه با استفاده از بوت استرپ ۴

۱٫استفاده از html 5

bootstrap از المان های html و css مبنی بر html5 استفاده کرده است. برای استفاده از html5 نیاز است تا ویژگی doctype را در ابتدا قرار دهید و همچنین ویژگی lang را به درستی تنظیم کنید:

۲٫ استفاده از حالت موبایل در bootstrap 4

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

برای اطمینان از رندر مناسب و لمس زوم، برچسب <meta> زیر را در داخل عنصر <head> اضافه کنید:

بخش width = device-width عرض صفحه را تعیین می کند تا به عرض صفحه نمایش دستگاه (که بسته به دستگاه متفاوت باشد) را دنبال کند.

مقیاس initial-scale=1 مقدار اولیه زوم را تنظیم می کند زمانی که اولین صفحه توسط مرورگر بارگیری می شود.

۳٫مخزن (containers)

bootstrap 4 همچنین نیاز به یک عنصر حاوی محتویات سایت را دارد.

برای استفاده از کلاس container دو حالت وجود دارد:

  • کلاس .container برای استفاده از ابعاد ثابت و واکنشگرا استفاده میشود.
  • کلاس .container-fluid برای استفاده تمام عرض در ابعاد مختلف استفاده میشود.

برای درک بهتر این موضوع به دو مثال زیر توجه کنید.

در مثال اول یک صفحه با ابعاد ثابت طراحی شده است

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

ویدیوی این قسمت

امیدوارم این اموزش هم مثل باقی اموزش ها برای شما عزیزان مفید واقع شده باشه.

برای دیدن نمونه های بیشتر میتوانید به سایت getbootstrap مراجعه فرمایید.

موفق و پیروز باشید.

برچسب ها : اموزش کامل بوت استرپ، بوت استرپ چیست

دیدگاه تازه ای بنویسید