ਡਿਸਪਲੇਅ ਪ੍ਰਾਪਰਟੀ

ਸਾਡੀ ਡਿਸਪਲੇ ਯੂਟਿਲਟੀਜ਼ ਦੇ ਨਾਲ ਕੰਪੋਨੈਂਟਸ ਦੇ ਡਿਸਪਲੇ ਵੈਲਯੂ ਅਤੇ ਹੋਰ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਅਤੇ ਜਵਾਬਦੇਹ ਰੂਪ ਵਿੱਚ ਟੌਗਲ ਕਰੋ। ਕੁਝ ਹੋਰ ਆਮ ਮੁੱਲਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਨਾਲ ਹੀ ਪ੍ਰਿੰਟਿੰਗ ਦੌਰਾਨ ਡਿਸਪਲੇ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਕੁਝ ਵਾਧੂ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਕਿਦਾ ਚਲਦਾ

ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ ਡਿਸਪਲੇ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਨਾਲ 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

ਡਿਸਪਲੇ ਦੇ ਮੁੱਲਾਂ ਨੂੰ SCSS displayਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲ ਕੇ ਅਤੇ ਮੁੜ ਕੰਪਾਇਲ ਕਰਕੇ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ ।$utilities

ਮੀਡੀਆ ਸਵਾਲ ਦਿੱਤੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਜਾਂ ਵੱਡੇ ਨਾਲ ਸਕ੍ਰੀਨ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ । ਉਦਾਹਰਨ ਲਈ, , , ਅਤੇ ਸਕ੍ਰੀਨਾਂ 'ਤੇ .d-lg-noneਸੈੱਟ ਕਰਦਾ ਹੈ।display: none;lgxlxxl

ਉਦਾਹਰਨਾਂ

d-ਇਨਲਾਈਨ

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`
md 'ਤੇ ਹੀ ਲੁਕਿਆ ਹੋਇਆ ਹੈ	`.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`
ਸਿਰਫ 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`

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