Saltar al contenido principal Salta a docs navegación
Check
in English

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

displayKaqpa 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 xschaymanta 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}para sm, md, lg, xly xxl.

Maypichus chaninchasqa hukninmi:

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

Qhawachiy chanikuna tikray atikunman SCSS displaykaqpi riqsichisqa chanikunata tikraspa chaymanta wakmanta huñuspa.$utilities

Willayta tapuykuna pantalla anchokunata qusqa p'akiywan utaq aswan hatunwan afectan . Ejemplopaq, , , pantallakunapi .d-lg-nonechuran .display: none;lgxlxxl

Ejemplos

d-inline nisqa
d-inline nisqa
html nisqapi
<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-bloque nisqa d-bloque nisqa
html nisqapi
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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-noneclaseta utaq huknin claseta .d-{sm,md,lg,xl,xxl}-noneima pantalla variación kutichiqpaqpas llamk'achiylla.

Huk elemento pantalla sayaykunamanta qusqa intervalollapi rikuchinapaq huk .d-*-noneclase huk clasewan hukllachayta atikunki .d-*-*, kayhina .d-none .d-md-block .d-xl-none .d-xxl-noneelementota 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
Oculta solamente en xxl .d-xxl-none .d-xxl-block
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
pakay lg y pantallas más anchas nisqapi
lg nisqamanta aswan huch’uy pantallakunapi pakay
html nisqapi
<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

displayImpresión qhaway yanapakuy clasekunaykuwan imprimichkaspa elementokuna chanin tikray . Yanapakuy kikin displaychanikuna 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.

Pantallalla (Impresiónllapi pakay) .
Imprimir Solamente (Pantallallapi pakay) .
Pantallapi hatunkama pakay, ichaqa sapa kuti impreso kaqpi rikuchiy
html nisqapi
<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
    ),