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.

Dina kaca ieu

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 xxl, 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, xljeung xxl.

Dimana nilai mangrupa salah sahiji:

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

Nilai tampilan bisa dirobah ku ngarobah $displaysvariabel jeung recompiling SCSS.

Patarosan média mangaruhan lebar layar kalayan titik putus anu dipasihkeun atanapi langkung ageung . Contona, .d-lg-nonedisetel display: none;dina lg, xl, jeung xxllayar.

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 elemen responsif pikeun tiap ukuran layar.

Pikeun nyumputkeun elemen saukur make .d-nonekelas atawa salah sahiji .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-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 .d-xxl-block`
Disumputkeun ukur dina xxl	`.d-xxl-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 .d-xxl-none`
Katingali ngan dina xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

nyumput dina layar leuwih leutik batan lg

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

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

Sass

Utiliti API

Utiliti tampilan dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti API.

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