Source

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 alesi nèhiãe.

Nuŋɔŋlɔ

Fia utility class 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

Media biabiawo kpɔa ŋusẽ ɖe screen ƒe kekemewo 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

<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 element ɖ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`

hide on screens wider than lg

ɣla ɖe screen siwo le sue wu lg dzi

<div class="d-lg-none">hide on screens wider than lg</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)

Print Only (Hide on screen only)

Ɣ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>