Source

Pintonan harta

Gancang sareng responsif togél nilai tampilan komponén sareng seueur deui kalayan 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

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