प्रॉपर्टी के प्रदर्शन करीं

कइसे काम करेला

हमनी के रिस्पांसिव डिस्प्ले यूटिलिटी क्लास के साथ 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

SCSS displayमें परिभाषित मान सभ के बदल के आ फिर से संकलित क के डिस्प्ले मान सभ में बदलाव कइल जा सके ला ।$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>

ससस के बा

उपयोगिता एपीआई के बा

प्रदर्शन उपयोगिता के हमनी के उपयोगिता एपीआई में घोषित कइल गइल बा 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
    ),