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.

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 xl, 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, kaj xl.

Kie valoro estas unu el:

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

La montraj valoroj povas esti ŝanĝitaj ŝanĝante la $displaysvariablon kaj rekompilante la SCSS.

La amaskomunikilaj demandoj influas ekranlarĝojn kun la donita rompopunkto aŭ pli granda . Ekzemple, .d-lg-nonearoj display: none;sur ambaŭ lgkaj xlekranoj.

Ekzemploj

d-inline

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

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

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}-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-nonekaŝos la elementon por ĉiuj ekrangrandoj krom sur mezaj kaj grandaj aparatoj.

Ekrano Grandeco	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`
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`

kaŝi sur lg kaj pli larĝaj ekranoj

kaŝi sur ekranoj pli malgrandaj ol lg

<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 ekranaj utilecaj klasoj. 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-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

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