چه زمانی باید از container و row در بوت استرپ استفاده کنم؟
When should I use container and row in Bootstrap?
سلام من دارم از بوت استرپ استفاده میکنم و یه سوالی برام پیش اومده. من میخوام بدونم چه موقع هایی باید از container و row استفاده کنم؟ بعضی جاها دیدم که هر دوی این‌ها با هم استفاده میشن، ولی دقیقا نمیدونم چه زمانی این کار ضروریه و چه زمانی نه. ممنون میشم اگه راهنمایی کنید.
سلام سوال خیلی خوبی پرسیدی. استفاده از container و row توی بوت استرپ به این بستگی داره که چطور میخوای محتواتو تو صفحه نمایش بدی و بچینی. بیا بهشون دقیق تر نگاه کنیم
container یه کلاس اصلیه که به ما کمک میکنه تا محتوا رو تو صفحه به طور منظم بچینیم. این کلاس در واقع یه باکس مرکزی ایجاد میکنه که همه محتوا داخلش قرار میگیره و خودش به صورت خودکار margin های لازم رو برای وسط چین کردن محتوا به صفحه اضافه میکنه. دو نوع کانتینر داریمcontainer ثابت عرضش بر اساس breakpoint بوت‌استرپ تغییر میکنه. container-fluid عرضش همیشه ۱۰۰ درصد عرض صفحه رو میپوشونه.
row هم یه کلاس دیگه است که معمولا داخل container قرار میگیره و به ما کمک میکنه تا محتوا رو به صورت افقی در قالب ستون‌ها بچینیم. این کلاس با استفاده از flexbox مطمئن میکنه که ستون‌ها به درستی کنار هم چیده بشن و از فضای موجود بهترین استفاده رو بکنن. row به ستون ها دستور میده که چجوری کنار هم قرار بگیرن و negative margin رو برای تنظیم کردن ستون‌ها نسبت به لبه container اضافه میکنه.
مثال کاربردی:
فرض کن میخوای یه صفحه ساده با سه ستون داشته باشی. این‌جا ترکیب container و row خیلی به کارت میاد
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Grid Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
<div class="col">
Column 3
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
تو این مثال، یه container استفاده شده که محتوا رو وسط چین میکنه و یه row داریم که سه تا ستون داخلش قرار گرفتن. بوت‌استرپ به طور خودکار ستون‌ها رو کنار هم میچینه و بهشون فضای مساوی میده.
همیشه سعی کن row رو داخل container بذاری تا از negative margin به درستی استفاده بشه.
container-fluid رو زمانی استفاده کن که میخوای محتوای صفحه کل عرض صفحه رو بپوشونه.
col ها داخل row استفاده میشن و میتونن اندازه های مختلفی داشته باشن (مثلاً col-6 برای گرفتن نصف عرض row).