Source

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

हमनी के डिस्प्ले उपयोगिता के साथ घटक के डिस्प्ले मान आ अउरी बहुत कुछ के जल्दी आ प्रतिक्रियाशील रूप से टॉगल करीं। कुछ अधिका आम मान सभ के समर्थन भी शामिल बा, साथ ही साथ छपाई के समय डिस्प्ले के नियंत्रित करे खातिर कुछ अतिरिक्त भी शामिल बा।

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

हमनी के रिस्पांसिव डिस्प्ले यूटिलिटी क्लास के साथ displayप्रॉपर्टी के मान बदलीं । हमनी के जानबूझ के खाली सभ संभावित मान के एगो सबसेट के समर्थन करेनी जा display. जरूरत के हिसाब से विभिन्न प्रभाव खातिर कक्षा के संयोजन कईल जा सकता।

संकेतन के बारे में बतावल गइल बा

सभ ब्रेकपॉइंट सभ पर लागू होखे वाला उपयोगिता वर्ग सभ के प्रदर्शन करीं , से xsले के xl, इनहन में कौनों ब्रेकपॉइंट संक्षिप्त रूप ना होला। एकर कारण ई बा कि ऊ क्लास सभ से min-width: 0;ऊपर से लागू होलें, आ एह तरीका से मीडिया क्वेरी से बान्हल ना जालें। हालाँकि, बाकी ब्रेकपॉइंट सभ में ब्रेकपॉइंट संक्षिप्त रूप जरूर सामिल बा।

अइसे, क्लास सभ के नाँव एह फॉर्मेट के इस्तेमाल से रखल जाला:

  • .d-{value}खातिरxs
  • .d-{breakpoint}-{value}खातिर sm, md, lg, आ xl.

जहाँ मूल्य निम्नलिखित में से एगो बा:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

मीडिया क्वेरी दिहल गईल ब्रेकपॉइंट या ओकरा से बड़ के साथ स्क्रीन चौड़ाई के प्रभाव डालेला . जइसे कि दुनु आ स्क्रीन पर .d-lg-noneसेट होला.display: none;lgxl

उदाहरण खातिर दिहल गइल बा

डी-इनलाइन के बा
डी-इनलाइन के बा
<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}-none

कवनो तत्व के खाली स्क्रीन साइज के दिहल अंतराल पर देखावे खातिर रउआँ एगो .d-*-noneक्लास के क्लास के साथ जोड़ सकत बानी .d-*-*, उदाहरण .d-none .d-md-block .d-xl-noneखातिर मध्यम आ बड़ डिवाइस सभ के छोड़ के बाकी सगरी स्क्रीन साइज सभ खातिर तत्व के छिपाई।

स्क्रीन के साइज के बा कक्षा
सब पर छिपल बा .d-none
खाली xs पर छिपल बा .d-none .d-sm-block
खाली एसएम पर छिपल बा .d-sm-none .d-md-block
खाली एमडी पर छिपल बा .d-md-none .d-lg-block
खाली एलजी पर छिपल बा .d-lg-none .d-xl-block
खाली xl पर छिपल बा .d-xl-none
सब पर लउकत बा .d-block
खाली xs पर ही लउकत बा .d-block .d-sm-none
खाली एसएम पर ही लउकत बा .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
hide on screens wider than lg
lg से छोट स्क्रीन पर छिपावे के बा
<div class="d-lg-none">hide on screens wider than lg</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-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>