मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

संपत्ति प्रदर्शित करें

हमारी प्रदर्शन उपयोगिताओं के साथ घटकों के प्रदर्शन मूल्य और अधिक को त्वरित और प्रतिक्रियात्मक रूप से टॉगल करें। कुछ अधिक सामान्य मूल्यों के लिए समर्थन, साथ ही मुद्रण करते समय प्रदर्शन को नियंत्रित करने के लिए कुछ अतिरिक्त शामिल हैं।

यह काम किस प्रकार करता है

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

वेरिएबल को बदलकर $displaysऔर SCSS को फिर से कंपाइल करके डिस्प्ले वैल्यू को बदला जा सकता है।

मीडिया क्वेरीज़ दिए गए ब्रेकपॉइंट या बड़े के साथ स्क्रीन की चौड़ाई को प्रभावित करती हैं । उदाहरण के लिए, , , और स्क्रीन पर .d-lg-noneसेट करता है।display: none;lgxlxxl

उदाहरण

डी-इनलाइन
डी-इनलाइन
<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,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 .d-xxl-block
केवल xxl . पर छिपा हुआ है .d-xxl-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 .d-xxl-none
केवल xxl . पर दृश्यमान .d-none .d-xxl-block
hide on lg and wider screens
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

प्रिंट और डिस्प्ले कक्षाओं को जोड़ा जा सकता है।

केवल स्क्रीन (केवल प्रिंट पर छुपाएं)
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>

सास

यूटिलिटीज एपीआई

डिस्प्ले यूटिलिटीज को हमारी यूटिलिटीज एपीआई में scss/_utilities.scss. उपयोगिताओं 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
    ),