ఆస్తిని ప్రదర్శించు

అది ఎలా పని చేస్తుంది

మా ప్రతిస్పందించే ప్రదర్శన యుటిలిటీ తరగతులతో 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

displaySCSS లో నిర్వచించిన విలువలను మార్చడం $utilitiesమరియు రీకంపైల్ చేయడం ద్వారా ప్రదర్శన విలువలను మార్చవచ్చు.

మీడియా ప్రశ్నలు ఇచ్చిన బ్రేక్‌పాయింట్ లేదా అంతకంటే ఎక్కువ స్క్రీన్ వెడల్పులను ప్రభావితం చేస్తాయి . ఉదాహరణకు, , , మరియు స్క్రీన్‌లపై .d-lg-noneసెట్ display: none;చేస్తుంది .lgxlxxl

ఉదాహరణలు

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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మీడియం మరియు పెద్ద పరికరాలలో మినహా అన్ని స్క్రీన్ పరిమాణాల కోసం మూలకాన్ని దాచవచ్చు.

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