प्रदर्शन गुण

यसले कसरी काम गर्छ

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

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हाम्रो प्रिन्ट डिस्प्ले उपयोगिता वर्गहरूसँग मुद्रण गर्दा तत्वहरूको मान परिवर्तन गर्नुहोस् । 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

प्रदर्शन उपयोगिताहरू हाम्रो उपयोगिता 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
    ),