باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
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

دەتوانرێت بەهاکانی پیشاندانی بگۆڕدرێت بە گۆڕینی $displaysگۆڕاوەکە و دووبارە کۆکردنەوەی SCSS.

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

نموونە

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