Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Okwolesebwa eby'obugagga

Amangu era mu kuddamu okukyusa omuwendo gw'okulaga ebitundu n'ebirala n'ebikozesebwa byaffe eby'okulaga. Mulimu okuwagira ebimu ku miwendo egy’enjawulo, wamu n’ebimu ku by’okwongerako eby’okufuga okwolesebwa ng’okuba ebitabo.

Engeri gye kikola

Kyusa omuwendo gw'ekintu displayn'ebika byaffe eby'omugaso eby'okulaga ebiddamu. Tuwagira mu bugenderevu ekitundu ekitono kyokka eky'emiwendo gyonna egisoboka egya display. Ebisulo osobola okubigatta ku bikolwa eby’enjawulo nga bw’oba ​​weetaaga.

Okuwandiika ebigambo

Laga kiraasi z’omugaso ezikola ku bifo byonna eby’okumenya , okuva xsku okutuuka ku xxl, tebirina kufunza kwa kumenya mu byo. Kino kiri bwe kityo kubanga kiraasi ezo zikozesebwa okuva min-width: 0;n’okudda waggulu, era bwe zityo tezisibibwa ku kubuuza kwa mikutu. Ebifo ebisigaddewo, naye, bibaamu enfunyiro y’okumenya.

Nga bwe kiri, kiraasi zituumibwa amannya nga tukozesa ensengeka:

  • .d-{value}-axs
  • .d-{breakpoint}-{value}kubanga sm, md, lg, xl, ne xxl.

Awali omuwendo gwe gumu ku:

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

Emiwendo egy’okwolesebwa giyinza okukyusibwa nga tukyusa $displaysenkyukakyuka n’okuddamu okukung’aanya SCSS.

Ebibuuzo by'emikutu bikosa obugazi bwa screen n'ekifo eky'okumenyawo ekiweereddwa oba ekinene . Okugeza, .d-lg-noneeteeka display: none;ku lg, xl, ne xxlscreens.

Eby’okulabirako

d-mu layini
d-mu layini
<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-okuziyiza d-okuziyiza
<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>

Okukweka ebintu

Okusobola okukulaakulanya amangu essimu, kozesa ebika by’okwolesebwa ebiddamu okulaga n’okukweka ebintu okusinziira ku kyuma. Weewale okukola enkyusa ez’enjawulo ddala ez’omukutu gwe gumu, mu kifo ky’ekyo kwekweka ebintu mu ngeri eddamu ku buli sayizi ya screen.

Okukweka elementi kozesa bukozesa .d-nonekiraasi oba emu ku .d-{sm,md,lg,xl,xxl}-nonekiraasi ku nkyukakyuka yonna eya screen eddamu.

Okulaga elementi yokka ku bbanga eriweereddwa erya sayizi za screen osobola okugatta .d-*-nonekiraasi emu ne .d-*-*kiraasi, okugeza .d-none .d-md-block .d-xl-none .d-xxl-noneojja kukweka elementi ku sayizi za screen zonna okuggyako ku byuma ebya wakati n’ebinene.

Sayizi ya screen Essomo
Ekwekeddwa ku bonna .d-none
Ekwekeddwa ku xs zokka .d-none .d-sm-block
Ekwekeddwa ku sm yokka .d-sm-none .d-md-block
Ekwekeddwa ku md yokka .d-md-none .d-lg-block
Ekwekeddwa ku lg yokka .d-lg-none .d-xl-block
Ekwekeddwa ku xl yokka .d-xl-none .d-xxl-block
Ekwekeddwa ku xxl yokka .d-xxl-none
Kirabika ku bonna .d-block
Erabika ku xs yokka .d-block .d-sm-none
Erabika ku sm yokka .d-none .d-sm-block .d-md-none
Erabika ku md yokka .d-none .d-md-block .d-lg-none
Erabika ku lg yokka .d-none .d-lg-block .d-xl-none
Erabika ku xl yokka .d-none .d-xl-block .d-xxl-none
Erabika ku xxl yokka .d-none .d-xxl-block
hide on lg and wider screens
okwekweka ku screens entono okusinga 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>

Okwolesebwa mu kukuba ebitabo

Kyusa displayomuwendo gwa elementi nga okuba ebitabo ne kiraasi zaffe ez'omugaso ogw'okulaga okukuba ebitabo. Mulimu okuwagira empisa ze zimu nga utilities displayzaffe eziddamu ..d-*

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

Ebika by’okukuba n’okulaga bisobola okugattibwa.

Screen Yokka (Kwekweka ku kukuba kwokka)
Print Only (Hide on screen only)
Kweka okutuuka ku kinene ku ssirini, naye bulijjo laga ku kiwandiiko
<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 nga bwe kiri

Ebikozesebwa API

Ebikozesebwa eby'okwolesebwa birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.

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