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 display
harta 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 xs
ka 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}
keursm
,md
,lg
,xl
, jeungxxl
.
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 $displays
variabel jeung recompiling SCSS.
Patarosan média mangaruhan lebar layar kalayan titik putus anu dipasihkeun atanapi langkung ageung . Contona, .d-lg-none
disetel display: none;
dina lg
, xl
, jeung xxl
layar.
Contona
<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>
<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-none
kelas atawa salah sahiji .d-{sm,md,lg,xl,xxl}-none
kelas pikeun sagala variasi layar responsif.
Pikeun nembongkeun hiji unsur ngan dina interval tina ukuran layar nu bisa ngagabungkeun hiji .d-*-none
kelas kalawan .d-*-*
kelas hiji, Contona .d-none .d-md-block .d-xl-none .d-xxl-none
bakal 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 |
<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 display
nilai elemen nalika nyitak nganggo kelas utiliti tampilan print kami. Ngawengku pangrojong pikeun nilai anu sami sareng utilitas display
responsif 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.
<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
),