प्रदर्शन गुण
हाम्रो प्रदर्शन उपयोगिताहरूसँग द्रुत र उत्तरदायी रूपमा कम्पोनेन्टहरूको प्रदर्शन मान र थप टगल गर्नुहोस्। केही सामान्य मानहरूको लागि समर्थन समावेश गर्दछ, साथै मुद्रण गर्दा प्रदर्शन नियन्त्रण गर्नका लागि केही अतिरिक्तहरू।
यसले कसरी काम गर्छ
हाम्रो उत्तरदायी प्रदर्शन उपयोगिता वर्गहरु संग 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;
हुन्छ ।lg
xl
xxl
उदाहरणहरू
<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 |
<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
),