Source

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