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 display
n'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 xs
ku 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}
kubangasm
,md
,lg
,xl
, nexxl
.
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 $displays
enkyukakyuka n’okuddamu okukung’aanya SCSS.
Ebibuuzo by'emikutu bikosa obugazi bwa screen n'ekifo eky'okumenyawo ekiweereddwa oba ekinene . Okugeza, .d-lg-none
eteeka display: none;
ku lg
, xl
, ne xxl
screens.
Eby’okulabirako
<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>
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-none
kiraasi oba emu ku .d-{sm,md,lg,xl,xxl}-none
kiraasi ku nkyukakyuka yonna eya screen eddamu.
Okulaga elementi yokka ku bbanga eriweereddwa erya sayizi za screen osobola okugatta .d-*-none
kiraasi emu ne .d-*-*
kiraasi, okugeza .d-none .d-md-block .d-xl-none .d-xxl-none
ojja 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 |
<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 display
omuwendo gwa elementi nga okuba ebitabo ne kiraasi zaffe ez'omugaso ogw'okulaga okukuba ebitabo. Mulimu okuwagira empisa ze zimu nga utilities display
zaffe 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.
<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
),