गुणधर्म प्रदर्शित करा

आमच्या डिस्प्ले युटिलिटीजसह घटकांचे डिस्प्ले व्हॅल्यू आणि बरेच काही जलद आणि प्रतिसादाने टॉगल करा. काही अधिक सामान्य मूल्यांसाठी समर्थन समाविष्ट करते, तसेच मुद्रण करताना प्रदर्शन नियंत्रित करण्यासाठी काही अतिरिक्त.

या पृष्ठावर

हे कसे कार्य करते

आमच्या रिस्पॉन्सिव्ह डिस्प्ले युटिलिटी क्लासेससह 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

displaySCSS मध्ये परिभाषित मूल्ये बदलून $utilitiesआणि पुन्हा कंपाइल करून प्रदर्शन मूल्ये बदलली जाऊ शकतात .

मीडिया क्वेरी दिलेल्या ब्रेकपॉइंट किंवा त्याहून मोठ्या स्क्रीनच्या रुंदीवर परिणाम करतात . उदाहरणार्थ, , , आणि स्क्रीन वर .d-lg-noneसेट करते .display: none;lgxlxxl

उदाहरणे

डी-इनलाइन

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

डी-ब्लॉक डी-ब्लॉक

html

<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मध्यम आणि मोठ्या उपकरणांशिवाय सर्व स्क्रीन आकारांसाठी घटक लपवेल.

स्क्रीन आकार	वर्ग
सर्वांवर लपलेले	`.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`
फक्त xxl वर लपलेले	`.d-xxl-none .d-xxl-block`
सर्वांवर दृश्यमान	`.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`

lg आणि रुंद स्क्रीनवर लपवा

lg पेक्षा लहान स्क्रीनवर लपवा

html

<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

प्रिंट आणि डिस्प्ले वर्ग एकत्र केले जाऊ शकतात.

फक्त स्क्रीन (फक्त प्रिंटवर लपवा)

फक्त प्रिंट करा (फक्त स्क्रीनवर लपवा)

स्क्रीनवर मोठ्या पर्यंत लपवा, परंतु नेहमी प्रिंटवर दर्शवा

html

<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
    ),