اموزش طراحی وببوتسترپ

مخفی کردن المنت های مختلف در بوت استرپ 5

سلام دوستان

امروز یک آموزش ویژه برای شما داریم و در آن خواهیم آموخت چگونه میتوانیم المنت های مختلف رو در بوتسترپ در سایز های مختلف نمایشگر و… مخفی کنیم.برای این کار باید در از کد های زیر استفاده کنیم.

درواقع باید با توجه به نیاز خود از کلاس های مختلفی در زیر قرار داده شده است استفاده کنیم.

سایز صفحهکلاس مربوط
مخفی در همه .d-none
مخفی فقط در xs.d-none .d-sm-block
مخفی فقط در sm.d-sm-none .d-md-block
مخفی فقط در md.d-md-none .d-lg-block
مخفی فقط در lg.d-lg-none .d-xl-block
مخفی فقط در xl.d-xl-none .d-xxl-block
مخفی فقط در xxl.d-xxl-none
نمایش در همه.d-block
نمایش فقط در xs.d-block .d-sm-none
نمایش فقط در sm.d-none .d-sm-block .d-md-none
نمایش فقط در md.d-none .d-md-block .d-lg-none
نمایش فقط در lg.d-none .d-lg-block .d-xl-none
نمایش فقط در xl.d-none .d-xl-block .d-xxl-none
نمایش فقط در xxl.d-none .d-xxl-block

نحوه استفاده از کد های بالا به شکل زیر میباشد:

راحت ترین راه استفاده از کلاس های سری -d. هست. فرمول کلی به این صورت هست:

.d-{breakpoint}-{value}

که breakpoint همون اندازه نمایشگر در سایز های SM و MD و LG و XL هست و value هم یکی از مقادیر صفت display شامل:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

هست. برای مخفی کردن یک عنصر در سایز XS هم از d-none می توانید استفاده کنید.

نحوه استفاده از این کلاس ها هم به این صورت هست که به عنوان مثال می خواید یک div در سایز موبایل یعنی XS مخفی و در سایز LG نمایش داده بشه. بنابراین اینطوری نوشته میشود.

<div class="d-none d-lg-block">
  
  
</div>

توجه داشته باشید وقتی از d-none استفاده می کنید دیگه لازم نیست برای تک تک brackpoint ها از کلاس های سری -d. استفاده کنید. وقتی کلاس d-none رو مینویسی عنصر div در تمام اندازه ها مخفی میشه و وقتی کلاس d-lg-block رو می نویسی به سایز های بعد از LG یعنی LG و XL هم اعمال میشود.

سایز های مختلف در بوتسترپ

سایز های مختلف نمایشگر ها در بوتسترپ

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns ۱۲
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

موفق باشید / میز وردپرس

saeedjoshani

متخصص وردپرس و و طراح قالب وردپرس با تمام وجود مشغول ساخت آموزش های کار با وردپرس و کدنویسی و طراحی قالب وردپرس میباشم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
question