ابزار نمایش
با ابزارهای نمایش ما به سرعت و واکنشگرا ارزش نمایش کامپوننت ها و موارد دیگر را تغییر دهید. کلاس ها را می توان برای تاثیرات مختلف در صورت نیاز ترکیب کرد.
کاربردهای پایه
این کلاس های کاربردی کمکی به شما اجازه می دهند تا ویژگی نمایش یک عنصر را تنظیم کنید.
| مرجع کلاس | نام |
|---|---|
.d-{name} |
none | inline | inline-block | block | table | table-cell | table-row | flex | inline-flex |
.d-{breakpoint}-{name} |
از {breakpoint} به عنوان sm، md، lg و xl برای تاثیر بر عرض صفحه نمایش استفاده کنید. |
پرس و جوهای رسانه بر عرض صفحه نمایش با نقطه شکست داده شده یا بزرگتر تاثیر می گذارد. به عنوان مثال، .d-lg-none، display: none; را در صفحه نمایش های lg و xl تنظیم می کند.
|
|
مثال استفاده
<div class="d-block"> ... </div>
پنهان کردن عناصر
برای توسعه سریع تر سازگار با تلفن همراه، از کلاس های نمایش واکنشگرا برای نمایش و پنهان کردن عناصر بر اساس دستگاه استفاده کنید.
| مرجع کلاس | اندازه صفحه نمایش |
|---|---|
.d-none |
روی همه پنهان می شود |
.d-none .d-sm-block |
فقط در xs پنهان می شود |
.d-sm-none .d-md-block |
فقط در sm پنهان می شود |
.d-md-none .d-lg-block |
فقط در md پنهان می شود |
.d-lg-none .d-xl-block |
فقط در lg پنهان می شود |
.d-xl-none |
فقط در xl پنهان می شود |
.d-block |
روی همه قابل مشاهده است |
.d-block .d-sm-none |
فقط در xs قابل مشاهده است |
.d-none .d-sm-block .d-md-none |
فقط در sm قابل مشاهده است |
.d-none .d-md-block .d-lg-none |
فقط در md قابل مشاهده است |
.d-none .d-lg-block .d-xl-none |
فقط در lg قابل مشاهده است |
.d-none .d-xl-block |
فقط در xl قابل مشاهده است |
مثال استفاده
<div class="d-none d-sm-block"> ... </div>
