प्रदर्शन गुण
हाम्रो प्रदर्शन उपयोगिताहरूसँग द्रुत र उत्तरदायी रूपमा कम्पोनेन्टहरूको प्रदर्शन मान र थप टगल गर्नुहोस्। केही सामान्य मानहरूको लागि समर्थन समावेश गर्दछ, साथै मुद्रण गर्दा प्रदर्शन नियन्त्रण गर्नका लागि केही अतिरिक्तहरू।
हाम्रो उत्तरदायी प्रदर्शन उपयोगिता वर्गहरु संग 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
मिडिया क्वेरीहरूले दिइएको ब्रेकपोइन्ट वा ठूलासँग स्क्रिन चौडाइलाई प्रभाव पार्छ । उदाहरणका लागि, दुबै र स्क्रिनहरूमा .d-lg-none
सेटहरू ।display: none;
lg
xl
छिटो मोबाइल-अनुकूल विकासको लागि, उपकरणद्वारा तत्वहरू देखाउन र लुकाउनको लागि उत्तरदायी प्रदर्शन कक्षाहरू प्रयोग गर्नुहोस्। एउटै साइटको पूर्णतया फरक संस्करणहरू सिर्जना नगर्नुहोस्, बरु प्रत्येक स्क्रिन आकारको लागि उत्तरदायी रूपमा तत्व लुकाउनुहोस्।
तत्वहरू लुकाउनको लागि कुनै पनि प्रतिक्रियाशील स्क्रिन भिन्नताका लागि .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 |
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
प्रिन्ट र डिस्प्ले वर्गहरू संयोजन गर्न सकिन्छ।