سیستم گرید در واقع ستون فقرات طراحی وب واکنش‌گرا در فریم‌ورک بوت استرپ محسوب می‌شود. این ساختار نامرئی اما قدرتمند به شما اجازه می‌دهد محتوای وب‌سایت‌تان را در انواع اندازه‌های صفحه‌نمایش، از کوچک‌ترین تلفن‌های هوشمند تا بزرگ‌ترین مانیتورهای دسکتاپ، به شکلی یکپارچه مرتب، تراز و سازمان‌دهی کنید. درک صحیح و استفاده مؤثر از گرید بوت استرپ برای ساخت طرح‌هایی که هم زیبا باشند و هم برای کاربر قابل استفاده، در هر نوع دستگاهی، بسیار حیاتی است.
این راهنمای جامع، شما را به عمق پیچیدگی‌های سیستم گرید بوت استرپ خواهد برد؛ فراتر از مفاهیم پایه‌ای سطر و ستون، برای باز کردن تمام ظرفیت آن در طراحی وب‌سایت‌هایی پیچیده و قابل انطباق.
اصول پایه: ردیف‌ها و ستون‌ها
در اصل، سیستم گرید Bootstrap بر پایه Flexbox ساخته شده و از ۱۲ ستون مساوی تشکیل می‌شود. به این معنا که فضای افقی موجود در یک عنصر والد، به ۱۲ ستون مساوی تقسیم می‌شود. شما می‌توانید محتوای خود را در هر تعداد از این ستون‌ها گسترش دهید تا انواع مختلفی از طرح‌ها را ایجاد کنید.
کانتینرها (Containers)
سیستم گرید درون کانتینرها کار می‌کند؛ این کانتینرها به شما اجازه می‌دهند محتوای سایت‌تان را در مرکز صفحه قرار داده و فاصله افقی مناسب برای آن فراهم کنید. Bootstrap دو نوع کانتینر اصلی دارد:
.container: یک کانتینر با عرض ثابت که در اندازه‌های مختلف صفحه (براساس Breakpointها) تغییر می‌کند و مقادیرmax-widthمشخصی دارد..container-fluid: یک کانتینر تمام‌عرض که در همه اندازه‌های صفحه، عرض کامل viewport را اشغال می‌کند.
ردیف‌ها (Rows)
محتوا به صورت افقی درون ردیف‌ها (با کلاس .row) سازمان‌دهی می‌شود. ردیف‌ها به عنوان پوششی برای ستون‌ها عمل کرده و هم‌ترازی افقی و فاصله‌گذاری بین آن‌ها را کنترل می‌کنند. ردیف‌ها از حاشیه‌های منفی (negative margin) استفاده می‌کنند تا پدینگ ستون‌ها را جبران کرده و محتوای درون آن‌ها به درستی درون کانتینر قرار بگیرد.
ستون‌ها (Columns)
محتوای واقعی شما درون ستون‌ها (با کلاس‌هایی مانند .col-*) قرار می‌گیرد. شما مشخص می‌کنید که هر بخش از محتوا چند ستون از ۱۲ ستون موجود را اشغال کند. به عنوان مثال:
.col-6برای اشغال ۶ ستون (نیمی از عرض).col-md-4برای اشغال ۴ ستون در صفحات با اندازه متوسط و بزرگ‌تر
نقاط شکست (Breakpoints): طراحی برای هر اندازه صفحه‌نمایش
سیستم گرید Bootstrap ذاتاً واکنش‌گرا است، به لطف استفاده از نقاط شکست (breakpoints) که محدوده‌هایی از عرض صفحه هستند و به شما اجازه می‌دهند طرح‌های ستونی متفاوتی برای انواع دستگاه‌ها پیاده‌سازی کنید. نقاط شکست پیش‌فرض در Bootstrap 5 به شکل زیر است:
- xs (خیلی کوچک): کمتر از ۵۷۶ پیکسل (موبایل‌ها) – به صورت پیش‌فرض با کلاس‌هایی مثل
.col-*اعمال می‌شود. - sm (کوچک): ۵۷۶ پیکسل به بالا (تبلت‌ها) – استفاده از
.col-sm-* - md (متوسط): ۷۶۸ پیکسل به بالا (دسکتاپ‌های کوچک) – استفاده از
.col-md-* - lg (بزرگ): ۹۹۲ پیکسل به بالا – استفاده از
.col-lg-* - xl (خیلی بزرگ): ۱۲۰۰ پیکسل به بالا – استفاده از
.col-xl-* - xxl (خیلی خیلی بزرگ): ۱۴۰۰ پیکسل به بالا – استفاده از
.col-xxl-*
ترکیب این کلاس‌های ستونی مربوط به Breakpointها، باعث می‌شود طرح شما به شکل داینامیک با اندازه صفحه‌نمایش سازگار شود:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- در موبایل تمام عرض، در md نصف عرض، در lg یک‌سوم عرض -->
</div>
<div class="col-12 col-md-6 col-lg-8">
<!-- در موبایل تمام عرض، در md نصف عرض، در lg دوسوم عرض -->
</div>
</div>
</div>
فراتر از ستون‌های پایه: ویژگی‌های پیشرفته گرید
۱. ستون‌های با عرض مساوی: استفاده از .col بدون شماره، باعث می‌شود عرض موجود به طور مساوی بین ستون‌ها درون ردیف تقسیم شود. برای مثال:
<div class="row">
<div class="col">ستون ۱</div>
<div class="col">ستون ۲</div>
<div class="col">ستون ۳</div>
</div>
۲. تنظیم عرض تنها یک ستون: می‌توانید عرض یک ستون را مشخص کرده و بگذارید بقیه به‌صورت خودکار فضای باقی‌مانده را پر کنند:
<div class="row">
<div class="col-8">۸ ستون</div>
<div class="col">عرض خودکار</div>
</div>
۳. محتوای با عرض متغیر: کلاس .col-auto باعث می‌شود ستون بر اساس عرض طبیعی محتوای خودش تنظیم شود، مناسب برای دکمه‌ها، برچسب‌ها و…
<div class="row">
<div class="col-auto">
<button class="btn btn-primary">دکمه</button>
</div>
<div class="col">فضای باقی‌مانده</div>
</div>
۴. ترتیب ستون‌ها (Ordering): با استفاده از کلاس‌هایی مثل .order-* می‌توانید ترتیب نمایش ستون‌ها را کنترل کنید، بدون اینکه ترتیب کد HTML را تغییر دهید:
<div class="row">
<div class="col-md-4 order-md-2">دوم در اندازه md به بالا</div>
<div class="col-md-4 order-md-1">اول</div>
<div class="col-md-4 order-md-3">سوم</div>
</div>
۵. افست (Offset): با استفاده از کلاس‌های .offset-* می‌توانید ستون‌ها را به سمت راست هل دهید:
<div class="row">
<div class="col-md-6 offset-md-3">وسط‌چین در اندازه md به بالا</div>
</div>
۶. فاصله بین ستون‌ها (Gutters): فاصله بین ستون‌ها توسط کلاس‌های کمکی gutter قابل کنترل است:
.gx-*برای فاصله افقی.gy-*برای فاصله عمودی.g-*برای هر دو
مثال:
<div class="row gx-5 gy-3">
<div class="col-6">...</div>
<div class="col-6">...</div>
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
۷. تو در تو کردن گریدها (Nesting): می‌توانید سیستم‌های گرید را درون هم تو در تو کنید:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
</div>
نکته: مجموع ستون‌های تو در تو هم باید ۱۲ را تشکیل دهند.
مثال ۱: ساختار پایه‌ای ردیف و ستون
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap Grid</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col { border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h1>Basic Grid Example</h1>
<div class="row">
<div class="col-md-4 border border-dark">Four columns on medium and up.</div>
<div class="col-md-8 border border-dark">Eight columns on medium and up.</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-3 border border-dark">Half on small, quarter on large.</div>
<div class="col-sm-6 col-lg-9 border border-dark">Half on small, three-quarters on large.</div>
</div>
<div class="row">
<div class="col">Evenly distributed column.</div>
<div class="col">Another evenly distributed column.</div>
<div class="col">And one more.</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
توضیح:
این مثال نشان می‌دهد:
- یک طرح دو ستونه ساده که در اندازه‌های متوسط و بزرگ‌تر به نسبت ۴/۸ تقسیم می‌شود.
- ستون‌هایی با عرض متفاوت در Breakpointهای مختلف (نصف عرض در صفحه‌های کوچک، تغییر به یک‌چهارم و سه‌چهارم در صفحات بزرگ).
- ستون‌های با عرض مساوی با استفاده از کلاس
.col.
مثال ۲: محتوای با عرض متغیر (.col-auto)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Col-Auto</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col { border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h1>Col-Auto Example</h1>
<div class="row">
<div class="col-auto">
<button class="btn btn-primary">Button</button>
</div>
<div class="col">This column takes the remaining space.</div>
</div>
<div class="row">
<div class="col-auto">Very long label</div>
<div class="col">This adjusts based on the label width.</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
توضیح:
در این مثال می‌بینید که چطور کلاس .col-auto عرض ستون را با توجه به محتوایش تنظیم می‌کند، در حالی که ستون کناری با کلاس .col بقیه فضای ردیف را پر می‌کند.
مثال ۳: تغییر ترتیب ستون‌ها (.order-*)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Column Ordering</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col { border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h1>Column Ordering Example</h1>
<div class="row">
<div class="col-md-4 order-md-2">Second on medium+</div>
<div class="col-md-4 order-md-1">First on medium+</div>
<div class="col-md-4 order-md-3">Third on medium+</div>
</div>
<div class="row">
<div class="col order-3">First (visually last)</div>
<div class="col order-1">Second (visually first)</div>
<div class="col order-2">Third (visually second)</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
توضیح:
در این مثال نحوه تغییر ترتیب ظاهری ستون‌ها با استفاده از کلاس‌های .order-* در Breakpointهای مختلف نمایش داده می‌شود. ردیف دوم نشان می‌دهد که چطور بدون مشخص کردن Breakpoint، ترتیب برای همه اندازه‌ها اعمال می‌شود.
مثال ۴: افست ستون‌ها (.offset-*)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Column Offsets</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col { border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h1>Column Offsets Example</h1>
<div class="row">
<div class="col-md-6 offset-md-3 border border-dark">Centered on medium and up.</div>
</div>
<div class="row">
<div class="col-sm-4 offset-sm-2 border border-dark">Offset by two columns on small and up.</div>
<div class="col-sm-4 border border-dark">Next column.</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
توضیح:
این مثال نحوه استفاده از کلاس‌های .offset-* را نشان می‌دهد تا فضای خالی در سمت چپ ستون ایجاد کرده و آن را به سمت راست هل دهد.
مثال ۵: فاصله‌گذاری بین ستون‌ها (Gutters: .g-*, .gx-*, .gy-*)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Gutters</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col { border: 1px solid #ccc; padding: 10px 0; background-color: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h1>Gutter Examples</h1>
<div class="row g-3">
<div class="col-6 border border-dark">Column with gutter</div>
<div class="col-6 border border-dark">Column with gutter</div>
<div class="col-6 border border-dark">Column with gutter</div>
<div class="col-6 border border-dark">Column with gutter</div>
</div>
<h2 class="mt-3">Horizontal Gutters Only</h2>
<div class="row gx-5">
<div class="col-6 border border-dark">Column with horizontal gutter</div>
<div class="col-6 border border-dark">Column with horizontal gutter</div>
<div class="col-6 border border-dark">Column with horizontal gutter</div>
<div class="col-6 border border-dark">Column with horizontal gutter</div>
</div>
<h2 class="mt-3">Vertical Gutters Only</h2>
<div class="row gy-4">
<div class="col-6 border border-dark">Column with vertical gutter</div>
<div class="col-6 border border-dark">Column with vertical gutter</div>
<div class="col-6 border border-dark">Column with vertical gutter</div>
<div class="col-6 border border-dark">Column with vertical gutter</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
توضیح:
در اینجا نحوه استفاده از کلاس‌های gutter را برای کنترل فاصله بین ستون‌ها می‌بینید:
.g-3برای فاصله افقی و عمودی.gx-5فقط برای فاصله افقی.gy-4فقط برای فاصله عمودی
مثال ۶: تو در تو کردن گریدها (Nesting Grids)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Nesting</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col { border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; }
.nested-col { border: 1px dashed blue; padding: 10px; background-color: #e0f7fa; }
</style>
</head>
<body>
<div class="container">
<h1>Grid Nesting Example</h1>
<div class="row">
<div class="col-md-8 bg-primary">
Main Content (8 columns)
<div class="row p-2">
<div class="col-6 nested-col bg-info">Nested Column 1 (6 of 8)</div>
<div class="col-6 nested-col bg-secondary">Nested Column 2 (6 of 8)</div>
</div>
</div>
<div class="col-md-4 bg-warning">Sidebar (4 columns)</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
توضیح:
این مثال نشان می‌دهد که چطور می‌توان یک گرید را درون یک ستون دیگر قرار داد. ستون‌های ردیف داخلی (۶ و ۶) در مجموع ۱۲ ستون هستند، اما این ۱۲ ستون نسبی به عرض ۸ ستونی والد خود هستند.
این مثال‌ها چه چیزی را نشان می‌دهند؟
این نمونه‌ها درک عملی از ویژگی‌های مختلف سیستم گرید Bootstrap را فراهم می‌کنند. با اجرای این کدها در مرورگر خود، می‌توانید به صورت بصری ببینید که چطور کلاس‌های مختلف بر چیدمان محتوای شما تأثیر می‌گذارند.
بهترین شیوه‌ها برای استفاده مؤثر از گرید
- از موبایل شروع کنید: طرح‌بندی را ابتدا برای کوچک‌ترین صفحه‌ها طراحی کرده و سپس با استفاده از کلاس‌های مخصوص Breakpoint، آن را برای دستگاه‌های بزرگ‌تر ارتقا دهید.
- ردیف‌ها را منسجم نگه دارید: اگرچه امکان تو در تو کردن وجود دارد، از پیچیده کردن بیش از حد ساختارها خودداری کنید.
- از Semantic HTML استفاده کنید: ساختار HTML شما باید از نظر semantic منطقی باشد. از کلاس‌های گرید برای چیدمان استفاده کنید، نه ظاهر به تنهایی داشته باشد.
- جریان محتوا را در نظر بگیرید: از کلاس‌های ترتیب‌دهی (ordering) به‌صورت هوشمندانه استفاده کنید تا ترتیب بصری محتوا با ترتیب منطقی خواندن تطابق داشته باشد و دسترسی‌پذیری حفظ شود.
- استفاده هوشمندانه از gutters: اندازه gutters را طوری تنظیم کنید که فاصله مناسب و جداسازی بصری بین عناصر ایجاد شود.
- به‌طور کامل تست کنید: همیشه طرح‌های خود را در دستگاه‌ها و اندازه‌های مختلف بررسی کنید تا از واکنش‌گرا بودن و انسجام ظاهری مطمئن شوید.
فراتر از محدودیت ۱۲ ستونه؟
اگرچه سیستم ۱۲ ستونه استاندارد است، می‌توانید با تکنیک‌هایی طرح‌هایی بسازید که به نظر می‌رسد این محدودیت را پشت سر گذاشته‌اند:
- عناصر تمام‌عرض: عناصر داخل یک ستون می‌توانند تمام عرض آن ستون را اشغال کنند، که به نوعی باعث می‌شود فراتر از تقسیم‌بندی ۱/۱۲ ظاهر شوند.
- هم‌پوشانی بصری: با استفاده از
positionدر CSS می‌توان عناصر را روی هم انداخت و طرح‌هایی ایجاد کرد که به خطوط گرید پایبند نیستند. البته از این روش با احتیاط استفاده کنید چون ممکن است پیش‌بینی‌پذیری طرح را مختل کند.
نتیجه‌گیری
سیستم گرید بوت استرپ یک ابزار بی‌جایگزین برای توسعه وب مدرن است. انعطاف‌پذیری، واکنش‌گرایی و قابلیت‌های جامع آن به شما امکان می‌دهد تا به راحتی طرح‌هایی پیچیده و قابل انطباق ایجاد کنید. با درک اصول پایه‌ای، کاوش در امکانات پیشرفته و پیروی از بهترین شیوه‌ها، می‌توانید مهارت خود را در طراحی گسترش داده و تجربه‌ای عالی برای کاربران در همه دستگاه‌ها رقم بزنید. قدرت گرید را در آغوش بگیرید و سطح جدیدی از کنترل و خلاقیت را در گردش‌کار طراحی وب خود باز کنید.