بوت استرپ ( Bootstrap ) چیست؟
چند سالی است که در طراحی وب سایت بحث واکنش‌گرا یا همان responsive بودن برای صفحات وب بسیار مهم شده است.
در مقالات قبلی درمورد صفحات وب ریسپانسیو صحبت کردیم و آن را کاملا شرح دادیم. با این حال، اگر با مفهوم واکنش‌گرایی آشنایی ندارید حتما مقاله زیر را بخوانید:
Bootstrap چیست؟
بوت استرپ Bootstrap یک فریم ورک (framework) محبوب برای زبان CSS است که به کمک آن می‌توانید صفحات وب واکنش‌گرا (responsive) طراحی کنید. در حال حاضر Bootstrap 5 آخرین نسخه بوت استرپ است.
حال شاید بپرسید فریم ورک چیست؟ همانطور که از نامش پیداست، framework یک چارچوب برای کدنویسی به یک زبان خاص تعیین می‌کند. فریم‌ورک‌‌ها کار کدنویسی را بسیار ساده‌تر کرده و از طرفی باعث می‌شوند تا کد‌های استانداردتری بنویسیم. برای درک بهتر موضوع ابتدا مطالعه‌ی مقاله‌ی زیر را پیشنهاد میکنم.
پشتیبانی مرورگر‌ها از بوت استرپ
همانطور که گفته شد Bootstrap 5 در حال حاضر آخرین نسخه بوت استرپ است. این نسخه در تمام مرورگر‌های بزرگ غیر از Internet Explorer 9 پشتیبانی می‌شود.
اگر می‌خواهید وبسایت شما در IE9 و IE8 هم پشتیبانی شود باید از Bootstrap 3 استفاده کنید.
طراحی ریسپانسیو با 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”>Basic</button>
<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-info”>Info</button>
<button type=“button” class=“btn btn-warning”>Warning</button>
<button type=“button” class=“btn btn-danger”>Danger</button>
<button type=“button” class=“btn btn-dark”>Dark</button>
|
این تنها گوشه کوچکی از قدرت این فریم ورک محبوب است. برای یادگیری این فریم ورک می‌توانید به وبسایت رسمی Bootstrap مراجعه کنید.