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

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

لەم پەیجەدا

چۆن کاردەکات

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

نموونە

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,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 .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`

hide on lg and wider screens

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

<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

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

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

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>

ساس

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