Source

Bomonisi ya biloko

Toggle noki mpe na eyano 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 utilité ya affichage responsive. 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 xl, 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, mpe xl.

Epayi wapi motuya ezali moko ya:

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

Ba requêtes ya media ezo effectuer ba largeurs ya écran na point de rupture oyo epesami to ya munene . Na ndakisa, .d-lg-noneba ensembles display: none;na nionso mibale lgmpe na ba xlécrans.

Bandakisa

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 élément 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}-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-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`
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`

hide on screens wider than lg

kobomba na ba écrans ya mike koleka lg

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

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