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

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

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

Bootstrap محبوب ترین فریم‌ ورک (Framework) برای زبان CSS است که به کمک آن می توانید صفحات وب واکنش گرا (Responsive) طراحی کنید. این ابزار رایگان و منبع باز است پس به راحتی این امکان را دارید که فایلهای بوت استرپ را برای خود سفارشی سازی کنید!

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

بوت استرپ یک منبع رایگان از فریم وورک CSS است که به شما اجازه می دهد به طراحی وبسایت و نرم افزار های تحت وب موبایل واکنش گرا (Responsive) بپردازید. این منبع رایگان معمولا از تمپلت های رایگان CSS یا در مواردی توابع جاوا اسکریپت برای طراحی ابزارها و المان های گوناگون سایت همچون تایپوگرافی، دکمه ها، ستون‌ ها، تب ها و ناوبری استفاده می کند. بوت استرپ براساس رتبه بندی الکسا جزو 2000 برنامه برتر در آمریکا شناخته شده است.

اصلا فریم ورک یعنی چی؟

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

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

پشتیبانی وسیع

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

افزونه و قابلیت های فراوان

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

تم های آماده

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

متن باز (Open Source) بودن

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

سازگاری با مرورگرهای مختلف

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

صرفه جویی در زمان

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

هماهنگی در کدنویسی

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

طراحی ریسپانسیو

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

سازگاری با دیگر فریم ورک ها

بوت استرپ به خوبی با دیگر فریم ورک های محبوب نظیر React, Angular, jQuery و … سازگار و هماهنگ است.

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

حجم زیاد

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

وبسایت های مشابه

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

نیاز به بازنویسی

طرحی که باید پیاده کنید خیلی خاص است؟! راه حل ساده: از بوت استرپ استفاده نکنید چون باید تقریبا تمامی کد های آن را از نو بازنویسی کنید.

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

• باگ های مرورگر را کاهش می دهد
• چارچوبی ثابتی است که از بیشتر مرورگرها پشتیبانی می کند
• مشکل عدم سازگاری CSS را برطرف می سازد
• دارای حجم کم و قابل شخصی سازی است
• دارای ساختار ریسپانسیو و طرح های پیش ساخته است
• با استفاده از jQuery چندین پلاگین جاوا اسکریپت را به کاربر ارائه می دهد
• مستندات و اطلاعات آن به راحتی در فروم های کامپیوتری یافت می شود و از پشتیبانی خوبی بهره مند است
• قالب های حرفه ای رایگان بسیاری را در خود جای داده است و پلاگین ها و تم های متنوع وورد پرس را نیز به کاربر ارائه می دهد
• دارای سیستم ستون بندی فوق العاده ای است

آیا یاد گیری بوت استرپ ارزش دارد؟

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

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

بهتر از بوت استرپ؟

بزرگ ترین رقیب Bootstrap فریم ورکی با نام فونداسیون یا Foundation می باشد که با وجود اینکه نسبت به بوت استرپ طرفداران کمتری دارد اما فریم ورکی بسیار قدرتمند به شمار می رود. از دیگر فریم ورک های دانه درشت می توان به موارد زیر اشاره کرد:

• Semantic UI
• UIkit
• Materialize
• Bulma
• mini.css
• Material Design Lite
• Spectre
• Kube

تعدادی از پلاگین های بوت استرپ

هرچند بوت استرپ، فریم ورک بسیار کاملی است ولی باز ممکن است تمامی امکانات مورد نیاز شما را در دل خود نداشته باشد.

• Color Picker: اگر لازم است کاربران در بخشی از اپلیکیشن یا سایت شما رنگی را انتخاب کنند، پلاگین Color Picker می تواند این قابلیت را به آن اضافه کند.
• Bootstrap Validator: یک پلاگین ساده و جمع و جور جهت انجام راستی آزمایی فرم ها در Bootstrap.
• Responsive Pagination: اگر می خواهید لیست بلند بالایی از صفحات را در سایت خود نمایش دهید نگران نباشید چون پلاگین Responsive Pagination تمامی صفحات را به شکل کاملا ریسپانسیو برای شما نمایش می دهد.
• Bootstrap Tree View: همانطور که می دانید لیست های درختی برای دسترسی آسان به فایل ها و فولدر ها استفاده می شوند. اگر به چنین ساختاری در سایت یا اپلیکیشن تحت وب خود نیاز داشتید می توانید از این پلاگین استفاده کنید.
• Fuel FX: یکی از بهترین پلاگین های موجود برای بوت استرپ که جای خالی کامپوننت هایی چون قابلیت انتخاب تاریخ (Datepicker)، چک باکس و رادیو باکس سفارشی، لودر، کومبو باکس، دکمه جستجو، تقویم و غیره را برای شما پر می کند.
• EkkoLightbox: یکی دیگر از پلاگین های خوش ساخت که بر پایه ی مودال Bootstrap ساخته شده و امکان نمایش تصاویر، فیلم ها و دیگر انواع محتوا را در ساختار Lightbox به شما می دهد.

