Salá koleka na makambo ya ntina Salta na navigation ya docs
in English

Bomonisi ya biloko

Noki mpe na eyano toggle motuya ya kolakisa ya ba composants mpe mingi na ba utilitaires na biso ya kolakisa. Ezali na lisungi mpo na mwa ndambo ya motuya oyo emonanaka mingi, bakisa mpe mwa makambo mosusu mpo na kokamba elakiseli ntango ozali konyata.

Ndenge oyo esalaka

Bobongola valeur ya displaypropriété na ba classes na biso ya utilitaire ya affichage réponse. Tozali kosunga na mokano bobele mwa ndambo ya motuya nyonso oyo ekoki kosalema mpo na display. Ba classes ekoki kosangisama pona ba effets ndenge na ndenge ndenge oza na besoin.

Notation ya kokoma

Lakisa ba classes ya utilité oyo etali ba points de rupture nionso , kobanda xsna xxl, ezali na abréviation ya point de rupture te na kati na yango. Yango ezali mpo ete bakelasi wana esalelamaka uta min-width: 0;mpe likolo, mpe bongo ekangami te na motuna ya media. Nzokande, ba points de rupture oyo etikali ezali na abréviation ya point de rupture.

Lokola yango, bakelasi epesameli nkombo na kosalelaka format oyo:

  • .d-{value}mpo naxs
  • .d-{breakpoint}-{value}mpo na sm, md, lg, xl, mpe xxl.

Epayi wapi motuya ezali moko ya:

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

Ba valeurs ya kolakisa ekoki ko changer na ko changer $displaysvariable pe ko recompiler SCSS.

Ba queries ya media ezo affecter ba largeurs ya écran na point de rupture oyo epesami to ya munene . Na ndakisa, .d-lg-noneetyaka display: none;na lg, xl, mpe na ba xxlécrans.

Bandakisa

d-na kati ya molongo
d-na kati ya molongo
<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-bloc ya kosala d-bloc ya kosala
<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>

Kobomba ba éléments

Mpo na bokoli ya nokinoki oyo ezali malamu mpo na telefone ya mabɔkɔ, salelá bakelasi ya kolakisa oyo ezali koyanola mpo na kolakisa mpe kobomba biloko na nzela ya aparɛyi. Bokima kosala ba versions entièrement différentes ya site moko, au lieu bomba ba éléments responsivement pona taille ya écran moko na moko.

Mpo na kobomba ba éléments salela kaka .d-noneclasse to moko ya ba .d-{sm,md,lg,xl,xxl}-noneclasses mpo na variation nionso ya écran oyo ezo répondre.

Pona kolakisa élément kaka na intervalle donnée ya ba tailles ya écran okoki kosangisa .d-*-noneclasse moko na .d-*-*classe moko, par exemple .d-none .d-md-block .d-xl-none .d-xxl-noneekobomba élément pona ba tailles nionso ya écran sauf na ba appareils ya moyenne na ya minene.

Taille ya écran Kelasi
Ebombami likolo ya nionso .d-none
Ebombami kaka na xs .d-none .d-sm-block
Ebombami kaka na sm .d-sm-none .d-md-block
Ebombami kaka na md .d-md-none .d-lg-block
Ebombami kaka na lg .d-lg-none .d-xl-block
Ebombami kaka na xl .d-xl-none .d-xxl-block
Ebombami kaka na xxl .d-xxl-none
Visible na nionso .d-block
Emonanaka kaka na xs .d-block .d-sm-none
Emonanaka kaka na sm .d-none .d-sm-block .d-md-none
Emonanaka kaka na md .d-none .d-md-block .d-lg-none
Emonanaka kaka na lg .d-none .d-lg-block .d-xl-none
Emonanaka kaka na xl .d-none .d-xl-block .d-xxl-none
Emonanaka kaka na xxl .d-none .d-xxl-block
hide on lg and wider screens
kobomba na ba écrans ya mike koleka lg
<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>

Lakisa na imprimerie

Bobongola displaymotuya ya ba éléments tango bozali ko imprimer na ba classes na biso ya utilitaire ya affichage ya impression. Esangisi lisungi mpo na ba displayvaleurs moko na ba .d-*utilitaires na biso oyo ezo répondre.

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

Bakelasi ya konyata mpe ya kolakisa ekoki kosangisama.

Ecran Kaka (Bomba kaka na imprimerie)
Print Only (Hide on screen only)
Bomba tii na monene na écran, kasi lakisa ntango nyonso na imprimerie
<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 oyo azali

API ya ba utilitaires

Ba utilitaires ya kolakisa esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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