Source

प्रदर्शन गुण

हाम्रो प्रदर्शन उपयोगिताहरूसँग द्रुत र उत्तरदायी रूपमा कम्पोनेन्टहरूको प्रदर्शन मान र थप टगल गर्नुहोस्। केही सामान्य मानहरूको लागि समर्थन समावेश गर्दछ, साथै मुद्रण गर्दा प्रदर्शन नियन्त्रण गर्नका लागि केही अतिरिक्तहरू।

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

हाम्रो उत्तरदायी प्रदर्शन उपयोगिता वर्गहरु संग displayसम्पत्ती को मूल्य परिवर्तन गर्नुहोस् । हामी जानबूझकर को लागी सबै सम्भावित मानहरूको एक उपसेट मात्र समर्थन गर्दछ display। तपाईलाई आवश्यकता अनुसार विभिन्न प्रभावहरूको लागि कक्षाहरू जोड्न सकिन्छ।

नोटेशन

सबै ब्रेकपोइन्टहरूमा लागू हुने उपयोगिता वर्गहरू देखाउनुहोस् , देखि xs, xlतिनीहरूमा कुनै ब्रेकपोइन्ट संक्षिप्त नाम छैन। यो किनभने ती कक्षाहरू बाट 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

प्रदर्शन मानहरू चर परिवर्तन गरेर $displaysर SCSS पुन: कम्पाइल गरेर परिवर्तन गर्न सकिन्छ।

मिडिया क्वेरीहरूले दिइएको ब्रेकपोइन्ट वा ठूलासँग स्क्रिन चौडाइलाई प्रभाव पार्छ । उदाहरणका लागि, दुबै र स्क्रिनहरूमा .d-lg-noneसेटहरू ।display: none;lgxl

उदाहरणहरू

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}-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 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-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>