مشاوره رایگان کسب و کار اینترنتی

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

Bootstrap چیست

چکیده‌ی مطلب

۲۷ مرداد ۱۳۹۸ ۲۴۷ بازدید 5 دقیقه
بوت استرپ یک فریم ورک CSS است که در ساخت صفحات وب واکنش گرا (responsive) کاربرد گسترده‌ای دارد.

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

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

طراحی واکنش‌گرا چیست؟ چرا باید سایت ریسپانسیو باشد؟


Bootstrap چیست؟

Bootstrap یک فریم‌ ورک (framework) محبوب برای زبان CSS است که به کمک آن می‌توانید صفحات وب واکنش‌گرا (responsive) طراحی کنید. در حال حاضر Bootstrap 4 آخرین نسخه بوت استرپ است.

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

اگر تازه‌کار هستید و نمی‌دانید CSS چیست، خواندن مقاله زیر برای شما واجب است!

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


پشتیبانی مرورگر‌ها از بوت استرپ

همانطور که گفته شد Bootstrap 4 در حال حاضر آخرین نسخه بوت استرپ است. این نسخه در تمام مرورگر‌های بزرگ غیر از Internet Explorer 9 پشتیبانی می‌شود.

اگر می‌خواهید وبسایت شما در IE9 و IE8 هم پشتیبانی شود باید از Bootstrap 3 استفاده کنید.

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

ریسپانسیو کردن صفحات با بوت‌استرپ بسیار ساده است. تنها کافی است کار با سیستم Grid آن را یاد بگیرید.

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

bootstrap grid
سیستم Grid در بوت استرپ


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


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

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

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

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


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

نظرات کاربران

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

نشانی ایمیل شما منتشر نخواهد شد.