معنی اعداد در col-md-4، col-xs-1 و col-lg-2 در بوت استرپ چیه؟
Meaning of numbers in col-md-4, col-xs-1, col-lg-2 in Bootstrap?
در کدهای بوت استرپ، از کلاس‌های مختلفی مثل col-md-4، col-xs-1 و col-lg-2 استفاده میشه. می‌خواستم بدونم این اعداد دقیقا چه معنی ای دارن و چطور میشه ازشون استفاده کرد؟ این اعداد چه تاثیری روی طراحی صفحه دارن و چطور میتونم از این کلاس‌ها به درستی استفاده کنم؟
در بوت استرپ، کلاس‌هایی مثل col-md-4، col-xs-1 و col-lg-2 برای طراحی ریسپانسیو استفاده میشن. این کلاس‌ها ترکیبی از یک پیشوند اندازه صفحه نمایش (مثل xs، sm، md، lg) و یک عدد هستن.
پیشوندها اندازه‌های مختلف صفحه نمایش رو مشخص میکنن:
xs: برای صفحه‌های خیلی کوچیک (مثل موبایل) با عرض کمتر از 576px.
sm: برای صفحه‌های کوچیک (مثل تبلت) با عرض بین 576px و 768px.
md: برای صفحه‌های متوسط (مثل تبلت‌ها یا لپ‌تاپ‌های کوچیک) با عرض بین 768px و 992px.
lg: برای صفحه‌های بزرگ (مثل لپ‌تاپ‌های بزرگ یا دسکتاپ) با عرض بین 992px و 1200px.
اعداد (مثل 4، 1، 2) تعداد ستون‌هایی رو که اون عنصر اشغال می‌کنه از مجموع ۱۲ ستون موجود تو گرید بوت استرپ مشخص می‌کنه. مثلا:
col-md-4 یعنی این عنصر در یک صفحه با سایز md (بین 768px و 992px)، ۴ تا از ۱۲ ستون گرید رو اشغال می‌کنه.
col-xs-1 یعنی این عنصر در صفحه‌های خیلی کوچیک (کمتر از 576px)، ۱ تا از ۱۲ ستون رو اشغال می‌کنه.
col-lg-2 یعنی این عنصر در صفحه‌های بزرگ (بین 992px و 1200px)، ۲ تا از ۱۲ ستون رو می‌گیره.
خلاصه بگم ، این اعداد تعیین میکنن که چقدر از عرض صفحه به هر عنصر داده بشه و چطور این عناصر بر اساس اندازه صفحه ریسپانسیو بشن.