ንብረት አሳይ
በፍጥነት እና ምላሽ ሰጪ አካላት የማሳያ ዋጋን እና ሌሎችንም በማሳያ መገልገያዎቻችን ይቀያይሩ። ለአንዳንድ የተለመዱ እሴቶች ድጋፍን እና እንዲሁም በሚታተምበት ጊዜ ማሳያን ለመቆጣጠር አንዳንድ ተጨማሪ ነገሮችን ያካትታል።
እንዴት እንደሚሰራ
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 |
በኤስኤምኤስ ላይ ብቻ ተደብቋል | .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 |
<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
),