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

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

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

संकेतनम्

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

SCSS 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मध्यम-बृहत्-यन्त्रेषु विहाय सर्वेषां स्क्रीन-आकारानाम् कृते तत्त्वं गोपयिष्यति

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

सस्स

उपयोगिता एपिआइ

प्रदर्शन उपयोगिता अस्माकं उपयोगिता API मध्ये घोषितं भवति scss/_utilities.scss. utilities API इत्यस्य उपयोगं कथं करणीयम् इति ज्ञातव्यम् ।

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),