ንብረት ምርኣይ
ብቕልጡፍን ምላሽን ዋጋ ምርኢት ኣካላትን ካልእን ብናይ ምርኢት መገልገሊታትና ምቕያር። ንገለ ካብቶም ዝያዳ ልሙዳት ክብርታት ደገፍ የጠቓልል፣ ከምኡውን ገለ ተወሳኺ ንምቁጽጻር ምርኢት ኣብ እዋን ሕትመት የጠቓልል።
ከመይ ይሰርሕ
ዋጋ ናይቲ 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;
lg
xl
xxl
ኣብነታት
<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,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 |
<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
እቲ ናይ ሕትመትን ምርኢትን ክፍልታት ክውሃሃድ ይኽእል።
<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>
ሳስ
ዩቲሊቲስ ኤፒኣይ
ናይ ምርኢት ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss
. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),