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.

Ing kaca iki

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 xxl, 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, lg, xllan xxl.

Ngendi nilai salah siji saka:

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

Nilai tampilan bisa diowahi kanthi ngganti displaynilai sing ditetepake $utilitieslan ngumpulake maneh SCSS.

Pitakonan media mengaruhi ambane layar kanthi breakpoint utawa luwih gedhe . Contone, .d-lg-nonenyetel display: none;ing lg, xl, lan xxllayar.

Tuladha

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

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>

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,xxl}-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-none .d-xxl-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`
Didhelikake mung ing xxl	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
Katon mung ing xxl	`.d-none .d-xxl-block`

ndhelikake ing layar lg lan luwih akeh

ndhelikake ing layar luwih cilik tinimbang 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>

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-grid
.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)

Mung Cetak (Mung Singidaken ing layar)

Singidaken nganti gedhe ing layar, nanging tansah ditampilake ing print

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

Utilities API

Utilitas tampilan diumumake ing API keperluan kita ing scss/_utilities.scss. Sinau carane nggunakake API keperluan.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),