காட்சி சொத்து
எங்களின் காட்சிப் பயன்பாடுகள் மூலம் பாகங்கள் மற்றும் பலவற்றின் காட்சி மதிப்பை விரைவாகவும் பதிலளிக்கக்கூடியதாகவும் மாற்றவும். மிகவும் பொதுவான சில மதிப்புகளுக்கான ஆதரவையும், அச்சிடும்போது காட்சியைக் கட்டுப்படுத்துவதற்கான சில கூடுதல்களையும் உள்ளடக்கியது.
எங்களின் பதிலளிக்கக்கூடிய காட்சி பயன்பாட்டு வகுப்புகள் மூலம் displayசொத்தின் மதிப்பை மாற்றவும் . சாத்தியமான அனைத்து மதிப்புகளின் துணைக்குழுவை மட்டுமே நாங்கள் வேண்டுமென்றே ஆதரிக்கிறோம் display. உங்களுக்குத் தேவையான பல்வேறு விளைவுகளுக்கு வகுப்புகள் இணைக்கப்படலாம்.
அனைத்து பிரேக்பாயிண்ட்களுக்கும் பொருந்தும் டிஸ்ப்ளே பயன்பாட்டு வகுப்புகள் , முதல் xsவரை xl, அவற்றில் பிரேக்பாயிண்ட் சுருக்கம் இல்லை. ஏனென்றால், அந்த வகுப்புகள் முதல் min-width: 0;மற்றும் அதற்கு மேல் பயன்படுத்தப்படுகின்றன, இதனால் ஊடக வினவலுக்குக் கட்டுப்படாது. எவ்வாறாயினும், மீதமுள்ள பிரேக் பாயிண்ட்களில் பிரேக் பாயின்ட் சுருக்கமும் அடங்கும்.
எனவே, வகுப்புகள் வடிவமைப்பைப் பயன்படுத்தி பெயரிடப்பட்டுள்ளன:
.d-{value}க்கானxs.d-{breakpoint}-{value}, , மற்றும் .sm_mdlgxl
மதிப்பு இதில் ஒன்று:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
கொடுக்கப்பட்ட பிரேக் பாயிண்ட் அல்லது அதற்கும் அதிகமான திரையின் அகலத்தை மீடியா வினவுகிறது . எடுத்துக்காட்டாக, இரண்டிலும் திரைகளிலும் அமைக்கிறது .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 |
| எம்டியில் மட்டும் மறைக்கப்பட்டுள்ளது | .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 |
| எஸ்எம்மில் மட்டுமே தெரியும் | .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 |
<div class="d-lg-none">hide on screens wider than lg</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
அச்சு மற்றும் காட்சி வகுப்புகளை இணைக்கலாம்.
<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>