Propiedad nisqa qhawarichiy
Utqaylla chaymanta kutichispa componentekuna qhaway chanin chaymanta aswan qhaway yanapakuyniykuwan tikray. Wakin aswan riqsisqa chanikuna yanapakuyta yapan, chaymanta wakin yapasqakuna qhawayta kamachinapaq imprimiypi.
Imayna llamkan
display
Kaqpa chaninninta tikray kutichiq qhaway yanapakuy claseykuwan. Tukuy atikuq chanikunamanta huk huch'uy huñullata yanapayku propósitopaq display
. Clases nisqakunataqa imaymana efectos nisqapaqmi huñuyta atikunman necesitasqaykiman hina.
Notación
Llapa p'akisqakunaman llamk'achiq yanapakuy clasekuna qhaway , kaqmanta xs
chaymanta xxl
, mana p'akiy pisichasqa pisichasqayuqchu chaykunapi. Kayqa chay clasekuna min-width: 0;
chaymanta wichayman churasqa kasqanrayku, chaymanta chayhina mana huk willay mast'ariq tapuywan watasqa kasqankurayku. Puchuq rakikunapim ichaqa huk pakiypa pisichasqa rimaynin kachkan.
Chayhina, clasekuna sutichasqa kanku kay formatowan:
.d-{value}
paraxs
.d-{breakpoint}-{value}
parasm
,md
,lg
,xl
yxxl
.
Maypichus chaninchasqa hukninmi:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Qhawachiy chanikuna tikrayta atikunman tikrayta tikraspa $displays
chaymanta SCSS kaqmanta huñuspa.
Willayta tapuykuna pantalla anchokunata qusqa p'akiywan utaq aswan hatunwan afectan . Ejemplopaq, , , pantallakunapi .d-lg-none
churan .display: none;
lg
xl
xxl
Ejemplos
<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>
Elementokunata pakay
Aswan utqaylla kuyuchina-amigo wiñachiypaq, kutichiq qhaway clasekuna llamk'achiy elementokuna dispositivowan rikuchiypaq chaymanta pakaypaq. Ama kikin sitiomanta tukuy wak layakuna ruwayta ruwaychu, aswanpas sapa pantalla sayaypaq elementokunata kutichispa pakay.
Elementokunata pakanapaqqa .d-none
claseta utaq huknin claseta .d-{sm,md,lg,xl,xxl}-none
ima pantalla variación kutichiqpaqpas llamk'achiylla.
Huk elemento pantalla sayaykunamanta qusqa intervalollapi rikuchinapaq huk .d-*-none
clase huk clasewan hukllachayta atikunki .d-*-*
, kayhina .d-none .d-md-block .d-xl-none .d-xxl-none
elementota pakanqa llapa pantalla sayaykunapaq mana chawpi chaymanta hatun dispositivokunapichu.
Tamaño de la pantalla | Yachakuna |
---|---|
Llapallanpi pakasqa | .d-none |
Oculta solamente en xs | .d-none .d-sm-block |
Pakasqalla sm | .d-sm-none .d-md-block |
Pakasqalla md | .d-md-none .d-lg-block |
Pakasqalla lg | .d-lg-none .d-xl-block |
Oculta solamente en xl | .d-xl-none .d-xxl-block |
Oculta solamente en xxl | .d-xxl-none |
Llapallanpi rikukuq | .d-block |
Visible solamente en xs | .d-block .d-sm-none |
Visible solamente en sm | .d-none .d-sm-block .d-md-none |
Visible solamente en md | .d-none .d-md-block .d-lg-none |
Lg nisqapilla rikukun | .d-none .d-lg-block .d-xl-none |
Visible solamente en xl | .d-none .d-xl-block .d-xxl-none |
Visible solamente en xxl | .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>
Imprimiypi rikuchiy
display
Impresión qhaway yanapakuy clasekunaykuwan imprimichkaspa elementokuna chanin tikray . Yanapakuy kikin display
chanikuna kutichiypaq .d-*
yanapakuyniyku hina yapan.
.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
Imprimir chaymanta qhaway clasekuna hukllachasqa kanman.
<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
API de Utilidades nisqa
Qhawachiy yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss
. Yachay imayna ruwanakuna API llamk'achiyta.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),