Bistaratzeko propietatea

Aldatu osagaien bistaratzeko balioa eta gehiago gure bistaratzeko utilitateekin. Balio ohikoenetako batzuen laguntza barne hartzen du, baita inprimatzerakoan pantaila kontrolatzeko gehigarri batzuk ere.

Orrialde honetan

Nola dabil

Aldatu displayjabetzaren balioa gure sentikorrei bistaratzeko erabilgarritasun klaseekin. Nahita balio posible guztien azpimultzo bat baino ez dugu onartzen display. Klaseak hainbat efektu konbina daitezke behar duzun moduan.

Notazioa

Bistaratu eten -puntu guztiei aplikatzen zaizkien erabilgarritasun-klaseek , tik xs-etik , xxlez dute eten-puntuaren laburdurarik. Hau da, klase horiek batetik min-width: 0;eta gora aplikatzen direlako, eta, beraz, ez daude multimedia-kontsulta bati lotuta. Gainerako eten-puntuek, ordea, eten-puntuaren laburdura dute.

Horrela, klaseak formatua erabiliz izendatzen dira:

.d-{value}rentzatxs
.d-{breakpoint}-{value}sm, md, lg, xleta xxl. _

Non balioa hauetako bat den:

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

displayBistaratzeko balioak alda daitezke SCSS -n definitutako balioak aldatuz $utilitieseta berriro konpilatuz.

Multimedia-kontsultek pantaila-zabaleretan eragiten dute emandako eten puntuarekin edo handiagoarekin . Adibidez, , , eta pantailak .d-lg-noneezartzen display: none;ditu .lgxlxxl

Adibideak

d-lerroan

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-blokea d-blokea

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>

Elementuak ezkutatzea

Mugikorretarako egokia den garapen azkarrago lortzeko, erabili gailuaren arabera elementuak erakusteko eta ezkutatzeko. Saihestu gune beraren bertsio guztiz desberdinak sortzea, ezkutatu beharrean pantaila-tamaina bakoitzeko elementuak erantzuteko.

Elementuak ezkutatzeko, besterik gabe, erabili .d-noneklasea edo klaseetako bat .d-{sm,md,lg,xl,xxl}-nonepantaila erantzuteko edozein aldaeratarako.

Elementu bat pantaila-tamainen tarte jakin batean soilik erakusteko, klase bat .d-*-noneklase batekin konbina dezakezu .d-*-*; adibidez .d-none .d-md-block .d-xl-none .d-xxl-none, elementua ezkutatu egingo da pantaila-tamaina guztietan, gailu ertain eta handietan izan ezik.

Pantailaren tamaina	Klasea
Guztietan ezkutatuta	`.d-none`
Xs-en bakarrik ezkutatuta	`.d-none .d-sm-block`
Sm-n bakarrik ezkutatuta	`.d-sm-none .d-md-block`
Md-n bakarrik ezkutatuta	`.d-md-none .d-lg-block`
Lg-n bakarrik ezkutatuta	`.d-lg-none .d-xl-block`
Xl-n bakarrik ezkutatuta	`.d-xl-none`
xxl-n bakarrik ezkutatuta	`.d-xxl-none .d-xxl-block`
Guztietan ikusgai	`.d-block`
Xs-en bakarrik ikusgai	`.d-block .d-sm-none`
Sm-n bakarrik ikusgai	`.d-none .d-sm-block .d-md-none`
Md-n bakarrik ikusgai	`.d-none .d-md-block .d-lg-none`
Lg-n bakarrik ikusgai	`.d-none .d-lg-block .d-xl-none`
xl-n bakarrik ikusgai	`.d-none .d-xl-block .d-xxl-none`
xxl-n bakarrik ikusgai	`.d-none .d-xxl-block`

ezkutatu lg eta pantaila zabalagoetan

ezkutatu lg baino pantaila txikiagoetan

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>

Bistaratzea inprimatuta

Aldatu displayelementuen balioa inprimatzerakoan gure inprimatzeko pantaila-erabilgarritasun klaseekin. Gure erreaktibodun utilitateen displaybalio berberen euskarria barne hartzen du ..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

Inprimatzeko eta erakusteko klaseak konbina daitezke.

Pantaila soilik (ezkutatu inprimatzean soilik)

Inprimatu soilik (ezkutatu pantailan soilik)

Ezkutatu handira pantailan, baina erakutsi beti inprimatzean

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

Utilities APIa

Bistaratzeko utilitateak gure utilitateen APIan deklaratzen dira scss/_utilities.scss. Ikasi utilitateen APIa erabiltzen.

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