Source

ንብረት አሳይ

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

እንዴት እንደሚሰራ

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

ምሳሌዎች

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}-noneለማንኛውም ምላሽ ሰጪ የስክሪን ልዩነት ይጠቀሙ።

የተወሰነውን የስክሪን መጠኖች ክፍተት ላይ ብቻ ለማሳየት አንድ ክፍልን .d-*-noneከክፍል ጋር ማጣመር ይችላሉ .d-*-*ለምሳሌ .d-none .d-md-block .d-xl-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-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`

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