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

Bootstrap چیست؟

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

بوت استرپ یک فریم ورک است. حال شاید بپرسید فریم ورک چیست؟ همانطور که از نامش پیداست، framework یک چارچوب برای کدنویسی به یک زبان خاص تعیین می‌کند. فریم‌ورک‌‌ها کار کدنویسی را بسیار ساده‌تر کرده و از طرفی باعث می‌شوند تا کد‌های استانداردتری بنویسیم.

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

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

تاریخچه کلمه Bootstrap چیست؟

جدای از بحث مربوط به طراحی وب و موارد مربوط به آن، عبارت Bootstrap به تنهایی به معنی “خود راه انداز” بوده و کلمه Bootstraping به معنی راه اندازی یک فرآیند بصورت مستقل و بدون استفاده از منابع خارجی می باشد. این عبارت در علم کامپیوتر کمی کوتاهتر شده و با عنوان Booting بکار میرود، که نشان دهنده فرآیند راه اندازی سیستم و واردسازی اطلاعات اولیه نرم افزار در حافظه کامپیوتر می باشد.

معرفی امکانات Bootstrap

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

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

با توجه به راست چین بودن نوشتار فارسی و تفاوت چیدمان مطالب با سایت های انگلیسی نیاز به تغییرات اساسی در کدهای CSS و توابع jQuery احساس میشود که در اینترنت سایت Bootstrap فارسی میتوانید دانلود کنید، اما خود سایت رسمی bootstrap فایل rtl یا راست چین در اختیار همه قرار داده است.

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

ریسپانسیو کردن صفحات با بوت‌استرپ بسیار ساده است. ریسپانسیو بودن به معنی نمایش صحیح وب‌سایت در تمام نمایشگرها از جمله موبایل و تبلت است. برای طراحی ریسپانسیو با بوت‌استرپ تنها کافی است کار با سیستم Grid آن را یاد بگیرید.

سیستم Grid صفحه را به ۱۲ ستون تقسیم می‌کند و شما می‌توانید محتوای وبسایت خود را با استفاده از این ستون‌ها کنار هم قرار دهید و نحوه چینش آنها در دستگاه‌های مختلف (دسکتاپ، تبلت، موبایل و…) را تعیین کنید.

برای مثال کد زیر دو ستون تعریف کرده است که هرکدام از آنها در دسکتاپ با اندازه ۶ ستون (نصف صفحه) و در موبایل با اندازه ۱۲ ستون (تمام صفحه) نمایش داده می‌شوند.

<div class="container">
 <div class="row">
 <div class="col-12 col-lg-6">
 <!-- First col content -->
 </div>
 <div class="col-12 col-lg-6">
 <!-- Second col content -->
 </div>
 </div>
</div>

کلاس container یکی از مهم ترین کلاس‌های بوت‌استرپ است که یک باکس نگهدارنده تعریف می‌کند. کلاس row در درون خودش ۱۲ ستون تشکیل می‌دهد. و با استفاده از کلاس‌های *-col می‌توان تعیین کرد که یک باکس در دستگاه‌های مختلف، فضای چند ستون را اشغال کند.

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

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

برای مثال می‌توان به ساخت دکمه‌هایی با رنگ‌های مختلف، تنها با اضافه کردن کلاس‌های از قبل تعیین شده، اشاره کرد.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

امیدوارم برای شما مفید بوده باشد.

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