پرسش
تفاوت های col-lg ، col-md و col-sm در بوت استرپ چیه؟
What is the difference among col-lg , col-md, and col-sm in Bootstrap?
سلام تفاوت های بین کلاس‌های col-lg ، col-md و col-sm در بوت استرپ چیه؟ لطفا توضیح بدید که هرکدوم از این کلاس‌ها چه کاربردی دارند و چه زمانی باید از هرکدوم استفاده کرد.
1403/05/30
پاسخ
مهرشاد براتی
سلام دوست عزیز در بوت استرپ، کلاس‌های col-lg ، col-md و col-sm برای طراحی (responsive) استفاده می‌شن و هرکدوم برای اندازه‌های مختلف صفحه نمایش تعریف شدن این کلاس‌ها بهت این امکان رو میدن که طراحی وب سایتت رو برای اندازه های مختلف صفحه نمایش بهینه کنی. بزار به ترتیب هر کدوم رو بررسی کنیم:
col-sm این کلاس برای صفحه نمایش‌های کوچیک (small screens) طراحی شده و معمولا برای صفحه نمایش‌های موبایل یا تبلت‌های کوچک استفاده می‌شه. اندازه صفحه نمایش این کلاس کمتر از 576 پیکسل هست.
col-md این کلاس برای صفحه نمایش‌های متوسط (medium screens) تعریف شده و برای تبلت‌های بزرگتر و صفحه‌نمایش‌های لپ‌تاپ مناسب هست. اندازه صفحه نمایش این کلاس بین 576 پیکسل تا 768 پیکسل هست.
col-lg این کلاس برای صفحه نمایش‌های بزرگ (large screens) استفاده می‌شه و برای دسکتاپ‌ها و صفحه‌نمایش‌های بزرگتر مناسب هست. اندازه صفحه نمایش این کلاس بزرگتر از 992 پیکسل هست.
حالا شاید برات سوال بشه چطور از این کلاس‌ها استفاده کنیم؟
فرض کن می‌خوایم یک ردیف (row) با سه ستون (column) بسازیم که در اندازه‌های مختلف صفحه نمایش به ترتیب زیر نمایش داده بشه:
- در صفحه نمایش‌های کوچیک: هر ستون به عرض کامل صفحه نمایش (12 واحد از 12 واحد) باشه.
- در صفحه نمایش‌های متوسط: هر ستون به عرض نصف صفحه نمایش (6 واحد از 12 واحد) باشه.
- در صفحه نمایش‌های بزرگ: هر ستون به عرض یک سوم صفحه نمایش (4 واحد از 12 واحد) باشه.
تو میتونی به این صورت این کار رو انجام بدی:
<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-4"> ستون 1 </div> <div class="col-sm-12 col-md-6 col-lg-4"> ستون 2 </div> <div class="col-sm-12 col-md-6 col-lg-4"> ستون 3 </div> </div> </div>
در این مثال
- در صفحه نمایش‌های کوچیک، هر ستون به عرض کامل صفحه نمایش (12 واحد) نشون داده می‌شه.
- در صفحه نمایش‌های متوسط، هر ستون به عرض نصف صفحه نمایش (6 واحد) نشون داده می‌شه.
- در صفحه نمایش‌های بزرگ، هر ستون به عرض یک سوم صفحه نمایش (4 واحد) نشون داده می‌شه.
این طراحی باعث می‌شه که وب سایتت در انواع مختلف دستگاه‌ها به خوبی نمایش داده بشه و تجربه کاربری بهتری رو فراهم کنه
پاسخ: 1403/05/30
آخرین آپدیت: 1403/08/27