Bistaratzeko propietatea
Aldatu osagaien eta gehiago bistaratzeko balioa azkar eta erantzuteko gure pantaila-utilitateekin. Balio arruntenetako batzuk onartzen ditu, baita inprimatzerakoan pantaila kontrolatzeko gehigarri batzuk ere.
Nola dabil
Aldatu display
jabetzaren 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 , xxl
ez dute eten-puntuaren laburdurarik. Hau da, klase horiek batetik min-width: 0;
eta gora aplikatzen direlako, eta, beraz, ez daudelako multimedia kontsulta bati lotzen. Gainerako eten-puntuek, ordea, eten-puntuaren laburdura dute.
Horrela, klaseak formatua erabiliz izendatzen dira:
.d-{value}
rentzatxs
.d-{breakpoint}-{value}
sm
,md
,lg
,xl
etaxxl
. _
Non balioa hauetako bat den:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
$displays
Bistaratzeko balioak alda daitezke aldagaia aldatuz eta SCSS birkonpilatuz.
Multimedia-kontsultek pantaila-zabaleretan eragiten dute emandako eten puntuarekin edo handiagoarekin . Adibidez, , , eta pantailak .d-lg-none
ezartzen display: none;
ditu .lg
xl
xxl
Adibideak
<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>
<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 beharrean pantaila-tamaina bakoitzeko elementuak erantzuteko.
Elementuak ezkutatzeko, besterik gabe, erabili .d-none
klasea edo klaseetako bat .d-{sm,md,lg,xl,xxl}-none
pantaila erantzuteko edozein aldaeratarako.
Elementu bat pantaila-tamainen tarte jakin batean soilik erakusteko, klase bat .d-*-none
klase 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 .d-xxl-block |
xxl-n bakarrik ezkutatuta | .d-xxl-none |
Guztietan ikusgai | .d-block |
Xs-en soilik 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 |
<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 display
elementuen balioa inprimatzerakoan gure inprimatzeko pantaila-erabilgarritasun klaseekin. Gure erreaktibodun utilitateen display
balio berberen laguntza 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 bistaratzeko klaseak konbinatu daitezke.
<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
),