Source

نمایش ویژگی

با ابزارهای نمایشگر ما به سرعت و پاسخگو ارزش نمایش اجزا و موارد دیگر را تغییر دهید. شامل پشتیبانی از برخی از مقادیر رایج تر، و همچنین برخی موارد اضافی برای کنترل نمایشگر هنگام چاپ می شود.

چگونه کار می کند

مقدار displayویژگی را با کلاس‌های کاربردی نمایش واکنش‌گرا تغییر دهید. ما عمداً فقط زیرمجموعه ای از همه مقادیر ممکن را پشتیبانی می کنیم display. کلاس ها را می توان برای افکت های مختلف در صورت نیاز ترکیب کرد.

نشانه گذاری

نمایش کلاس های ابزاری که برای همه نقاط شکست ، از xsتا xl، اعمال می شوند، هیچ علامت اختصاری نقطه شکست در آنها وجود ندارد. این به این دلیل است که آن کلاس‌ها از min-width: 0;و بالاتر اعمال می‌شوند، و بنابراین توسط یک درخواست رسانه محدود نمی‌شوند. با این حال، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست هستند.

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

  • .d-{value}برایxs
  • .d-{breakpoint}-{value}برای sm, md, lg, و xl.

جایی که ارزش یکی از موارد زیر است:

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

پرس و جوهای رسانه بر پهنای صفحه با نقطه شکست داده شده یا بزرگتر تأثیر می گذارد . به عنوان مثال، در هر دو و صفحه نمایش .d-lg-noneتنظیم می شود.display: none;lgxl

مثال ها

d-inline
d-inline 
<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>
d-block d-block 
<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}-noneکلاس ها برای هر گونه تغییر صفحه نمایش پاسخگو استفاده کنید.

برای نشان دادن یک عنصر فقط در یک فاصله زمانی معین از اندازه‌های صفحه، می‌توانید یک .d-*-noneکلاس را با یک .d-*-*کلاس ترکیب کنید، به عنوان مثال .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
hide on screens wider than lg
روی صفحه نمایش های کوچکتر از ال جی پنهان شوید 
<div class="d-lg-none">hide on screens wider than lg</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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

کلاس های چاپ و نمایش را می توان با هم ترکیب کرد.

فقط روی صفحه (فقط در حالت چاپ پنهان شود)
Print Only (Hide on screen only)
تا اندازه بزرگ روی صفحه پنهان کنید، اما همیشه در چاپ نشان داده شود 
<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>