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.

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