in English

تایبەتمەندی پیشاندانی

بە خێرایی و وەڵامدەرەوە بەهای پیشاندانی پێکهاتەکان و زۆر شتی تر بە سوودمەندییەکانی پیشاندانی ئێمە بگۆڕە. پشتگیری بۆ هەندێک لە بەها باوەکان لەخۆدەگرێت، هەروەها هەندێک زیادە بۆ کۆنترۆڵکردنی پیشاندانی لە کاتی چاپکردندا.

لەم پەیجەدا

چۆن کاردەکات

بەهای 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

دەتوانرێت بەهاکانی پیشاندانی بگۆڕدرێت بە گۆڕینی displayبەهاکانی پێناسەکراو لە $utilitiesSCSS و دووبارە کۆکردنەوە.

پرسیارەکانی میدیا کاریگەرییان لەسەر پانایی شاشەکان هەیە بە خاڵی شکاندنی پێدراو یان گەورەتر . بۆ نموونە لەسەر , , و شاشەکان .d-lg-noneدادەنێت .display: none;lgxlxxl

نموونە

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`
تەنها لەسەر 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`
تەنها لەسەر xxl شاراوەتەوە	`.d-xxl-none .d-xxl-block`
لەسەر هەمووان دیارە	`.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`

شاردنەوەی لەسەر شاشەی lg و فراوانتر

شاردنەوەی لەسەر شاشەکانی بچووکتر لە lg

html

<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

دەتوانرێت پۆلەکانی چاپکردن و پیشاندانی یەکبخرێت.

تەنها شاشە (تەنها لە کاتی چاپکردندا بشارەوە)

تەنها چاپکردن (تەنها لەسەر شاشە بشارەوە)

لەسەر شاشەکە تا گەورە بشارەوە، بەڵام هەمیشە لەسەر چاپ پیشان بدە

html

<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>

ساس

API ی سوودمەندیەکان

سوودمەندییەکانی پیشاندانی لە APIی سوودمەندییەکانمان لە scss/_utilities.scss. فێربە چۆن 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
    ),