ఆస్తిని ప్రదర్శించు
మా డిస్ప్లే యుటిలిటీలతో కాంపోనెంట్ల డిస్ప్లే విలువను మరియు మరిన్నింటిని త్వరగా మరియు ప్రతిస్పందనాత్మకంగా టోగుల్ చేయండి. కొన్ని సాధారణ విలువలకు మద్దతును కలిగి ఉంటుంది, అలాగే ప్రింటింగ్ చేసేటప్పుడు డిస్ప్లేను నియంత్రించడానికి కొన్ని అదనపు అంశాలు ఉంటాయి.
అది ఎలా పని చేస్తుంది
మా ప్రతిస్పందించే ప్రదర్శన యుటిలిటీ తరగతులతో 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 |
smలో మాత్రమే దాచబడింది | .d-sm-none .d-md-block |
mdలో మాత్రమే దాచబడింది | .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 |
smలో మాత్రమే కనిపిస్తుంది | .d-none .d-sm-block .d-md-none |
mdలో మాత్రమే కనిపిస్తుంది | .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>
సాస్
యుటిలిటీస్ API
డిస్ప్లే యుటిలిటీలు మా యుటిలిటీస్ API లో ప్రకటించబడ్డాయి scss/_utilities.scss
. యుటిలిటీస్ APIని ఎలా ఉపయోగించాలో తెలుసుకోండి.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),