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 display
proprié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 xs
na 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 nasm
,md
,lg
,xl
, mpexxl
.
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 $displays
variable 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-none
etyaka display: none;
na lg
, xl
, mpe na ba xxl
écrans.
Bandakisa
<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>
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-none
classe to moko ya ba .d-{sm,md,lg,xl,xxl}-none
classes 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-*-none
classe moko na .d-*-*
classe moko, par exemple .d-none .d-md-block .d-xl-none .d-xxl-none
ekobomba é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 |
<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 display
motuya ya ba éléments tango bozali ko imprimer na ba classes na biso ya utilitaire ya affichage ya impression. Esangisi lisungi mpo na ba display
valeurs 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.
<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
),