in English

Ohechauka mba’ekuaarã

Pya’e ha ombohováivo emoambue componente jehechaukaha valor ha hetave mba’e ore utilidad jehechaukarã ndive. Oike pytyvõ peteĩva umi valor ojepuruvévape g̃uarã, avei oĩ extra ojejoko hag̃ua jehechauka oñeimprimi jave.

Mba’éichapa omba’apo

Emoambue mba’ekuaarã displaymba’ekuaarã ore mbo’esyry utilidad jehechaukarã ombohováiva ndive. Roipytyvõ a propósito peteĩ subconjunto añoite opaite valor ikatúvagui display. Umi clase ikatu oñembojoaju opaichagua efecto-pe g̃uarã reikotevẽháicha.

Notación rehegua

Umi mboꞌepy utilidad jehechaukarã ojeporúva opaite punto de ruptura -pe , guive guive xspeve xl, ndorekói ipypekuéra punto de ruptura ñemombyky. Péva ojehu umi mboꞌepy ojeporúgui guive min-width: 0;ha yvate gotyo, ha upéicha ndojejokói peteĩ ñeporandu medio rehegua rehe. Umi punto de ruptura hembýva katu oike peteĩ abreviatura punto de ruptura rehegua.

Upéicha rupi, umi mbo’esyry oñembohéra ojeporúvo formato:

  • .d-{value}g̃uarãxs
  • .d-{breakpoint}-{value}péva sm, md, lg, ha xl.

Oĩháme valor peteĩva:

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

Umi mbaꞌekuaarã jehechaukaha ikatu oñemoambue oñemoambuévo pe $displaysmbaꞌekuaarã ha oñembojoaju jeývo SCSS.

Umi consulta medio rehegua ohupyty pantalla ipekue orekóva punto de ruptura oñeme’ẽva térã tuichavéva . Techapyrã, .d-lg-noneomohenda display: none;mokõivévape lgha xlpantalla-kuérape.

Tembiecharã

d-en línea rehegua
d-en línea rehegua 
<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-bloque rehegua d-bloque rehegua 
<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>

Oñomi umi elemento

Oñemoheñói pyaꞌeve hag̃ua móvil-pe g̃uarã, eipuru mboꞌepy jehechaukarã ombohováiva ohechauka ha omokañy hag̃ua elemento tembipuru rupive. Ejehekýi emoheñói hag̃ua peteĩchagua ñanduti renda versión iñambuévapaite, upéva rangue emokañy umi elemento ombohováiva peteĩteĩva pantalla tuichakuépe g̃uarã.

Oñomi hag̃ua elemento eipuru mante .d-nonemboꞌepy térã peteĩva .d-{sm,md,lg,xl}-nonemboꞌepy oimeraẽva pantalla ñemoambue ombohováivape g̃uarã.

Ohechauka hag̃ua peteĩ elemento peteĩ intervalo oñemeꞌevaꞌekue pantalla tuichakue reheguápe añoite ikatu embojoaju peteĩ .d-*-nonemboꞌepy peteĩ mboꞌepy ndive .d-*-*, techapyrãramo .d-none .d-md-block .d-xl-noneomokañýta elemento opaite pantalla tuichakuépe g̃uarã ndahaꞌeiramo umi tembipuru mediano ha tuichávape.

Pantalla tuichakue Mbo'ehakoty
Okañy opavave ári .d-none
Oñeñomi xs-pe añoite .d-none .d-sm-block
Oñomi sm rehe añoite .d-sm-none .d-md-block
Oñomi md-pe añoite .d-md-none .d-lg-block
Oñomi lg rehe añoite .d-lg-none .d-xl-block
Oñomi xl-pe añoite .d-xl-none
Ojehecha opavave ári .d-block
Ojehecha xs-pe añoite .d-block .d-sm-none
Ojehecha sm-pe añoite .d-none .d-sm-block .d-md-none
Ojehecha md-pe añoite .d-none .d-md-block .d-lg-none
Ojehecha lg-pe añoite .d-none .d-lg-block .d-xl-none
Ojehecha xl-pe añoite .d-none .d-xl-block
okañy umi pantalla lg ha tuichavévape
okañy umi pantalla michĩvéva lg-gui 
<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>

Ohechauka impresión-pe

Emoambue displayelementokuéra valor oñeimprimívo ñande clase utilidad jehechaukarã impresión rehegua ndive. Oike pytyvõ umi valor-kuérape g̃uarã ñande utilidad displayombohováivaicha ..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

Umi clase impresión ha jehechauka rehegua ikatu oñembojoaju.

Pantalla-pe añoite (Oñomi impresión-pe añoite) .
Imprimir Solamente (Oñomi pantalla-pe añoite) .
Eñomi tuicha peve pantalla-pe, ha katu akóinte ehechauka impresión-pe 
<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>