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 display
nunɔ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 xs
vaseɖ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}
elabenasm
,md
,lg
,xl
, kplexxl
.
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 $displays
tɔ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
, xl
kple xxl
screenwo dzi.
Kpɔɖeŋuwo
<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>
<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-none
klass la alo .d-{sm,md,lg,xl,xxl}-none
klassawo 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-*-none
kple klass aɖe nu ƒu .d-*-*
, le kpɔɖeŋu me .d-none .d-md-block .d-xl-none .d-xxl-none
aɣ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 |
<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ɔ display
elements ƒe asixɔxɔ ne èle agbalẽ tam kple míaƒe print display utility classes. Kpekpeɖeŋunana na display
dzidzenu 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.
<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
),