गुणधर्म दाखोवप

कशें काम करता

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

सास

उपयुक्तताय एपीआय

प्रदर्शन उपयुक्तताय आमच्या उपयुक्तताय एपीआयंत 2019 वर्सा जाहीर केल्यात scss/_utilities.scss. उपयुक्तताय एपीआय कसो वापरचो तें शिकात.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),