سلام دوستان
امروز یک آموزش ویژه برای شما داریم و در آن خواهیم آموخت چگونه میتوانیم المنت های مختلف رو در بوتسترپ در سایز های مختلف نمایشگر و… مخفی کنیم.برای این کار باید در از کد های زیر استفاده کنیم.
درواقع باید با توجه به نیاز خود از کلاس های مختلفی در زیر قرار داده شده است استفاده کنیم.
| سایز صفحه | کلاس مربوط |
|---|---|
| مخفی در همه | .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 | |||||
موفق باشید / میز وردپرس
