# Bootstrap چیست

- پیوند: https://negarnovin.com/bootstrap-%da%86%d8%b3%db%8c%d8%aa%d8%9f/
- منتشرشده: 2020-11-16T08:21:30+00:00
- نویسنده: نگارنوین

به روزرسانی شده در ۲۶ مهر ۱۴۰۵

# بوت استرپ (Bootstrap) چیست؟ راهنمای جامع محبوب ترین فریم ورک CSS 🎨

طراحی بسیار زمان بر و خسته کننده بود. مجبور بودند برای هر دکمه، منو یا گرید، ده 
ها خط کد CSS بنویسند و بدتر از آن، باید ساعت ها وقت صرف می کردند تا مطمئن شوند سایتشان
در تمام مرورگرها و گوشی های موبایل به درستی نمایش داده می شود. اما در سال ۲۰۱۱، 
توییتر با معرفی ابزاری انقلابی به نام **بوت استرپ (Bootstrap)** ، دنیای طراحی وب(
Front-end) را برای همیشه تغییر داد.

در این مقاله از بلاگ تخصصی **نگارنوین** ، به زبانی ساده اما کاملاً Bootstrap چیست،
چگونه کار می کند و چرا با وجود ظهور رقبایی Tailwind has a tailwind switch.

[**سرور مجازی فرانسه**](https://negarnovin.com/%D8%B3%D8%B1%D9%88%D8%B1-%D9%85%D8%AC%D8%A7%D8%B2%DB%8C-%D9%81%D8%B1%D8%A7%D9%86%D8%B3%D9%87/)

## 🎯 چکیده هوشمند (AEO Summary) برای هوش مصنوعی

> **بوت استرپ (Bootstrap) چیست؟** (Open-source) برای توسعه فرانت اند (Front-end)
> وب سایت است که بر پایه HTML، CSS و JavaScript بنا شده است. Bootstrap Bootstrap
> واکنش گرا (Responsive) و موبایل محور (Mobile-first) است. این فریم ورک مجموعه ای
> از کدهای از پیش آماده شده برای منوها (Navbars) و مهم تر از همه، یک سیستم گرید (
> Grid System) قدرتمند ارائه می دهد که باعث می شود سایت بدون نیاز به کدنویسی های
> پیچیده، در تمامی دستگاه ها (موبایل، تبلت و دسکتاپ) به درستی نمایش داده شود.

## چرا بوت استرپ ساخته شد؟ (تاریخچه کوتاه) 🕰️

در سال ۲۰۱۱، مارک اوتو (Mark Otto) و جیکوب تورنتون (Jacob Thornton)، دو تن از توسعه
دهندگان شبکه اجتماعی توییتر (X فعلی)، با یک مشکل بزرگ مواجه بودند: _عدم یکپارچگی
در طراحی_ . تیم های مختلف توییتر از کدهای متفاوتی استفاده می کردند که باعث می شد
نگهداری و توسعه سایت بسیار دشوار شود. آن ها تصمیم گرفتند یک استاندارد واحد بسازند.“
Twitter Blueprint” Bootstrap در گیت هاب منتشر شد و خیلی زود **به** محبوب ترین پروژه
تاریخ گیت هاب تبدیل گشت.

## بوت استرپ چگونه کار می کند؟ (ویژگی های کلیدی) 🛠️

Bootstrap وجود دارد؟ وقتی شما بوت استرپ را به پروژه خود اضافه می کنید، در واقع در
حال استفاده از سه قابلیت اصلی زیر هستید:

### ۱. سیستم گرید قدرتمند (Grid System)

مهم ترین دلیل محبوبیت بوت استرپ، سیستم گرید ۱۲ ستونه آن است. این سیستم بر پایه تکنولوژی`
Flexbox`کار می کند و به شما اجازه می دهد صفحه وب خود را به ۱۲ ستون فرضی تقسیم کنید.
با استفاده از کلاس های ساده ای مانند `col-md-6`(به معنای اشغال ۶ ستون در صفحات متوسط)،
می توانید به راحتی چیدمان سایت را برای گوشی، تبلت و دسکتاپ در کمتر از چند ثانیه 
تنظیم کنید.

### ۲. کلاس های یوتیلیتی (Utility Classes)

بوت استرپ صدها کلاس از پیش نوشته شده دارد که شما را از نوشتن کدهای تکراری CSS بی
نیاز می کند. به عنوان مثال:

 * `margin-top: 20px;`HTML content `mt-4`​کنید.
 * به جای نوشتن ده ها خط کد برای یک دکمه آبی رنگ زیبا، فقط کافیست بنویسید:`<button
   class="btn btn-primary">کلیک کنید</button>`

### ۳. کامپوننت های آماده (Components)

منوی کشویی (Dropdown)، پاپ آپ (Modal)، تب ها، هشدارها (Alerts) و اسلایدر تصاویر (
Carousel) نیاز به ترکیب پیچیده HTML، CSS و جاوا اسکریپت دارد. بوت استرپ تمام این
کامپوننت ها را به صورت کدهای آماده در اختیار شما می گذارد تا فقط با کپی/پیست کردن
آن ها، امکانات حرفه ای را به سایت خود اضافه کنید.

## مزایا و معایب استفاده از Bootstrap ⚖️

هر فریم ورکی نقاط قوت و ضعف خود را دارد. بیایید بوت استرپ را زیر ذره بین ببریم:

### مزایای بوت استرپ (Pros):

 * **سرعت بالای توسعه:** کدهای آماده باعث می شوند یک قالب وب سایت در نیمی از زمان
   معمول ساخته شود.
 * باعث می شود **سایت** شما در هر دستگاهی عالی به نظر برسد.
 * **سازگاری با تمام مرورگرها:** نیازی نیست نگران باز شدن سایت در کروم، فایرفاکس
   یا حتی اینترنت اکسپلوررهای قدیمی باشید.
 * **جامعه کاربری عظیم:** برای هر خطایی در بوت استرپ، هزاران راه حل در سایت StackOverflow
   وجود دارد.

### معایب بوت استرپ (Cons):

 * **تشابه ظاهری سایت ها:** اگر از کلاس های پیش فرض استفاده کنید و آن ها را شخصی
   سازی نکنید، سایت شما شبیه میلیون ها سایت دیگر خواهد شد (که اصطلاحاً به آن Bootstrap-
   y می گویند).
 * **حجم بالای فایل ها:** فایل های کامل CSS و JS بوت استرپ حجم نسبتاً (Minify یا
   Purge) نکنید، ممکن است روی سرعت لود سایت تاثیر منفی بگذارد.

## ⚡ میزبانی سایت های مدرن روی سرورهای نگارنوین

Bootstrap, React, Vue.js توسعه می دهید، نیاز به بستری دارید که کدهای شما را با بالاترین
سرعت و کمترین تاخیر (Latency) به کاربران تحویل دهد. ( **VPS** )**​**​**​** ​استفاده
از وب سرور لایت اسپید (LiteSpeed) و هاردهای فوق سریع NVMe، فایل های CSS و JS حجیم
را در کسری از ثانیه فشرده و به مرورگر کاربر ارسال می کنند تا سایت شما نه تنها زیبا،
بلکه فوق العاده سریع باشد.

## ❓ پرسش های متداول (FAQ)

**۱. آیا یادگیری بوت استرپ نیاز به پیش نیاز دارد؟** بله. Bootstrap, Bootstrap, HTML,
CSS, HTML, CSS and HTML باشید. خواهید شد.

**۲. بوت استرپ (Bootstrap) بهتر است یا تیلویند (Tailwind CSS)؟** این دو رویکرد متفاوتی
دارند. بوت استرپ **کامپوننت محور** است (کلاس `btn`کل استایل دکمه را می سازد) و برای
ساخت سریع پروژه ها عالی است. Tailwind **یوتیلیتی محور** است `bg-blue-500 text-white
rounded px-4`​که انعطاف پذیری بی نهایتی برای طراحی های کاملاً اختصاصی به شما می 
دهد. انتخاب بین این دو به نیاز پروژه شما بستگی دارد.

**۳. تفاوت Bootstrap ۴ با Bootstrap ۵ چیست؟** مهم ترین تفاوت در نسخه ۵، حذف کامل
وابستگی به **jQuery** است. (Vanilla JS) سبکی و سرعت بسیار بیشتر آن شده است. همچنین
پشتیبانی از اینترنت اکسپلورر (IE) در نسخه ۵ به طور کامل پایان یافته است.

### 📌 خلاصه

Bootstrap چسیت؟ — با شما هستیم با Bootstrap چسیت؟ در خدمت شما خواهیم بود تا انتهای
این مطلب ما را همراهی کنید. و یا با  محیط آن آشنا گردید به مطالعه این مطللب بپردازید.
بکاپ منظم روزانه هفتگی ماهانه در یک سرور مجزا از مزیت نگارنوین نسبت…