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

የማህደረ መረጃ መጠይቆች በተሰጠው መግቻ ነጥብ ወይም ከዚያ በላይ ባለው የስክሪን ስፋቶች ላይ ተጽእኖ ያሳድራሉ ። ለምሳሌ, በሁለቱም እና ማያ ገጾች ላይ .d-lg-noneስብስቦች .display: none;lgxl

ምሳሌዎች

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-ብሎክ 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 screens wider than lg
ከ lg ያነሱ ስክሪኖች ላይ ይደብቁ
<div class="d-lg-none">hide on screens wider than lg</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>