गुणधर्म दाखोवप
आमच्या प्रदर्शन उपयुक्ततायांनी घटकांचें प्रदर्शन मोल आनी चड बेगीन आनी प्रतिसादान टॉगल करात. कांय चड सामान्य मोलांखातीर आदार, तशेंच मुद्रण करतना प्रदर्शन नियंत्रीत करपाखातीर कांय अतिरिक्त समाविष्ट करता.
कशें काम करता
आमच्या प्रतिसाद दिवपी प्रदर्शन उपयुक्तताय वर्गां वरवीं 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>
सास
उपयुक्तताय एपीआय
प्रदर्शन उपयुक्तताय आमच्या उपयुक्तताय एपीआयंत 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
),