Okulaba okutwalira awamu

Ebitundu n'eby'okulonda eby'okuteekawo pulojekiti yo eya Bootstrap, omuli okuzinga ebitereke, enkola ya grid ey'amaanyi, ekintu ky'emikutu ekikyukakyuka, ne kiraasi z'ebikozesebwa eziddamu.

Ebintu ebiteekebwamu ebintu

Containers ze kintu ekisinga obukulu eky'ensengeka mu Bootstrap era zeetaagibwa nga okozesa enkola yaffe eya grid eya bulijjo . Ebitereke bikozesebwa okuteekebwamu, okupa, n’okussa (oluusi) wakati ebirimu munda mu byo. Wadde nga ebitereke bisobola okuteekebwa mu kisu, ensengeka ezisinga tezeetaaga kibya kya kiyumba.

Bootstrap ejja n’ebintu bisatu eby’enjawulo:

• .container, eteeka a max-widthku buli breakpoint eddamu
• .container-fluid, nga kino kiri width: 100%ku bifo byonna eby’okumenya
• .container-{breakpoint}, nga kino kibeera width: 100%okutuusa ku kifo ekiragiddwa eky’okumenyawo

Omulongooti wansi gulaga engeri buli container's max-widthgyegerageranya ku original .containerera .container-fluidokubuna buli breakpoint.

Zirabe nga zikola era ozigeraageranye mu kyokulabirako kyaffe ekya Grid .

Byonna mu kimu

Ekibiina kyaffe ekisookerwako .containerkye kiddamu, ekitereka eky’obugazi obutakyukakyuka, ekitegeeza max-widthenkyukakyuka zaakyo ku buli kifo eky’okumenya.

<div class="container">
  <!-- Content here -->
</div>

Kitonnyeze

Kozesa .container-fluidku kibya eky'obugazi obujjuvu, ekibunye obugazi bwonna obw'ekifo eky'okulaba.

<div class="container-fluid">
  ...
</div>

Okuddamu

Ebintu ebiddamu bipya mu Bootstrap v4.4. Zikusobozesa okulaga kiraasi egazi 100% okutuusa nga breakpoint eragiddwa etuuse, oluvannyuma ne tukozesa max-widths ku buli emu ku breakpoints eza waggulu. Okugeza, .container-smis 100% wide okutandika okutuusa nga smbreakpoint etuuse, gyejja okulinnya ne md, lg, ne xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Ebifo ebimenya okuddamu

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 eby’okumenya bisinga kwesigamiziddwa ku bugazi bw’ekifo eky’okulaba obutono ennyo era kitusobozesa okulinnyisa ebintu ng’ekifo eky’okulaba kikyuka.

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.

// Extra 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) { ... }

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

Okuva bwe tuwandiika source CSS yaffe mu Sass, ebibuuzo byaffe byonna eby’emikutu bifunibwa nga tuyita mu Sass 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) { ... }

// 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;
  }
}

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Nate, ebibuuzo bino eby’emikutu nabyo bifunibwa okuyita mu Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

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

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

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

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

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

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

Ebibuuzo bino eby’emikutu gy’amawulire nabyo bifunibwa okuyita mu Sass mixins:

@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) { ... }

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

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

Sass mixin ey’okutunuulira ekifo kye kimu ekya screen size range yandibadde:

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

Z-omuwendo gw’ebintu

Ebitundu bya Bootstrap ebiwerako bikozesa z-index, ekintu kya CSS ekiyamba okufuga ensengeka nga kiwa ekisiki ekyokusatu okutegeka ebirimu. Tukozesa ekipimo kya z-index ekisookerwako mu Bootstrap ekikoleddwa okulayer obulungi okutambulira, ebikozesebwa ne popovers, modals, n'ebirala.

Emiwendo gino egy’oku ntikko gitandikira ku muwendo ogw’ekimpatiira, ogw’ekika ekya waggulu era ogw’enjawulo ekimala okusobola okwewala enkaayana mu ngeri ennungi. Twetaaga ekibiina eky’omutindo ekya bino okuyita mu bitundu byaffe ebiriko layeri —ebikozesebwa, popovers, navbars, dropdowns, modals —tusobole okuba abakwatagana mu ngeri entuufu mu nneeyisa. Tewali nsonga lwaki tetwandisobodde kukozesa 100+ oba 500+.

Tetukubiriza kulongoosa mpisa zino ez’omuntu kinnoomu; singa okyusa ekimu, kirabika weetaaga okuzikyusa zonna.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Okukwata ensalosalo ezikwatagana munda mu bitundu (okugeza, obutambi n’ebiyingizibwa mu bibinja by’ebiyingizibwa), tukozesa emiwendo gya digito emu z-indexegya wansi egya 1, 2, era 3ku mbeera ezisookerwako, ezisiba, n’ezikola. Ku hover/focus/active, tuleeta elementi entongole ku mwanjo z-indexn’omuwendo ogw’oku ntikko okulaga ensalosalo yaabwe ku elementi z’abooluganda.