Luncat ka eusi utama Luncat ka navigasi docs
in English

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 xxl, teu boga breakpoint singketan di dinya. Ieu kusabab kelas-kelas ieu 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, xl, jeung 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
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
    ),