காட்சி சொத்து
எங்களின் காட்சிப் பயன்பாடுகள் மூலம் பாகங்கள் மற்றும் பலவற்றின் காட்சி மதிப்பை விரைவாகவும் பதிலளிக்கக்கூடியதாகவும் மாற்றவும். மிகவும் பொதுவான சில மதிப்புகளுக்கான ஆதரவையும், அச்சிடும் போது காட்சியைக் கட்டுப்படுத்தும் சில கூடுதல்களையும் உள்ளடக்கியது.
எப்படி இது செயல்படுகிறது
எங்களின் பதிலளிக்கக்கூடிய காட்சி பயன்பாட்டு வகுப்புகள் மூலம் 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 |
எம்டியில் மட்டும் மறைக்கப்பட்டுள்ளது | .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 |
எஸ்எம்மில் மட்டுமே தெரியும் | .d-none .d-sm-block .d-md-none |
எம்டியில் மட்டுமே தெரியும் | .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
),