Properti tampilan

Ganti nilai tampilan komponen kanthi cepet lan responsif karo utilitas tampilan kita. Kalebu dhukungan kanggo sawetara nilai sing luwih umum, uga sawetara tambahan kanggo ngontrol tampilan nalika nyetak.

Cara kerjane

Ngganti nilai displayproperti kasebut kanthi kelas sarana tampilan responsif. Kita sengaja ndhukung mung subset saka kabeh nilai bisa kanggo display. Kelas bisa digabungake kanggo macem-macem efek sing dibutuhake.

Notasi

Tampilan kelas sarana sing ditrapake kanggo kabeh breakpoints , saka xskanggo xl, ora duwe singkatan breakpoint ing. Iki amarga kelas kasebut diterapake saka min-width: 0;lan munggah, lan kanthi mangkono ora kaiket karo pitakon media. Nanging, breakpoints sing isih ana, kalebu singkatan breakpoint.

Dadi, kelas kasebut dijenengi nggunakake format:

.d-{value}kanggoxs
.d-{breakpoint}-{value}kanggo sm, md, lglan xl.

Ngendi nilai salah siji saka:

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

Pitakonan media menehi efek jembar layar kanthi breakpoint utawa luwih gedhe . Contone, .d-lg-nonenyetel display: none;ing loro lglan xllayar.

Tuladha

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

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

Ndhelikake unsur

Kanggo pangembangan seluler sing luwih cepet, gunakake kelas tampilan responsif kanggo nuduhake lan ndhelikake unsur miturut piranti. Aja nggawe versi sing beda-beda saka situs sing padha, nanging ndhelikake unsur kanthi responsif kanggo saben ukuran layar.

Kanggo ndhelikake unsur mung nggunakake .d-nonekelas utawa salah siji saka .d-{sm,md,lg,xl}-nonekelas kanggo sembarang variasi layar responsif.

Kanggo nuduhake unsur mung ing interval tartamtu saka ukuran layar sampeyan bisa gabungke siji .d-*-nonekelas karo .d-*-*kelas, contone, .d-none .d-md-block .d-xl-nonebakal ndhelikake unsur kanggo kabeh ukuran layar kajaba ing piranti medium lan gedhe.

Ukuran Layar	kelas
Didhelikake kabeh	`.d-none`
Didhelikake mung ing xs	`.d-none .d-sm-block`
Didhelikake mung ing sm	`.d-sm-none .d-md-block`
Didhelikake mung ing md	`.d-md-none .d-lg-block`
Didhelikake mung ing lg	`.d-lg-none .d-xl-block`
Didhelikake mung ing xl	`.d-xl-none`
Katon ing kabeh	`.d-block`
Katon mung ing xs	`.d-block .d-sm-none`
Katon mung ing sm	`.d-none .d-sm-block .d-md-none`
Katon mung ing md	`.d-none .d-md-block .d-lg-none`
Katon mung ing lg	`.d-none .d-lg-block .d-xl-none`
Katon mung ing xl	`.d-none .d-xl-block`

hide on screens wider than lg

ndhelikake ing layar luwih cilik tinimbang lg

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Tampilan ing print

Ngganti displaynilai unsur nalika nyithak nganggo kelas sarana tampilan print. Kalebu dhukungan kanggo nilai sing padha karo keperluan displayresponsif kita ..d-*

.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

Kelas print lan tampilan bisa digabungake.

Mung Layar (Ndhelikake mung ing print)

Print Only (Hide on screen only)

Singidaken nganti gedhe ing layar, nanging tansah ditampilake ing print

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