تاریخچه بوت استرپ

بوت استرپ که در آن زمان Twitter Blueprint نام داشت در ابتدا به عنوان ابزاری جهت تسهیل فرایند کدنویسی و ایجاد هماهنگی بین برنامه نویسان سایت توییتر استفاده می شد. با دیدن پتانسیل بالای بوت استرپ، سازندگان آن یعنی Mark Otto و Jacob Thornton تصمیم گرفتند نام این ابزار را به Bootstrap تغییر داده و به عنوان یک پروژه متن باز، در اختیار عموم قرار دهند.

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

• در 31 ژانویه 2012 بوت استرپ 2 عرضه شد. در این نسخه سیستم گرید 12 سطونه با قابلیت ریسپانسیو، پشتیبانی از مجموعه آیکون های Glyphicons و تعداد زیادی ابزار جدید به بوت استرپ اضافه گردید.
• در 19 ژانویه 2013 بوت استرپ 3 عرضه شد. در این نسخه طراحی رابط کاربری فریم ورک به شکل فلت درآمده و از فلسفه Mobile First پشتیبانی شد.
• در 29 اکتبر 2014 پروژه بوت استرپ 4 کلیک خورد. Bootstrap 4 به عنوان آخرین نسخه این فریم ورک پس از حدودا سه سال و سه ماه توسعه در تاریخ 18 ژانویه 2018 در اختیار عموم قرار گرفت (البته نسخه های Alpha و Beta زودتر عرضه شدند!)

ابزار کار و یادگیری با بوت استرپ

• Bootply: یکی از متداول ترین ابزار های کار و تمرین با بوت استرپ! این ابزار مثل یه جور زمین بازی میمونه.. میتونید انواع کدها، کلاس ها، کامپوننت ها، پلاگین و دیگر ابزار های بوت استرپ را به راحتی تست کرده و حتی ابزارهای مخصوص به خودتان را براساس این فریم ورک درست کنید.

• Codeply: همانند Bootply ولی با امکانات و رابط کاربری بهتر!

• Shoelace: اگر نوشتن کدهای گرید بوت استرپ برایتان دشوار است، قطعا این ابزار به کارتان می آید! Shoelace برای ایجاد ستون های بوت استرپ یک رابط گرافیکی در اختیار شما قرار داده و در انتهای کار، کد های HTML آن را برای شما آماده می کند – یعنی دیگر لازم نیست خودتان را درگیر کدهای شلوغ HTML کنید.

• Bootstrap Button Generator: نه به اندازه کدهای گرید، ولی کار کردن با دکمه های بوت استرپ برای عده ای واقعا دشوار است! این ابزار به شما اجازه می دهد مشخصات دکمه ی مورد نظر خود را به راحتی انتخاب کنید تا در نهایت کد HTML آن را در اختیار شما بگذارد.

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

• Bootmetro: اگر می خواهید از بوت استرپ جهت ساخت یک رابط کاربری مترو استایل استفاده کنید، این ابزار قطعا به کارتان خواهد آمد.

• JSFiddle: اگر برنامه نویس تحت وب باشید به احتمال زیاد تاکنون با این سایت آشنا شده اید! JSFiddle بیشتر به درد حرفه ای ها می خورد یا کسانی که خیلی سریع می خواهند قابلیتی را تست کرده و از عملکرد کدهای خود مطمئن شوند. اگر می خواهید از بوت استرپ استفاده کنید، باید ابتدا آن را به پروژه خود وارد کرده باشید.

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

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

• Grid: به جرات می توان گفت بهترین قابلیت Bootstrap، سیستم گرید آن می باشد که امکان سطون بندی محتوای صفحه را به شما می دهد. برای استفاده از گرید بوت استرپ باید به ترتیب کلاس های .container و .row و .col- را بکار ببرید.

• Navbar: بعید میدونم امروزه سایتی را پیدا کنید که از نوعی نوار پیمایشی در بالای خود استفاده نکرده باشد! ابزار Navbar بوت استرپ به شما اجازه می دهد با نوشتن چند خط کد ساده یک نوار پیمایشی کاملا ریسپانسیو را در سایت خود داشته باشید.

• Button: با وجود اینکه درست کردن دکمه ها با CSS کار شقل القمری نیست ولی اگر بخواهید دکمه هایی در حد دکمه های بوت استرپ را در سایت خود داشته باشید باید اقلا 30 دقیقه برای آن ها وقت بگذارید که خوشبختانه با استفاده از دکمه های این فریم ورک می توانید این 30 دقیقه زمان را برای خودتان ذخیره کنید.

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

