Erekana umutungo
Byihuse kandi byitondewe guhinduranya agaciro kerekana ibice nibindi byinshi hamwe nibikorwa byacu byerekana. Harimo inkunga kuri bimwe mubisanzwe indangagaciro, kimwe ninyongera zo kugenzura ibyerekanwa mugihe icapiro.
Uburyo ikora
Hindura agaciro display
k'umutungo hamwe n'ibisubizo byacu byingirakamaro byerekana ibyiciro. Dushyigikiye nkana igice gusa cyindangagaciro zose zishoboka kuri display
. Amasomo arashobora guhuzwa kubintu bitandukanye nkuko ubikeneye.
Icyitonderwa
Erekana ibyiciro byingirakamaro bikoreshwa mubice byose , kuva xs
kuri xxl
, nta magambo ahinnye muri byo. Ibi ni ukubera ko ayo masomo akoreshwa kuva min-width: 0;
hejuru no hejuru, bityo ntagahuzwa nibibazo byitangazamakuru. Ibice bisigaye, ariko, birimo amagambo ahinnye.
Nkibyo, amasomo yitiriwe akoresheje imiterere:
.d-{value}
Kurixs
.d-{breakpoint}-{value}
Kurism
,,,, na .md
_lg
_xl
xxl
Aho agaciro ari kamwe muri:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Kugaragaza indangagaciro zirashobora guhinduka muguhindura $displays
impinduka no gusubiramo SCSS.
Ibibazo byibitangazamakuru bigira ingaruka mubugari bwa ecran hamwe nibice byatanzwe cyangwa binini . Kurugero, Gushiraho .d-lg-none
,, na display: none;
Mugaragaza .lg
xl
xxl
Ingero
<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>
Guhisha ibintu
Kugirango iterambere ryihuta-ryimikorere, koresha ibyiciro byerekana byerekana kwerekana no guhisha ibintu ukoresheje ibikoresho. Irinde gukora verisiyo zitandukanye rwose zurubuga rumwe, ahubwo uhishe ibintu witonze kuri buri bunini bwa ecran.
Guhisha ibintu gusa koresha urwego .d-none
cyangwa rimwe .d-{sm,md,lg,xl,xxl}-none
mubyiciro kugirango bisubizwe neza.
Kugirango werekane ikintu gusa kumurongo watanzwe wubunini bwa ecran urashobora guhuza icyiciro kimwe .d-*-none
nicyiciro .d-*-*
, kurugero .d-none .d-md-block .d-xl-none .d-xxl-none
ruzahisha element kubunini bwa ecran yose usibye kubikoresho biciriritse kandi binini.
Ingano ya ecran | Icyiciro |
---|---|
Hihishe kuri bose | .d-none |
Byihishe kuri xs gusa | .d-none .d-sm-block |
Byihishe kuri sm gusa | .d-sm-none .d-md-block |
Hihishe kuri md gusa | .d-md-none .d-lg-block |
Byihishe kuri lg gusa | .d-lg-none .d-xl-block |
Hihishe kuri xl gusa | .d-xl-none .d-xxl-block |
Byihishe kuri xxl gusa | .d-xxl-none |
Biboneka kuri bose | .d-block |
Biboneka gusa kuri xs | .d-block .d-sm-none |
Biboneka gusa kuri sm | .d-none .d-sm-block .d-md-none |
Biboneka gusa kuri md | .d-none .d-md-block .d-lg-none |
Biboneka gusa kuri lg | .d-none .d-lg-block .d-xl-none |
Biboneka gusa kuri xl | .d-none .d-xl-block .d-xxl-none |
Biboneka gusa kuri 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>
Erekana mu icapiro
Hindura display
agaciro k'ibintu mugihe cyo gucapa hamwe nicapiro ryacu ryerekana ibyiciro byingirakamaro. Harimo inkunga kubintu bimwe display
nkibikorwa byacu .d-*
byitabira.
.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
Ibyiciro byo gucapa no kwerekana ibyiciro birashobora guhuzwa.
<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
Ibikorwa API
Kugaragaza ibikorwa byingenzi byatangajwe mubikorwa byacu API muri scss/_utilities.scss
. Wige gukoresha ibikoresho 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
),