Source

गुणं प्रदर्शयतु

अस्माकं प्रदर्शन-उपयोगिताभिः सह घटकानां प्रदर्शनमूल्यं अधिकं च शीघ्रं प्रतिक्रियाशीलतया च टॉगलं कुर्वन्तु । केषाञ्चन अधिकसामान्यमूल्यानां समर्थनं, तथैव मुद्रणसमये प्रदर्शननियन्त्रणार्थं केचन अतिरिक्तानि च समाविष्टानि सन्ति ।

कथं कार्यं करोति

अस्माकं प्रतिक्रियाशीलप्रदर्शन-उपयोगितावर्गैः सह displayगुणस्य मूल्यं परिवर्तयन्तु । वयं उद्देश्यपूर्वकं केवलं सर्वेषां सम्भाव्यमूल्यानां उपसमूहस्य समर्थनं कुर्मः display. यथा आवश्यकतानुसारं विविधप्रभावानाम् कृते कक्षाः संयोजितुं शक्यन्ते।

संकेतनम्

सर्वेषु breakpoints मध्ये प्रवर्तमानाः उपयोगितावर्गाः प्रदर्शयन्तु , from xsto xl, तेषु breakpoint संक्षिप्तं नास्ति । यतो हि ते वर्गाः 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`
केवलं 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`

hide on screens wider than lg

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अस्माकं print display utility classes इत्यनेन सह मुद्रयन्ते सति elements इत्यस्य मूल्यं परिवर्तयन्तु । 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>