نمایش دادن
با ابزارهای نمایشگر ما به سرعت و پاسخگو ارزش نمایش اجزا و موارد دیگر را تغییر دهید. شامل پشتیبانی از برخی از مقادیر رایج تر، و همچنین برخی موارد اضافی برای کنترل نمایشگر هنگام چاپ می شود.
نمایش در بوت استرپنشانه گذاری
نمایش کلاس های کاربردی که برای همه نقاط شکست اعمال می شوند، از xs تا xl ، هیچ علامت اختصاری نقطه شکست در آنها وجود ندارد. این به این دلیل است که آن کلاس‌ها از min-width: 0;و بالاتر اعمال می‌شوند، و بنابراین توسط یک درخواست رسانه محدود نمی‌شوند. با این حال، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست هستند.
به این ترتیب، کلاس ها با استفاده از فرمت نامگذاری می شوند:
.d-{value}برایxs.d-{breakpoint}-{value}برایsm،،،، وmd، _lgxl
جایی که ارزش یکی از موارد زیر است:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
مقادیر نمایشگر را می توان با تغییر $displays متغیر و کامپایل مجدد SCSS تغییر داد.
پرس و جوهای رسانه بر پهنای صفحه با نقطه شکست داده شده یا بزرگتر تأثیر می گذارد. به عنوان مثال، در هر دو و صفحه نمایش .d-lg-none تنظیم می شود.display: none;lg xl
مثال
<div class="d-inline bg-primary p-2 text-white">d-inline</div>
<div class="d-block bg-primary p-2 text-white mt-3">d-block</div>پنهان کردن عناصر
برای توسعه سریع‌تر سازگار با موبایل، از کلاس‌های نمایش پاسخگو برای نمایش و پنهان کردن عناصر بر اساس دستگاه استفاده کنید. از ایجاد نسخه های کاملاً متفاوت از یک سایت خودداری کنید، در عوض عناصر را به صورت پاسخگو برای هر اندازه صفحه پنهان کنید.
برای پنهان کردن عناصر به سادگی از .d-none کلاس یا یکی از .d-{sm,md,lg,xl}-none کلاس ها برای هر گونه تغییر صفحه نمایش پاسخگو استفاده کنید.
برای نشان دادن یک عنصر فقط در یک فاصله زمانی معین از اندازه های صفحه نمایش، می توانید یکی .d-*-none class with a.d-*-* class, for example.d-none .d-md-block .d-xl-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-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 |
نمایش در چاپ
display مقدار عناصر را هنگام چاپ با کلاس های کاربردی صفحه نمایش چاپ ما تغییر دهید . شامل پشتیبانی از display ارزش های مشابه به عنوان پاسخگو ما است.d-* utilities.
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.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>
