Bootstrap چیست؟
Bootstrap یک فریم ورک (framework) محبوب برای زبان CSS است که به کمک آن می‌توانید صفحات وب واکنش‌گرا (responsive) طراحی کنید. در حال حاضر Bootstrap 4 آخرین نسخه بوت استرپ است.
طراحی ریسپانسیو با 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 می‌توان تعیین کرد که یک باکس در دستگاه‌های مختلف، فضای چند ستون را اشغال کند.