بوت استرپ یا Bootstrap چیست و چه کاربردی دارد؟

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

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

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

تاریخچه بوت استرپ (Bootstrap)

 بوت استرپ توسط یک طراح و یک توسعه دهنده توییتر در سال 2011 ارائه شد و خیلی سریع به یکی از محبوب ترین فریم ورک های طراحی سایت و پروژه های منبع باز در جهان تبدیل شد. عبارت بوت استرپ به تنهایی به معنای "خود راه انداز" می باشد و کلمه Bootstrapping به معنای راه اندازی یک فرآیند به صورت مستقل و بدون استفاده از منابع خارجی می باشد. این عبارت در علم کامپیوتر کمی کوتاه تر شده است و با عنوان Booting به کار می رود، که فرآیند راه اندازی سیستم و وارد سازی اطلاعات اولیه نرم افزار در حافظه کامپیوتر را نشان می دهد.

بوت استرپ فریم ورک است یا کتابخانه؟

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

بوت استرپ فرانت اند است یا بک اند؟

بوت استرپ فقط و فقط برای فرانت اند استفاده میشه و هیچ کاری به بک اند نداره. فرقی نمیکنه بک اندت با چی نوشته شده باشه، PHP، لاراول، نود جی اس یا هر چیز دیگه ای. بوت استرپ فقط روی چیزی که کاربر میبینه تاثیر میذاره و کمک میکنه ظاهر سایتت مرتب، ریسپانسیو و استاندارد باشه.

بوت استرپ چطور کار میکند؟

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

فرض کن فقط میخوای یه کارت ساده با یه دکمه بسازی، بدون اینکه حتی یک خط CSS بنویسی:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container mt-4">
  <button class="btn btn-primary">کلیک کن</button>
</div> 

همین! تموم شد و رفت. البته اینجا دیگه خیلی خلاصه نوشتم برات. خودت میدونی که انقدر هم راحت نیست :)

سیستم گرید بوت استرپ

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

<div class="row">
  <div class="col-12 col-md-4">بخش ۱</div>
  <div class="col-12 col-md-4">بخش ۲</div>
  <div class="col-12 col-md-4">بخش ۳</div> </div>

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

کامپوننت های آماده در بوت استرپ

بوت استرپ کلی کامپوننت آماده داره که توی پروژه های واقعی خیلی کارت رو راه میندازه. دکمه، کارت، منو، مودال، فرم و از این جور چیزها.

<button class="btn btn-success">ثبت</button>

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

Utility Class ها در Bootstrap

Utility Class ها برای من جزو بهترین بخش های بوت استرپن. باهاشون فاصله، رنگ و چیدمان رو سریع عوض میکنی.

<div class="d-flex justify-content-center mt-3 text-danger"> متن وسط چین </div>

بدون نوشتن CSS، فلکس، فاصله بالا و رنگ متن تنظیم شد. همین سادگی سرعت کار رو بالا میبره.

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

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

<div class="container"> <div class="row"> <div class="col">محتوا</div> </div> </div>

همین ساختار ساده باعث میشه صفحه هم مرتب باشه هم ریسپانسیو. بدون دردسر مرورگرهای مختلف.

معایب بوت استرپ

اگه بوت استرپ رو خام استفاده کنی، سایتت خیلی شبیه بقیه سایت ها میشه. HTML هم بعضی وقت ها شلوغ میشه.

<button class="btn btn-primary btn-lg mt-3 px-4"> ارسال </button>

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

مقایسه بوت استرپ با Tailwind

بوت استرپ همه چی رو آماده بهت میده. Tailwind فقط ابزار میده و طراحی با خودته.

Bootstrap:

<button class="btn btn-primary">دکمه</button>

Tailwind:

<button class="bg-blue-500 text-white px-4 py-2"> دکمه </button>

بوت استرپ سریع تره، Tailwind کنترل بیشتری میده. انتخابش کاملا به پروژه بستگی داره.

بوت استرپ به درد چه کسایی میخوره؟

اگه تازه فرانت اند رو شروع کردی يا پروژه ای داری که بايد سريع جمع بشه، بوت استرپ انتخاب خوبیه.

<div class="alert alert-info"> پروژه سریع </div>

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

نصب و استفاده از بوت استرپ

ساده ترين راه استفاده از CDN هست. لينک رو اضافه میکنی و تموم.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

برای پروژه های بزرگ تر هم ميتونی با npm نصبش کنی و مديريت بهتری داشته باشی.

تفاوت بوت استرپ 4 و 5

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

بوت استرپ با جی کوئری، پایان دوران جی‌کوئری

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

واحدهای اندازه‌ گیری جدید Rem و Em

بوت استرپ ۵ تغییر عمده‌ای در واحدهای اندازه‌ گیری ایجاد کرده است. در حالی که بوت استرپ ۴ از واحد پیکسل (px) استفاده می‌کرد، نسخه ۵ به واحد های نسبی Rem و Em منتقل شده است. این تغییر به طراحان وب این امکان را می‌دهد که طراحی‌های خود را به صورت واکنش‌گرا و مقیاس‌ پذیر ایجاد کنند. واحدهای Rem و Em به طراحی‌ های بیشتر منعطف و سازگار با اندازه‌ های مختلف صفحه نمایش کمک می‌کنند و تجربه کاربری بهتری را به ارمغان می‌آورند.

پشتیبانی از طراحی راست‌ چین (RTL)

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

پالت‌های رنگی گسترده‌ تر

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

بازگشت آیکون‌ ها با نام Bootstrap Icons

بوت استرپ ۵ با معرفی مجموعه جدیدی از آیکون‌ها تحت نام Bootstrap Icons، یکی از ویژگی‌ های محبوب نسخه‌ های قبلی را به فریم‌ ورک خود بازگردانده است. این مجموعه شامل بیش از ۱۳۰۰ آیکون رایگان و متن‌ باز با فرمت SVG است که به توسعه‌ دهندگان این امکان را میدهد تا به راحتی از آیکون‌ های متنوع و با کیفیت در پروژه‌ های خود استفاده کنند. این آیکون‌ ها به سادگی در پروژه‌ های غیر بوت استرپی نیز قابل استفاده هستند.

بهبود های مهم در گرید و طرح‌بندی

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

محدودیت پشتیبانی از مرورگرهای قدیمی

بوت استرپ ۵ تصمیم گرفته است که از برخی مرورگرهای قدیمی دیگر پشتیبانی نکند. این تصمیم به منظور ارتقای عملکرد و بهینه‌سازی ویژگی‌ های جدید فریم‌ ورک اتخاذ شده است. مرورگرهایی مانند Internet Explorer نسخه‌های ۱۰ و ۱۱، مرورگرهای قدیمی فایرفاکس و کروم، و نسخه‌ های قدیمی سافاری دیگر در لیست مرورگرهای پشتیبانی شده قرار ندارند. این تغییر به توسعه‌ دهندگان این امکان را می‌دهد که از امکانات و استانداردهای مدرن‌ تر بهره‌ برداری کنند.

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

سخن آخر

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