Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

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.

Ndlela leyi swi tirhaka ha yona

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.

Notation

Kombisa titlilasi ta vukorhokeri leti tirhaka eka ti breakpoint hinkwato , ku suka eka xsku ya eka xxl, 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}hikuva sm, md, lg, xl, na xxl.

Laha nkoka wu nga wun’wana wa:

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Mimpimo ya nkombiso yi nga cinciwa hi ku cinca displaymimpimo leyi hlamuseriweke eka $utilitiesna ku hlengeleta nakambe SCSS.

Swivutiso swa midiya swi khumba ku anama ka xikirini hi breakpoint leyi nyikiweke kumbe ku tlula . Hi xikombiso, .d-lg-noneyi veka display: none;eka lg, xl, ni xxlswikirini.

Swikombiso

d-eka layini
d-eka layini
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-xibokisana d-xibokisana
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>

Ku tumbeta swiaki

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 vuhundzuluxeri lebyi hambaneke hi ku helela bya sayiti yin’we, ematshan’weni ya sweswo fihla swiaki 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,xxl}-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-none .d-xxl-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
Ku fihliwile ntsena eka xxl .d-xxl-none .d-xxl-block
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 .d-xxl-none
Swi vonaka ntsena eka xxl .d-none .d-xxl-block
tumbela eka lg na swikirini swo anama
tumbela eka swikirini leswitsongo ku tlula lg
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>

Kombisa hi ku kandziyisiwa

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

Xikirini Ntsena (Tumbeta eka ku kandziyisiwa ntsena) .
Print Only (Tumbeta eka xikirini ntsena) .
Fihla ku ya fika eka leyikulu eka xikirini, kambe minkarhi hinkwayo kombisa eka ku kandziyisiwa
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

API ya switirhisiwa

Switirhisiwa swa nkombiso swi tivisiwile eka API ya hina ya switirhisiwa hi scss/_utilities.scss. Dyondza ndlela yo tirhisa API ya switirhisiwa.

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