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.

Le axa sia dzi

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 xxl, 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, xl, kple xxl.

Afisi asixɔxɔ nye:

none
inline
inline-block
block
grid
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-noneɖoa display: none;, lg, xlkple xxlscreenwo 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ɔ vovovowo kura wɔwɔ, ke boŋ ɣla nusiwo le screen ƒe lolome ɖesiaɖe ŋu nyuie.

Be nàɣla nuawo ɖeko nàzã .d-noneklass la alo .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-noneaɣla element la na screen ƒe lolomewo katã negbe le mɔ̃ siwo le titina kple gãwo dzi ko.

Screen ƒe lolome	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 .d-xxl-block`
Woɣlae ɖe xxl dzi ko	`.d-xxl-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 .d-xxl-none`
Wokpɔnɛ le xxl dzi ko	`.d-none .d-xxl-block`

hide on lg and wider screens

ɣ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-grid
.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>

Sass ƒe nyawo

Dɔwɔnuwo ƒe API

Woɖe gbeƒã ɖeɖefia ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),