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.

Ko páhinape

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

Tembiecharã

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,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 .d-xxl-block`
Oñomi xxl-pe añoite	`.d-xxl-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 .d-xxl-none`
Ojehecha xxl-pe añoite	`.d-none .d-xxl-block`

hide on lg and wider screens

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-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) .

Print Only (Hide on screen only)

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>

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
    ),