in English

ንብረት ምርኣይ

ብቕልጡፍን ምላሽን ዋጋ ምርኢት ኣካላትን ካልእን ብናይ ምርኢት መገልገሊታትና ምቕያር። ንገለ ካብቶም ዝያዳ ልሙዳት ክብርታት ደገፍ የጠቓልል፣ ከምኡውን ገለ ተወሳኺ ንምቁጽጻር ምርኢት ኣብ እዋን ሕትመት የጠቓልል።

ከመይ ይሰርሕ

ዋጋ ናይቲ 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

እቶም ናይ ምርኢት ክብርታት ነቲ $displaysተለዋዋጢ ብምቕያርን ነቲ SCSS ዳግማይ ብምጥርናፍን ክቕየሩ ይኽእሉ።

እቶም ናይ ሚድያ ሕቶታት ነቲ ዝተዋህበ ናይ ምብታኽ ነጥቢ ወይ ካብኡ ዝዓቢ ስፍሓት ስክሪን ይጸልዉ ። ንኣብነት ኣብ .d-lg-noneክልቲኡን ስክሪናትን ይቕመጥ።display: none;lgxl

ኣብነታት

መ-ኣብ መስመር
መ-ኣብ መስመር 
<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>
መ-ብሎክ ዝብል እዩ። መ-ብሎክ ዝብል እዩ። 
<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
ኣብ lgን ሰፊሕን ስክሪናት ምሕባእ ይከኣል
ካብ 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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

እቲ ናይ ሕትመትን ምርኢትን ክፍልታት ክውሃሃድ ይኽእል።

ስክሪን ጥራይ (ኣብ ሕትመት ጥራይ ሕባእ)
ሕትመት ጥራይ (ኣብ ስክሪን ጥራይ ሕባእ)
ኣብ ስክሪን ክሳብ ዓቢ ሕባእ፣ ግን ኩሉ ግዜ ኣብ ሕትመት ኣርእይ 
<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>