காட்சி சொத்து

எங்களின் காட்சிப் பயன்பாடுகள் மூலம் பாகங்கள் மற்றும் பலவற்றின் காட்சி மதிப்பை விரைவாகவும் பதிலளிக்கக்கூடியதாகவும் மாற்றவும். மிகவும் பொதுவான சில மதிப்புகளுக்கான ஆதரவையும், அச்சிடும் போது காட்சியைக் கட்டுப்படுத்தும் சில கூடுதல்களையும் உள்ளடக்கியது.

இந்தப் பக்கத்தில்

எப்படி இது செயல்படுகிறது

எங்களின் பதிலளிக்கக்கூடிய காட்சி பயன்பாட்டு வகுப்புகள் மூலம் displayசொத்தின் மதிப்பை மாற்றவும் . சாத்தியமான அனைத்து மதிப்புகளின் துணைக்குழுவை மட்டுமே நாங்கள் வேண்டுமென்றே ஆதரிக்கிறோம் display. உங்களுக்குத் தேவையான பல்வேறு விளைவுகளுக்கு வகுப்புகள் இணைக்கப்படலாம்.

குறிப்பு

அனைத்து பிரேக் பாயிண்ட்களுக்கும் பொருந்தும் டிஸ்ப்ளே பயன்பாட்டு வகுப்புகள் , முதல் வரை , அவற்றில் பிரேக்பாயிண்ட் சுருக்கம் இல்லை . ஏனென்றால், அந்த வகுப்புகள் முதல் மற்றும் அதற்கு மேல் பயன்படுத்தப்படுகின்றன, இதனால் ஊடக வினவலுக்குக் கட்டுப்படாது. எவ்வாறாயினும், மீதமுள்ள பிரேக் பாயிண்ட்களில் பிரேக் பாயிண்ட் சுருக்கமும் அடங்கும்.xsxxlmin-width: 0;

எனவே, வகுப்புகள் வடிவமைப்பைப் பயன்படுத்தி பெயரிடப்பட்டுள்ளன:

.d-{value}க்கானxs
.d-{breakpoint}-{value}, sm, , மற்றும் . md_lgxlxxl

மதிப்பு இதில் ஒன்று:

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

SCSS displayஇல் வரையறுக்கப்பட்ட மதிப்புகளை மாற்றி மறுதொகுப்பதன் மூலம் காட்சி மதிப்புகளை மாற்றலாம் .$utilities

மீடியா வினவல்கள் கொடுக்கப்பட்ட பிரேக் பாயிண்ட் அல்லது அதற்கும் அதிகமான திரையின் அகலத்தைப் பாதிக்கும் . எடுத்துக்காட்டாக, , மற்றும் திரைகளில் .d-lg-noneஅமைக்கிறது .display: none;lgxlxxl

எடுத்துக்காட்டுகள்

டி-இன்லைன்

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

டி-பிளாக் டி-பிளாக்

html

<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நடுத்தர மற்றும் பெரிய சாதனங்களைத் தவிர அனைத்து திரை அளவுகளுக்கான உறுப்பை மறைக்கும்.

திரை அளவு	வர்க்கம்
அனைத்திலும் மறைக்கப்பட்டுள்ளது	`.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`
xxl இல் மட்டும் மறைக்கப்பட்டுள்ளது	`.d-xxl-none .d-xxl-block`
எல்லாவற்றிலும் தெரியும்	`.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`

lg மற்றும் பரந்த திரைகளில் மறைக்கவும்

lg ஐ விட சிறிய திரைகளில் மறைக்கவும்

html

<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

அச்சு மற்றும் காட்சி வகுப்புகளை இணைக்கலாம்.

திரை மட்டும் (அச்சில் மட்டும் மறை)

அச்சிட மட்டும் (திரையில் மட்டும் மறை)

திரையில் பெரிதாக மறை, ஆனால் எப்போதும் அச்சில் காட்டவும்

html

<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
    ),