• Table: اگر هیچ وقت حال استایل کردن مواردی چون جداول سایت تان را نداشتید خبر خوش اینکه تنها با اضافه کردن کلاس .table به جداول می توانید آن ها را استایل کنید.

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

• Tooltip: اگر می خواهید زمانی که موس را روی نوشته ای چیزی می برید اطلاعاتی در مورد آن باز شود، قطعا Tooltip به کارتان خواهد آمد.

• Popover: برخلاف Tooltip، پاپ آپ معمولا زمانی نمایش داده می شود که روی دکمه یا لینکی کلیک کنید و نسبت به Tooltip ساختار پیچیده تری دارد.

• Card: در آخرین نسخه بوت استرپ المان های Well, Panel و Thumbnail یکی شده و در ساختاری با عنوان Card یا کارت قرار گرفته اند. کارت ها امروزه به یکی از اصلی ترین اجزای وبسایت ها تبدیل شده و برای نمایش محتوای مختلفی چون پین ها، گالری، تیتر و خلاصه اخبار و غیره استفاده می شوند.

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

• Collapse: باز در آخرین نسخه بوت استرپ مهندسان آن دست به خلاقیت زده و تعدادی از قابلیت های شبیه به هم آن را یکی کرده اند. ابزار Collapse در نسخه 4 بوت استرپ جهت ایجاد تب و آکاردئون ها استفاده می شود.

• Media Object: مدیا آبجکت یکی از عناصر بسیار تکرار شونده در وب است که برای ساخت بخش هایی چون توئیت ها، نظرات و استاتوس ها بکار می رود.

• Jumbotron: تا به حال شده سایتی را باز کنید و به یک باره نوشته ای بزرگ با کمی پاراگراف مکمل و یک دکمه CTA روبروی تان ظاهر شود؟! به این ساختار می گویند Hero و بوت استرپ به آن می گوید Jumbotron.

• Toast: مدیریت پوش نوتیفیکیشن ها (Push Notification) در بوت استرپ توسط ابزار Toast انجام می شود.

• Progress: اگر می خواهید روند پیشرفت یک عملیات در سرور یا لود شدن فایلی چیزی را به کاربرتان نمایش دهید، قابلیت Progress بوت استرپ می تواند این کار را برایتان انجام دهد.

• Badge: همانند دکمه ها ساخت لیبل ها نیز با CSS به راحتی انجام می شود ولی ابزار Badge می تواند این زمان را برای شما صرفه جویی کند.

ویژگی های جالب Bootstrap 5

در نسخه Bootstrap 5 تغییرات اساسی ایجاد شده است که می توان از میان آن ها، به عدم پشتیبانی از مرورگر Internet Explorer و همچنین حذف jQuery از نیازمندی های اولیه اشاره کرد. Bootstrap اولین ابزار توسعه وب محسوب می شود که فاقد پشتیبانی از مرورگر Internet Explorer است. تغییرات دیگری نیز در بوت استرپ 5 به وجود آمده است که در ادامه برخی از برجسته ترین آن ها به طور جامع شرح داده شده اند:

• ویژگی‌های CSS سفارشی: با حذف پشتیبانی اینترنت اکسپلورر، می توان از ویژگی های CSS سفارشی استفاده کرد. توسعه دهندگان وب مدت زمان طولانی در محدودیت بودند؛ به دلیل اینکه مرورگر اینترنت اکسپلورر از ویژگی های سفارشی سازی پشتیبانی نمی کرد و با حذف پشتیبانی از آن در Bootstrap 5 این محدودیت رفع شد. ویژگی های CSS سفارشی این امکان را می دهند تا CSS به صورت منعطف تر و قابل برنامه‌ریزی تر باشد.

• بهبود سیستم صفحه‌بندی: به منظور اینکه طراحان سایت به راحتی بتوانند مانند بوت استرپ 4 با بوت استرپ 5 نیز کار کنند، بخش زیادی از سیستم ساخته شده در بوت استرپ 4 بدون تغییر باقی مانده و تنها بخش هایی از آن مثل صفحه بندی بهبود داده شده است.

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

• فرم کنترل‌های بهبود یافته: کنترل های فرم، گروه های ورودی و برخی امکانات دیگر در Bootstrap 5 بهبود پیدا کرده اند. در نسخه بوت استرپ 4، علاوه بر پیش فرض ارائه شده توسط هر مرورگر، از کنترل های فرم سفارشی نیز استفاده می شود. اما در Bootstrap 5، تمام این قابلیت ها به صورت شخصی سازی شده انجام می شوند. می توان برای همه دکمه های رادیویی (Radio Buttons)، کادر های تایید (Checkboxes)، فایل‌ ها و سایر موارد دیگر ظاهر و رفتار یکسانی در مرورگر های مختلف ایجاد کرد.

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