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`
सिर्फ sm पर ही छिपाया	`.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

एलजी से छोटे स्क्रीन पर छिपाना

<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>