Ebifo eby’okumenyawo

Endowooza enkulu

• Breakpoints ze zizimba dizayini eddamu. Zikozese okufuga ddi ensengeka yo lw’esobola okukyusibwa ku kifo ekimu eky’okulaba oba sayizi y’ekyuma.

• Kozesa ebibuuzo by'emikutu okuzimba CSS yo okusinziira ku breakpoint. Ebibuuzo by’emikutu kye kimu ku bikozesebwa mu CSS ebikusobozesa okukozesa emisono egy’obukwakkulizo okusinziira ku kibinja kya bbulawuzi n’ebipimo by’enkola y’emirimu. Tusinga kukozesa min-widthmu kubuuza kwaffe okw’emikutu gy’amawulire.

• Mobile okusooka, responsive design kye kigendererwa. Bootstrap's CSS egenderera okukozesa bare minimum of styles okufuula layout okukola ku breakpoint esinga obutono, n'oluvannyuma layers ku styles okutereeza design eyo ku byuma ebinene. Kino kitereeza CSS yo, kitereeza obudde bw’okulaga, era kiwa obumanyirivu obw’amaanyi eri abagenyi bo.

Ebifo eby’okumenyawo ebiriwo

Bootstrap erimu ebifo mukaaga ebisookerwako, oluusi ebiyitibwa grid tiers , olw’okuzimba mu ngeri eddamu. Ebifo bino eby'okumenyawo bisobola okulongoosebwa singa oba okozesa fayiro zaffe eza Sass ez'ensibuko.

Buli breakpoint yalondebwa okukwata obulungi ebibya nga obugazi bwabyo bikubisaamu 12. Breakpoints era bikiikirira ekitundu ekitono eky’obunene bw’ebyuma ebya bulijjo n’ebipimo by’ekifo eky’okulaba-tebitunuulira mu ngeri ey’enjawulo buli mbeera y’okukozesa oba ekyuma. Wabula, ranges ziwa omusingi omunywevu era ogutakyukakyuka okuzimbako kumpi ku kyuma kyonna.

Ebifo bino eby’okumenya bisobola okulongoosebwa ng’oyita mu Sass—ojja kubisanga mu maapu ya Sass mu sitayiro yaffe _variables.scss.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Okumanya ebisingawo n’ebyokulabirako ku ngeri y’okukyusaamu maapu zaffe eza Sass n’enkyukakyuka, laba ekitundu kya Sass eky’ebiwandiiko bya Grid .

Ebibuuzo by’emikutu gy’amawulire

Okuva Bootstrap bwe yakolebwa okubeera essimu okusooka, tukozesa engalo entonotono ez’okubuuza kw’emikutu okukola ebifo ebitegeerekeka eby’okumenya ku nteekateeka zaffe n’enkolagana. Ebifo bino ebimenya bisinga kwesigamiziddwa ku bugazi bw’ekifo eky’okulaba obutono ennyo era kitusobozesa okulinnyisa ebintu ng’ekifo eky’okulaba kikyuka.

Min-obugazi

Bootstrap okusinga ekozesa emitendera gino wammanga egy’okubuuza emikutu —oba ebifo eby’okumenya —mu fayiro zaffe ez’ensibuko Sass ez’ensengeka yaffe, enkola ya grid, n’ebitundu.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Sass mixins zino zivvuunula mu CSS yaffe ekung'aanyiziddwa nga tukozesa emiwendo egyalangirirwa mu Sass variables zaffe. Okugeza nga:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-obugazi

Oluusi n’oluusi tukozesa ebibuuzo by’emikutu ebigenda mu ludda olulala (obunene bwa screen obuweereddwa oba obutono ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Mixins zino zitwala breakpoints ezo ezalangirirwa, ziziggyako , ne zizikozesa nga values .02px​​zaffe . max-widthOkugeza nga:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Ekifo ekimu eky’okumenya

Waliwo n’okubuuza kw’emikutu n’okutabula okutunuulira ekitundu kimu eky’obunene bwa ssirini nga tukozesa obugazi bw’okumenya obutono n’obusinga obunene.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Okugeza @include media-breakpoint-only(md) { ... }ekijja okuvaamu :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Wakati w’ebifo eby’okumenyawo

Mu ngeri y’emu, okubuuza kw’emikutu kuyinza okubuna obugazi bw’ebifo eby’okumenyawo ebingi:

@include media-breakpoint-between(md, xl) { ... }

Ekivaamu:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }