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 display
posedaĵ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}
porsm
,md
,lg
,xl
, kajxxl
.
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 $displays
variablon kaj rekompilante la SCSS.
La amaskomunikilaj demandoj influas ekranlarĝojn kun la donita rompopunkto aŭ pli granda . Ekzemple, .d-lg-none
agordas display: none;
sur lg
, xl
, kaj xxl
ekranoj.
Ekzemploj
<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>
<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-none
klason aŭ unu el la .d-{sm,md,lg,xl,xxl}-none
klasoj por iu ajn respondema ekranvario.
Por montri elementon nur sur difinita intervalo de ekrangrandoj, vi povas kombini unu .d-*-none
klason kun .d-*-*
klaso, ekzemple .d-none .d-md-block .d-xl-none .d-xxl-none
kaŝ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 .d-xxl-block |
Kaŝita nur sur xxl | .d-xxl-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 .d-xxl-none |
Videbla nur sur xxl | .d-none .d-xxl-block |
<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 display
valoron de elementoj dum presado per niaj presitaj ekranklasoj. Inkluzivas subtenon por la samaj display
valoroj 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.
<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
),