in English

Proprjetà tal-wiri

Aqleb malajr u b'mod reattiv il-valur tal-wiri tal-komponenti u aktar mal-utilitajiet tal-wiri tagħna. Jinkludi appoġġ għal uħud mill-valuri l-aktar komuni, kif ukoll xi affarijiet żejda għall-kontroll tal-wiri waqt l-istampar.

Fuq din il-paġna

Kif taħdem

Ibdel il-valur tal- displayproprjetà bil-klassijiet ta 'utilità tal-wiri li jirrispondu tagħna. Aħna apposta nappoġġjaw biss subsett tal-valuri kollha possibbli għal display. Il-klassijiet jistgħu jingħaqdu għal diversi effetti kif għandek bżonn.

Notazzjoni

Uri klassijiet ta' utilità li japplikaw għall- punti ta' waqfien kollha , minn xssa xxl, m'għandhom l-ebda abbrevjazzjoni tal-punt ta' waqfien fihom. Dan għaliex dawk il-klassijiet huma applikati minn min-width: 0;u 'l fuq, u għalhekk mhumiex marbuta b'interrogazzjoni tal-midja. Il-punti ta' waqfien li jifdal, madankollu, jinkludu abbrevjazzjoni ta' breakpoint.

Bħala tali, il-klassijiet huma msemmija bl-użu tal-format:

.d-{value}għalxs
.d-{breakpoint}-{value}għal sm, md, lg, xl, u xxl.

Fejn il- valur huwa wieħed minn:

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

Il-valuri tal-wiri jistgħu jinbidlu billi jinbidlu l- displayvaluri definiti fl $utilities-SCSS u jiġu kkompilati mill-ġdid.

Il-mistoqsijiet tal-midja jaffettwaw il-wisa' tal-iskrin bil-punt ta' waqfien mogħti jew akbar . Per eżempju, .d-lg-nonesettijiet display: none;fuq lg, xl, u xxlskrins.

Eżempji

d-inline

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>

d-blokk d-blokk

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>

Ħabi ta 'elementi

Għal żvilupp aktar mgħaġġel li jiffavorixxi l-mowbajl, uża klassijiet tal-wiri li jirrispondu biex turi u taħbi elementi skont it-tagħmir. Evita li toħloq verżjonijiet kompletament differenti tal-istess sit, minflok aħbi l-elementi b'mod reattiv għal kull daqs tal-iskrin.

Biex taħbi l-elementi sempliċement uża l- .d-noneklassi jew waħda mill- .d-{sm,md,lg,xl,xxl}-noneklassijiet għal kwalunkwe varjazzjoni tal-iskrin li tirreaġixxi.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none .d-xxl-none will hide the element for all screen sizes except on medium and large devices.

Screen size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none`
Hidden only on xxl	`.d-xxl-none .d-xxl-block`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block .d-xxl-none`
Visible only on xxl	`.d-none .d-xxl-block`

ħabi fuq lg u skrins usa

hide on screens smaller than 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 in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

.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

The print and display classes can be combined.

Screen Only (Hide on print only)

Stampa biss (Aħbi fuq l-iskrin biss)

Aħbi sa kbar fuq l-iskrin, imma dejjem uri fuq l-istampar

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>

Sass

Utilitajiet API

L-utilitajiet tal-wiri huma ddikjarati fl-API tal-utilitajiet tagħna f' scss/_utilities.scss. Tgħallem kif tuża l-API tal-utilitajiet.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),