چطور میتونم در طراحی Responsive با بوت استرپ 5، عناصر رو مخفی کنم؟

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

در بوت استرپ 5، شما از کلاس‌های d-none, d-sm-none, d-md-none, d-lg-none و d-xl-none استفاده می‌کنی تا عناصر رو در اندازه‌های مختلف صفحه نمایش مخفی کنی. این کلاس‌ها به این صورت عمل میکنن

d-none مخفی کردن عنصر در همه اندازه‌های صفحه نمایش

d-sm-noneمخفی کردن عنصر در صفحه‌های کوچک‌تر از sm (که معمولاً کمتر از 576px هست)

d-md-noneمخفی کردن عنصر در صفحه‌های کوچک‌تر از md (که معمولاً کمتر از 768px هست)

d-lg-none مخفی کردن عنصر در صفحه‌های کوچک‌تر از lg (که معمولاً کمتر از 992px هست)

d-xl-none مخفی کردن عنصر در صفحه‌های کوچک‌تر از xl (که معمولاً کمتر از 1200px هست)

فرض کن می‌خوای یک دکمه رو در صفحه‌های کوچک‌تر از md مخفی کنی، کد HTML اینکار اینطوریه

<button class="btn btn-primary d-md-none"> 
  Button Hidden on Medium and Larger Screens
 </button>

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

<div class="d-lg-none"> This content is hidden on large and extra-large screens </div>

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