Jya ku bintu nyamukuru Jya kuri docs
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 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}Kuri sm,,,, na . md_ lg_xlxxl

Aho agaciro ari kamwe muri:

  • none
  • inline
  • inline-block
  • block
  • grid
  • 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, Gushiraho .d-lg-none,, na display: none;Mugaragaza .lgxlxxl

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,xxl}-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-none .d-xxl-noneruzahisha 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
hide on lg and wider screens
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-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.

Mugaragaza gusa (Hisha kumpapuro gusa)
Print Only (Hide on screen only)
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>

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