Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
Check
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 alesi nèhiãe.

Nuŋɔŋlɔ

Fia utility class 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 asitɔtrɔ le displayasixɔxɔ siwo woɖe fia le $utilitiesSCSS me kple wo gbugbɔgaƒo ƒu 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
d-le fli me
html
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
d-blɔɖe d-blɔɖe
html
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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,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
Woɣlae ɖe xxl dzi ko .d-xxl-none .d-xxl-block
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
ɣla ɖe lg kple screen siwo keke wu dzi
ɣla ɖe screen siwo le sue wu lg dzi
html
<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)
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
html
<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
    ),