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

उदाहरणां

डी-इनलायन
डी-इनलायन 
<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}-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
lg आनी रूंद पडद्याचेर लिपोवप
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>