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;لەسەر هەردوو lgو xlشاشەکان.

نموونە

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`
تەنها لەسەر 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-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

شاردنەوەی لەسەر شاشەکانی بچووکتر لە 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>