Source

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.

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 , xlez 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, lgeta xl.

Non balioa hauetako bat den:

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

Multimedia-kontsultek pantaila-zabalerak eragiten dituzte emandako eten puntuarekin edo handiagoarekin . Adibidez, bietan eta pantailetan .d-lg-nonemultzoak .display: none;lgxl

Adibideak

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

Elementuak ezkutatzea

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

Elementuak ezkutatzeko, besterik gabe, erabili .d-noneklasea edo klaseetako bat .d-{sm,md,lg,xl}-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, 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
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
hide on screens wider than lg
ezkutatu lg baino pantaila txikiagoetan
<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>

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-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)
Print Only (Hide on screen only)
Ezkutatu handira pantailan, baina erakutsi beti inprimatzean
<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>