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