in English

Montra propraĵo

Rapide kaj respondeme ŝanĝu la montran valoron de komponantoj kaj pli kun niaj ekranaj utilecoj. Inkluzivas subtenon por kelkaj el la pli oftaj valoroj, same kiel kelkajn kromaĵojn por kontroli ekranon dum presado.

Sur ĉi tiu paĝo

Kiel ĝi funkcias

Ŝanĝu la valoron de la displayposedaĵo per niaj respondemaj montraj utilecaj klasoj. Ni intence subtenas nur subaron de ĉiuj eblaj valoroj por display. Klasoj povas esti kombinitaj por diversaj efikoj laŭ via bezono.

Notacio

Montru utilklasojn kiuj validas por ĉiuj rompopunktoj , de xsĝis xxl, havas neniun rompopunktomallongigon en ili. Ĉi tio estas ĉar tiuj klasoj estas aplikataj de min-width: 0;kaj supren, kaj tiel ne estas ligitaj per amaskomunikila demando. La ceteraj rompopunktoj tamen inkluzivas mallongpunkton.

Kiel tia, la klasoj estas nomitaj uzante la formaton:

.d-{value}porxs
.d-{breakpoint}-{value}por sm, md, lg, xl, kaj xxl.

Kie valoro estas unu el:

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

La montraj valoroj povas esti ŝanĝitaj ŝanĝante la displayvalorojn difinitajn en $utilitieskaj rekompilante la SCSS.

La amaskomunikilaj demandoj influas ekranlarĝojn kun la donita rompopunkto aŭ pli granda . Ekzemple, .d-lg-noneagordas display: none;sur lg, xl, kaj xxlekranoj.

Ekzemploj

d-inline

html

<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-bloko d-bloko

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Kaŝi elementojn

Por pli rapida evoluado por poŝtelefono, uzu respondemajn ekranklasojn por montri kaj kaŝi elementojn per aparato. Evitu krei tute malsamajn versiojn de la sama retejo, anstataŭe kaŝu elementojn responde por ĉiu ekrana grandeco.

Por kaŝi elementojn simple uzu la .d-noneklason aŭ unu el la .d-{sm,md,lg,xl,xxl}-noneklasoj por iu ajn respondema ekranvario.

Por montri elementon nur sur difinita intervalo de ekrangrandoj, vi povas kombini unu .d-*-noneklason kun .d-*-*klaso, ekzemple .d-none .d-md-block .d-xl-none .d-xxl-nonekaŝos la elementon por ĉiuj ekrangrandoj krom sur mezaj kaj grandaj aparatoj.

Ekrangrandeco	Klaso
Kaŝita sur ĉiuj	`.d-none`
Kaŝita nur sur xs	`.d-none .d-sm-block`
Kaŝita nur sur sm	`.d-sm-none .d-md-block`
Kaŝita nur sur md	`.d-md-none .d-lg-block`
Kaŝita nur sur lg	`.d-lg-none .d-xl-block`
Kaŝita nur sur xl	`.d-xl-none`
Kaŝita nur sur xxl	`.d-xxl-none .d-xxl-block`
Videbla sur ĉiuj	`.d-block`
Videbla nur sur xs	`.d-block .d-sm-none`
Videbla nur sur sm	`.d-none .d-sm-block .d-md-none`
Videbla nur sur md	`.d-none .d-md-block .d-lg-none`
Videbla nur sur lg	`.d-none .d-lg-block .d-xl-none`
Videbla nur sur xl	`.d-none .d-xl-block .d-xxl-none`
Videbla nur sur xxl	`.d-none .d-xxl-block`

kaŝi sur lg kaj pli larĝaj ekranoj

kaŝi sur ekranoj pli malgrandaj ol lg

html

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

Montriĝo en presita

Ŝanĝu la displayvaloron de elementoj dum presado per niaj presitaj ekranklasoj. Inkluzivas subtenon por la samaj displayvaloroj kiel niaj respondemaj .d-*iloj.

.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

La presitaj kaj montraj klasoj povas esti kombinitaj.

Ekrano Nur (Kaŝi nur sur presado)

Nur Presi (Kaŝi nur sur la ekrano)

Kaŝu ĝis granda sur ekrano, sed ĉiam montru presite

html

<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

Utilaĵoj API

Montraj utilecoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn API.

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