نمایش ویژگی
با ابزارهای نمایشگر ما به سرعت و پاسخگو ارزش نمایش اجزا و موارد دیگر را تغییر دهید. شامل پشتیبانی از برخی از مقادیر رایج تر، و همچنین برخی موارد اضافی برای کنترل نمایشگر هنگام چاپ می شود.
چگونه کار می کند
مقدار display
ویژگی را با کلاسهای کاربردی نمایش واکنشگرا تغییر دهید. ما عمداً فقط زیرمجموعه ای از همه مقادیر ممکن را پشتیبانی می کنیم display
. کلاس ها را می توان برای افکت های مختلف در صورت نیاز ترکیب کرد.
نشانه گذاری
نمایش کلاسهای کاربردی که برای همه نقاط شکست ، از xs
تا xxl
، اعمال میشوند، هیچ علامت اختصاری در آنها وجود ندارد. این به این دلیل است که آن کلاسها از min-width: 0;
و بالاتر اعمال میشوند، و بنابراین توسط یک درخواست رسانه محدود نمیشوند. با این حال، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست هستند.
به این ترتیب، کلاس ها با استفاده از فرمت نامگذاری می شوند:
.d-{value}
برایxs
.d-{breakpoint}-{value}
برایsm
,md
,lg
,xl
وxxl
.
جایی که ارزش یکی از موارد زیر است:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
مقادیر نمایشگر را می توان با تغییر $displays
متغیر و کامپایل مجدد SCSS تغییر داد.
جستجوهای رسانه بر پهنای صفحه با نقطه شکست داده شده یا بزرگتر تأثیر می گذارد . به عنوان مثال، روی ، و صفحه نمایش را .d-lg-none
تنظیم می کند.display: none;
lg
xl
xxl
مثال ها
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
پنهان کردن عناصر
برای توسعه سریعتر سازگار با موبایل، از کلاسهای نمایش پاسخگو برای نمایش و پنهان کردن عناصر بر اساس دستگاه استفاده کنید. از ایجاد نسخه های کاملاً متفاوت از یک سایت خودداری کنید، در عوض عناصر را به صورت پاسخگو برای هر اندازه صفحه پنهان کنید.
برای پنهان کردن عناصر به سادگی از .d-none
کلاس یا یکی از .d-{sm,md,lg,xl,xxl}-none
کلاس ها برای هر گونه تغییر صفحه نمایش پاسخگو استفاده کنید.
برای نشان دادن یک عنصر فقط در یک فاصله زمانی معین از اندازههای صفحه، میتوانید یک .d-*-none
کلاس را با یک .d-*-*
کلاس ترکیب کنید، به عنوان مثال .d-none .d-md-block .d-xl-none .d-xxl-none
، عنصر را برای همه اندازههای صفحه به جز در دستگاههای متوسط و بزرگ پنهان میکند.
اندازه صفحه نمایش | کلاس |
---|---|
روی همه پنهان شده | .d-none |
فقط در xs پنهان شده است | .d-none .d-sm-block |
فقط در اس ام اس پنهان شده است | .d-sm-none .d-md-block |
پنهان فقط در md | .d-md-none .d-lg-block |
فقط در ال جی مخفی شده است | .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 |
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
نمایش در چاپ
display
مقدار عناصر را هنگام چاپ با کلاس های کاربردی صفحه نمایش چاپ ما تغییر دهید . شامل پشتیبانی از display
مقادیر مشابه .d-*
ابزارهای پاسخگو ما است.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
کلاس های چاپ و نمایش را می توان با هم ترکیب کرد.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
ساس
Utilities API
ابزارهای نمایش در API ابزارهای ما در اعلان شده اند scss/_utilities.scss
. با نحوه استفاده از Utilities API آشنا شوید.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),