प्रॉपर्टी प्रदर्शित करो
साढ़ी प्रदर्शन उपयोगिताएं कन्नै घटकें दे प्रदर्शन मूल्य ते होर मते गी जल्दी ते जवाबदेही कन्नै टॉगल करो। किश होर आम मूल्यें आस्तै समर्थन, ते कन्नै गै छपाई करदे बेल्लै प्रदर्शन गी नियंत्रत करने आस्तै किश अतिरिक्त बी शामल ऐ.
किवें कम्म करदा है
साढ़े उत्तरदायी प्रदर्शन उपयोगिता वर्गें कन्नै 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 |
सिर्फ sm पर ही छिपाया | .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
),