ንብረት አሳይ

በፍጥነት እና ምላሽ ሰጪ አካላት የማሳያ ዋጋን እና ሌሎችንም በማሳያ መገልገያዎቻችን ይቀያይሩ። ለአንዳንድ የተለመዱ እሴቶች ድጋፍን እና እንዲሁም በሚታተምበት ጊዜ ማሳያን ለመቆጣጠር አንዳንድ ተጨማሪ ነገሮችን ያካትታል።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

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-ብሎክ d-ብሎክ

<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`
በኤስኤምኤስ ላይ ብቻ ተደብቋል	`.d-sm-none .d-md-block`
በኤምዲ ላይ ብቻ ተደብቋል	`.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`
በኤስኤምኤስ ላይ ብቻ ይታያል	`.d-none .d-sm-block .d-md-none`
በኤምዲ ላይ ብቻ ይታያል	`.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>

ሳስ

መገልገያዎች ኤፒአይ

የማሳያ መገልገያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ 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
    ),