in English

Fia nunɔamesiwo

Trɔ asi le akpawo ƒe ɖeɖefia ƒe asixɔxɔ kple bubuwo ŋu kabakaba eye nàwɔ nu ɖe ​​eŋu kple míaƒe ɖeɖefia ƒe dɔwɔnuwo. Kpekpeɖeŋunana asixɔxɔ siwo bɔ wu dometɔ aɖewo hã le eme, kpakple kpeɖeŋutɔ aɖewo siwo woatsɔ akpɔ nukpɔkpɔ dzi ne wole agbalẽ tam.

Ale si wòwɔa dɔe

Trɔ asixɔxɔ si le displaynunɔamesi la ŋu kple míaƒe ŋuɖoɖo ɖeɖefia dɔwɔnu ƒe klasswo. Míeɖoe koŋ doa alɔ asixɔxɔ siwo katã ate ŋu anɔ anyi la ƒe akpa sue aɖe ko na display. Woate ŋu aƒo klasswo nu ƒu hena ŋusẽkpɔɖeamedzi vovovowo abe alesi nèhiã ene.

Nuŋɔŋlɔ

Fia viɖe ƒe klass siwo ku ɖe breakpoints katã ŋu , tso xsvaseɖe xl, breakpoint kpukpui aɖeke mele wo me o. Esia le alea elabena wowɔa klass mawo ŋudɔ tso min-width: 0;kple dzi, eye to esia me la, womeblaa wo kple nyadzɔdzɔgblɔmɔnuwo ƒe biabia o. Gake breakpoint susɔeawo dometɔ aɖewoe nye breakpoint kpukpui aɖe.

Abe alesi wòle ene la, wotsɔa nɔnɔme si nye:

  • .d-{value}elabenaxs
  • .d-{breakpoint}-{value}elabena sm, md, lg, kple xl.

Afisi asixɔxɔ nye:

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

Woateŋu atrɔ asi le ɖeɖefia ƒe asixɔxɔwo ŋu to tɔtrɔ ɖe $displaystɔtrɔa ŋu kple SCSS la gbugbɔgaƒoƒo me.

Media biabiawo kpɔa ŋusẽ ɖe screen ƒe kekeme dzi kple breakpoint si wona alo esi lolo wu . Le kpɔɖeŋu me, .d-lg-nonewoɖoe display: none;ɖe evea siaa lgkple xlscreenwo dzi.

Kpɔɖeŋuwo

d-le fli me
d-le fli me 
<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-blɔɖe d-blɔɖe 
<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>

Nu veviwo ɣla

Be asitelefon nawɔ dɔ kabakaba wu la, zã ɖeɖefia ƒe klass siwo ɖoa nya ŋu hena nusiwo woɖena fiana kple wo ɣla ɖe mɔ̃ dzi. Ƒo asa na nyatakakadzraɖoƒe ɖeka ƒe tɔtrɔ siwo to vovo kura wɔwɔ, ke boŋ ɣla nusiwo le eme ɖe screen ƒe lolome ɖesiaɖe ŋu nyuie.

Be nàɣla nuawo ɖeko nàzã .d-noneklass la alo .d-{sm,md,lg,xl}-noneklassawo dometɔ ɖeka na screen ƒe tɔtrɔ ɖesiaɖe si ɖoa nya ŋu.

Be nàɖe element aɖe afia le screen ƒe lolomewo ƒe dometsotso aɖe ko dzi la àteŋu aƒo klass ɖeka .d-*-nonekple klass aɖe nu ƒu .d-*-*, le kpɔɖeŋu me .d-none .d-md-block .d-xl-noneaɣla element la na screen ƒe lolomewo katã negbe le mɔ̃ siwo le titina kple gãwo dzi ko.

Screen ƒe Agbɔsɔsɔme Nusrɔ̃ƒe
Woɣlae ɖe amewo katã dzi .d-none
Woɣlae ɖe xs dzi ko .d-none .d-sm-block
Woɣlae ɖe sm dzi ko .d-sm-none .d-md-block
Woɣlae ɖe md dzi ko .d-md-none .d-lg-block
Woɣlae ɖe lg dzi ko .d-lg-none .d-xl-block
Woɣlae ɖe xl dzi ko .d-xl-none
Wodzena le amewo katã dzi .d-block
Wodzena le xs dzi ko .d-block .d-sm-none
Wokpɔnɛ le sm dzi ko .d-none .d-sm-block .d-md-none
Wodzena le md dzi ko .d-none .d-md-block .d-lg-none
Wodzena le lg dzi ko .d-none .d-lg-block .d-xl-none
Xl dzi koe woate ŋu akpɔ .d-none .d-xl-block
ɣla ɖe lg kple screen siwo keke wu dzi
ɣla ɖe screen siwo le sue wu lg dzi 
<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>

Ðee fia le agbalẽtata me

Trɔ displayelements ƒe asixɔxɔ ne èle agbalẽ tam kple míaƒe print display utility classes. Kpekpeɖeŋunana na displaydzidzenu mawo ke abe míaƒe .d-*dɔwɔnu siwo ɖoa nya ŋu ene hã le eme.

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

Woate ŋu aƒo agbalẽtata kple ɖeɖefia ƒe klassawo nu ƒu.

Screen Only (Ɣla ɖe agbalẽtata ɖeɖeko dzi)
Ta Ko (Ɣla ɖe screen dzi ɖeɖeko)
Ɣla ɖe screen dzi vaseɖe esime wòalolo, gake nàɖee afia le agbalẽtata dzi ɣesiaɣi 
<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>