Kombisa nhundzu
Hi ku hatlisa ni hi ku hlamula cinca nkoka wa nkombiso wa swiphemu ni swin’wana hi switirhisiwa swa hina swa nkombiso. Ku katsa na nseketelo wa yin’wana ya mimpimo leyi tolovelekeke swinene, kun’we ni swin’wana leswi engetelekeke swo lawula nkombiso loko u kandziyisa.
Cinca nkoka wa displaynhundzu hi titlilasi ta hina ta vukorhokeri bya nkombiso leti hlamulaka. Hi seketela hi xikongomelo ntsena ntlawa lowutsongo wa mimpimo hinkwayo leyi kotekaka ya display. Titlilasi ti nga hlanganisiwa eka switandzhaku swo hambana-hambana hilaha u lavaka hakona.
Kombisa titlilasi ta vukorhokeri leti tirhaka eka ti breakpoint hinkwato , ku suka eka xsku ya eka xl, a ti na xifunengeto xa breakpoint eka tona. Leswi swi vangiwa hikuva titlilasi teto ti tirhisiwa ku suka min-width: 0;na le henhla, naswona xisweswo a ti bohiwi hi xivutiso xa vuhangalasi bya mahungu. Hambiswiritano, swiphemu leswi saleke swa ku tshoveka swi katsa xifunengeto xa ku tshoveka.
Hi ndlela yaleyo, titlilasi ti thyiwile mavito hi ku tirhisa xivumbeko lexi nge:
.d-{value}swaxs.d-{breakpoint}-{value}hikuvasm,md,lg, naxl.
Laha nkoka wu nga wun’wana wa:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
Swivutiso swa midiya swi khumba ku anama ka xikirini hi breakpoint leyi nyikiweke kumbe ku tlula . Hi xikombiso, .d-lg-nonetisete display: none;eka havumbirhi bya tona lgni le ka xlswikirini.
<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>Ku kuma nhluvukiso wo hatlisa lowu nga ni xinghana eka tiselfoni, tirhisa titlilasi ta nkombiso leti hlamulaka to kombisa ni ku tumbeta swiaki hi xitirhisiwa. Papalata ku endla tivhidiyo leti hambaneke hi ku helela ta sayiti yin’we, ematshan’weni ya sweswo fihla elemente hi ndlela leyi hlamulaka eka sayizi yin’wana ni yin’wana ya xikirini.
Ku fihla swiaki ntsena tirhisa .d-nonetlilasi kumbe yin’wana ya .d-{sm,md,lg,xl}-nonetitlilasi eka ku hambana kwihi na kwihi ka xikirini loku hlamulaka.
Ku kombisa elemente ntsena eka nkarhi lowu nyikiweke wa tisayizi ta xikirini u nga hlanganisa .d-*-nonetlilasi yin’we na .d-*-*tlilasi, xikombiso .d-none .d-md-block .d-xl-noneu ta fihla elemente eka tisayizi hinkwato ta xikirini handle ka eka switirhisiwa swa le xikarhi na leswikulu.
| Vukulu bya Xikirini | Tlilasi |
|---|---|
| Ku fihliwile eka hinkwavo | .d-none |
| Ku fihliwile ntsena eka xs | .d-none .d-sm-block |
| Ku fihliwile ntsena eka sm | .d-sm-none .d-md-block |
| Ku fihliwile ntsena eka md | .d-md-none .d-lg-block |
| Ku fihliwile ntsena eka lg | .d-lg-none .d-xl-block |
| Ku fihliwile ntsena eka xl | .d-xl-none |
| Swi vonaka eka hinkwaswo | .d-block |
| Swi vonaka ntsena eka xs | .d-block .d-sm-none |
| Swi vonaka ntsena eka sm | .d-none .d-sm-block .d-md-none |
| Swi vonaka ntsena eka md | .d-none .d-md-block .d-lg-none |
| Swi vonaka ntsena eka lg | .d-none .d-lg-block .d-xl-none |
| Swi vonaka ntsena eka xl | .d-none .d-xl-block |
<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>Cinca displaynkoka wa swiaki loko u kandziyisa hi titlilasi ta hina ta vukorhokeri bya nkombiso wo gandlisa. Ku katsa na nseketelo wa displaymimpimanyeto leyi fanaka na .d-*switirhisiwa swa hina leswi hlamulaka.
.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
Titlilasi to gandlisa ni to kombisa ti nga hlanganisiwa.
<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>