प्रॉपर्टी के प्रदर्शन करीं
हमनी के डिस्प्ले उपयोगिता के साथ घटक के डिस्प्ले मान आ अउरी बहुत कुछ के जल्दी आ प्रतिक्रियाशील रूप से टॉगल करीं। कुछ अधिका आम मान सभ के समर्थन भी शामिल बा, साथ ही साथ छपाई के समय डिस्प्ले के नियंत्रित करे खातिर कुछ अतिरिक्त भी शामिल बा।
हमनी के रिस्पांसिव डिस्प्ले यूटिलिटी क्लास के साथ 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;
lg
xl
तेजी से मोबाइल-अनुकूल विकास खातिर, डिवाइस के हिसाब से तत्व सभ के देखावे आ छिपावे खातिर रिस्पांसिव डिस्प्ले क्लास सभ के इस्तेमाल करीं। एकही साइट के बिल्कुल अलग संस्करण बनावे से बची, एकरे बजाय हर स्क्रीन साइज खातिर तत्व के प्रतिक्रियाशील रूप से छिपाईं।
तत्व सभ के छिपावे खातिर बस कौनों भी रिस्पांसिव स्क्रीन भिन्नता खातिर .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 |
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
प्रिंट आ डिस्प्ले क्लास के मिला के बनावल जा सकेला.