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