Bomonisi ya biloko

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

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

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

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