0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

چطور از مدیا کوئری‌ها در بوت‌ استرپ استفاده کنم؟

Bootstrap - How to use media queries?

من دارم از بوت‌ استرپ استفاده می‌کنم و میخوام بدونم چطور می‌تونم از مدیا کوئری‌ ها استفاده کنم تا عناصر صفحه تو سایزهای مختلف نمایش داده بشن. از چه روشی باید استفاده کنم و چه مدیا کوئری‌ هایی وجود دارن که مناسب بوت‌ استرپ باشن؟

 

پاسخ

سلام اگه داری از بوت‌استرپ استفاده می‌کنی راه استفاده اش از سیستم گرید هست که توش به‌ طور پیش‌فرض مدیا کوئری‌ های مناسب برای سایزهای مختلف صفحه داره

بوت‌استرپ  چندتا سایز پیش‌فرض داره که هرکدوم یه مدیا کوئری اختصاصی داره:

xs (خیلی کوچک): کمتر از 576px

sm (کوچک): بزرگتر یا مساوی 576px

md (متوسط): بزرگتر یا مساوی 768px

lg (بزرگ): بزرگتر یا مساوی 992px

xl (خیلی بزرگ): بزرگتر یا مساوی 1200px

xxl (فوق‌العاده بزرگ): بزرگتر یا مساوی 1400px

برای استفاده از این مدیا کوئری‌ها، می‌تونی از کلاسی مثل d-none یا d-block توی ترکیب با سایز مدیا کوئری استفاده کنی. مثلا اگه بخوای یه المنت فقط توی سایز‌های بزرگ‌تر از 768px نمایش داده بشه، کد زیر رو می‌نویسی:

<div class="d-none d-md-block">
  This content will be visible only on devices larger than 768px.
</div>

این کد باعث می‌شه که المنت فقط توی سایزهای متوسط به بالا (یعنی از 768 پیکسل به بالا) دیده بشه. توی سایزهای کوچیک‌تر، این المنت پنهان می‌شه (d-none).

اگه بخوای از مدیا کوئری‌های دستی استفاده کنی و به دلخواه خودت چیزی رو تغییر بدی، میتونی از این کدها استفاده کنی:

@media (min-width: 768px) {   
.custom-class {     
/* Styles for devices larger than 768px */  
 } 
}

ابنطوری می‌تونی کنترل دقیق تری روی طراحی ریسپانسیو سایتت داشته باشی. بازم میگم که بوت‌استرپ  خیلی از این موارد رو خودش هندل می‌کنه و بهتره از کلاس‌های خودش استفاده کنی، مگر اینکه نیاز خاصی داشته باشی.

پاسخ: 1403/05/31
آخرین آپدیت: 1403/07/19