प्रदर्शन गुण

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

इस पेज पर

कोना काज करैत अछि

हमर उत्तरदायी प्रदर्शन उपयोगिता वर्ग क संग 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

एससीएसएस displayमे परिभाषित मान कें बदल क आ पुन: संकलित करयत प्रदर्शन मान मे बदलाव कैल जा सकय छै .$utilities

मीडिया क्वेरी देल गेल ब्रेकपॉइंट या पैघ के संग स्क्रीन चौड़ाई के प्रभावित करैत अछि . जेना, , , आओर स्क्रीन पर .d-lg-noneसेट करैत अछि.display: none;lgxlxxl

उदाहरण के लिये

घ-इनलाइन

एचटीएमएल

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

घ-ब्लॉक घ-ब्लॉक

एचटीएमएल

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`
केवल md पर छिपल	`.d-md-none .d-lg-block`
केवल lg पर छिपल	`.d-lg-none .d-xl-block`
केवल xl पर छिपा	`.d-xl-none`
केवल xxl पर छिपा	`.d-xxl-none .d-xxl-block`
सब पर देखाइत अछि	`.d-block`
केवल xs पर दिखाई दे रहा है	`.d-block .d-sm-none`
केवल sm पर ही दिखाई दे \|	`.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`

lg आ चौड़ा स्क्रीन पर छिपाउ

lg स छोट स्क्रीन पर छिपाउ

एचटीएमएल

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