Ejupi contenido principal-pe Eike docs jeguatahápe
Check
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 xspeve xxl, 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, xl, ha xxl.

Oĩháme valor peteĩva:

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

Umi mbaꞌekuaarã jehechaukaha ikatu oñemoambue oñemoambuévo umi displaymbaꞌekuaarã oñembohekopyréva $utilitiesSCSS-pe ha oñembojoaju jeývo.

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;, lg, xlha xxlpantalla-kuérape.

Tembiecharã

d-en línea rehegua
d-en línea rehegua
html rehegua
<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 rehegua d-bloque rehegua
html rehegua
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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,xxl}-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-none .d-xxl-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
Oñomi xxl-pe añoite .d-xxl-none .d-xxl-block
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 .d-xxl-none
Ojehecha xxl-pe añoite .d-none .d-xxl-block
okañy umi pantalla lg ha tuichavévape
okañy umi pantalla michĩvéva lg-gui
html rehegua
<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-grid
  • .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
html rehegua
<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 rehegua

API de Utilidades rehegua

Umi utilidad jehechaukarã ojedeclara ñande utilidad API-pe ary scss/_utilities.scss. Eikuaa mba’éichapa eipurukuaa API utilidad rehegua.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),