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.

Na lokasa oyo

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 kobongwana na kobongola ba displayvaleurs oyo elimbolami na $utilitiespe 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

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

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>

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`
Ebombami kaka na xxl	`.d-xxl-none .d-xxl-block`
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`

bomba na lg na ba écrans ya large

kobomba na ba écrans ya mike koleka 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>

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)

Imprimer kaka (Bomba kaka na écran)

Bomba tii na monene na écran, kasi lakisa ntango nyonso na imprimerie

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 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
    ),