in English

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 displayk'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 xskuri xl, nta magambo ahinnye muri byo. Ibi ni ukubera ko ayo masomo akoreshwa kuva min-width: 0;hejuru no hejuru, bityo ntagengwa nikibazo cyitangazamakuru. Ibice bisigaye, ariko, birimo amagambo ahinnye.

Nkibyo, amasomo yitiriwe akoresheje imiterere:

  • .d-{value}Kurixs
  • .d-{breakpoint}-{value}Kuri sm,,, na . md_lgxl

Aho agaciro ari kamwe muri:

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

Kugaragaza indangagaciro zirashobora guhinduka muguhindura $displaysimpinduka no gusubiramo SCSS.

Ibibazo byibitangazamakuru bigira ingaruka mubugari bwa ecran hamwe nibice byatanzwe cyangwa binini . Kurugero, .d-lg-noneshyira display: none;kuri byombi lgna xlecran.

Ingero

d-inline
d-inline 
<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-guhagarika d-guhagarika 
<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-nonecyangwa rimwe .d-{sm,md,lg,xl}-nonemubyiciro kugirango bisubizwe neza.

Kugirango werekane ikintu gusa kumurongo watanzwe wubunini bwa ecran urashobora guhuza icyiciro kimwe .d-*-nonenicyiciro .d-*-*, kurugero .d-none .d-md-block .d-xl-noneruzahisha element kubunini bwa ecran yose usibye kubikoresho biciriritse kandi binini.

Ingano ya Mugaragaza 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
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
kwihisha kuri lg na mugari mugari
kwihisha kuri ecran ntoya kuruta 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>

Erekana mu icapiro

Hindura displayagaciro k'ibintu mugihe cyo gucapa hamwe nicapiro ryacu ryerekana ibyiciro byingirakamaro. Harimo inkunga kubintu bimwe displaynkibikorwa byacu .d-*byitabira.

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

Ibyiciro byo gucapa no kwerekana ibyiciro birashobora guhuzwa.

Mugaragaza gusa (Hisha kumpapuro gusa)
Gucapa gusa (Hisha kuri ecran gusa)
Hisha kugeza binini kuri ecran, ariko burigihe werekane kumpapuro 
<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>