Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
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 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
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
    ),