Source

Pintonan harta

Gancang sareng responsif togél nilai tampilan komponén sareng seueur deui sareng utilitas tampilan kami. Ngawengku rojongan pikeun sababaraha nilai leuwih umum, kitu ogé sababaraha tambahan pikeun ngadalikeun tampilan nalika nyitak.

Kumaha gawéna

Ngarobih nilai displayharta sareng kelas utiliti tampilan responsif kami. Urang ngahaja ngarojong ngan sawaréh ti sakabéh nilai mungkin pikeun display. Kelas tiasa digabungkeun pikeun sagala rupa épék anu anjeun peryogikeun.

Notasi

Témbongkeun kelas utilitas nu lumaku pikeun sakabéh breakpoints , ti xska xl, teu boga breakpoint singketan di dinya. Ieu kusabab kelas kasebut diterapkeun ti min-width: 0;sareng ka luhur, sahingga henteu kaiket ku pamundut média. The breakpoints sésana, kumaha oge, kaasup hiji singketan breakpoint.

Sapertos kitu, kelasna namina nganggo format:

  • .d-{value}pikeunxs
  • .d-{breakpoint}-{value}keur sm, md, lg, jeung xl.

Dimana nilai mangrupa salah sahiji:

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

Média naroskeun lebar layar pangaruh sareng titik putus anu dipasihkeun atanapi langkung ageung . Contona, .d-lg-nonesusunan display: none;dina duanana lgsarta xllayar.

Contona

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

Unsur nyumputkeun

Pikeun ngembangkeun gancang mobile-friendly, make kelas tampilan responsif pikeun némbongkeun sarta nyumputkeun elemen ku alat. Ulah nyieun versi sagemblengna béda tina situs sarua, gantina nyumputkeun unsur responsif pikeun tiap ukuran layar.

Pikeun nyumputkeun elemen saukur make .d-nonekelas atawa salah sahiji .d-{sm,md,lg,xl}-nonekelas pikeun sagala variasi layar responsif.

Pikeun nembongkeun hiji unsur ngan dina interval tina ukuran layar nu bisa ngagabungkeun hiji .d-*-nonekelas kalawan .d-*-*kelas hiji, Contona .d-none .d-md-block .d-xl-nonebakal nyumputkeun unsur pikeun sakabéh ukuran layar iwal dina alat sedeng jeung badag.

Ukuran layar Kelas
Disumputkeun sadayana .d-none
Disumputkeun ngan dina xs .d-none .d-sm-block
Disumputkeun ngan dina sm .d-sm-none .d-md-block
Disumputkeun ukur dina md .d-md-none .d-lg-block
Disumputkeun ngan dina lg .d-lg-none .d-xl-block
Disumputkeun ukur dina xl .d-xl-none
Katingali dina sadayana .d-block
Katingali ngan dina xs .d-block .d-sm-none
Katingali ngan dina sm .d-none .d-sm-block .d-md-none
Katingali ngan dina md .d-none .d-md-block .d-lg-none
Katingali ngan dina lg .d-none .d-lg-block .d-xl-none
Katingali ngan dina xl .d-none .d-xl-block
hide on screens wider than lg
nyumput dina layar leuwih leutik batan 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>

Témbongkeun dina citak

Robah displaynilai elemen nalika nyitak nganggo kelas utiliti tampilan print kami. Ngawengku pangrojong pikeun nilai anu sami sareng utilitas displayresponsif kami ..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 sareng tampilan tiasa digabungkeun.

Layar Ngan (Sumputkeun dina citak wungkul)
Print Only (Hide on screen only)
Sumputkeun nepi ka badag dina layar, tapi salawasna dipintonkeun dina citak
<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>