ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ንብረት አሳይ

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

እንዴት እንደሚሰራ

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