मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
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

उदाहरणहरू

d-इनलाइन
d-इनलाइन
<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>
d-ब्लक d-ब्लक
<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>

सास

उपयोगिता API

प्रदर्शन उपयोगिताहरू हाम्रो उपयोगिता API मा घोषणा गरिएको छ 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
    ),