Kuma bɛɛ lajɛlen

Yɔrɔw ni sugandiliw walasa ka i ka Bootstrap porozɛ labɛn, i n’a fɔ minɛnw sirili, grid system barikama, media fɛn min bɛ se ka wuli ka bɔ a nɔ na, ​​ani utility classes jaabiw.

Minɛnw

minɛnw ye layidu tacogo jɔnjɔn ye Bootstrap kɔnɔ wa u wajibiyalen don ni an ka grid system default ye . Aw bɛ sugandi ka bɔ minɛn dɔ la min bɛ jaabi di, min bonya bɛ sigi sen kan (o kɔrɔ ye ko a max-widthbɛ yeli kɛ kariyɔrɔ kelen-kelen bɛɛ la) walima ji-bonya (o kɔrɔ ye ko a ka 100%bon waati bɛɛ).

Hali ni minɛnw bɛ Se ka Kɛ 'kɔnɔ, layidu fanba tɛ 'kɔnɔna-minɛn de wajibiya.

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

Baara .container-fluidkɛ ni minɛn ye min bonya dafalen don, min bɛ jatebɔyɔrɔ bonya bɛɛ lajɛlen na.

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

Jaabiw ka tiɲɛniw

Komin Bootstrap Dabɔra ka Kɛ mobili ye fɔlɔ, an bɛ baara Kɛ ni kunnafonidilanw ɲininkali damadɔ ye walasa ka dakun hakilitigiw Dabɔ an ka labɛnw ni ɲɔgɔn cɛ. O kari-yɔrɔw fanba bɛ Dabɔ filɛli-yɔrɔ bonya fitininw kan wa u b’a To an bɛ se ka fɛnw Sànsan ni filɛli-yɔrɔ bɛ Yɛlɛma.

Bootstrap bɛ baara Kɛ fɔlɔ ni nin kunnafonidilanw ɲininkali-yɔrɔw ye—walima kariyɔrɔw—an ka source Sass filew kɔnɔ an ka layout, grid system ani components (yɔrɔw) kama.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

Komin an bɛ an ka source CSS sɛbɛn Sass kɔnɔ, an ka media ɲininkaliw bɛɛ bɛ sɔrɔ Sass mixins fɛ:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

An bɛ baara kɛ ni kunnafonidilanw ɲininkaliw ye tuma dɔw la minnu bɛ taa sira wɛrɛ fɛ (ɛkran hakɛ dilen walima a fitinin ):

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

Nin sen in fana na, nin kunnafonidilaw ka ɲininkaliw fana bɛ sɔrɔ Sass mixins fɛ:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Media ɲininkaliw ni mixins fana bɛ yen walasa ka ekran hakɛw yɔrɔ kelen laɲini ni kariyɔrɔ bonya fitinin ni bonya ye.

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

Nin kunnafonidi ɲininkaliw fana bɛ sɔrɔ Sass mixins fɛ:

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

O cogo kelen na, kunnafonidilanw ɲininkaliw bɛ se ka kɛ kariyɔrɔ caman bonya:

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

Sass mixin min bɛ kɛ ka ɲɛsin ekran hakɛ kelen ma, o bɛna kɛ:

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

Z-index (Z-index).

Bootstrap yɔrɔ caman bɛ baara Kɛ ni z-index, CSS nafolo ye min bɛ dɛmɛ Dòn layidu la k'a Labɛn ni aksidan sabanan Dili ye walasa ka kɔnɔkow Labɛn. An bɛ baara Kɛ ni z-index sɛgɛsɛgɛli dafalen ye Bootstrap kɔnɔ min Dabɔra ka navigatiɔn, baarakɛminɛnw ni popovers, modals ani fɛn wɛrɛw layidu ka ɲɛ.

O nafa sanfɛtaw bɛ daminɛ ni jateden ye min bɛ kɛ ni diyagoya ye, min ka bon ani min kɛrɛnkɛrɛnnen don fo ka se ka bɛnbaliyakow bali cogo ɲuman na. An mago bɛ ninnu ka kulu jɔnjɔn dɔ la an ka yɔrɔw la minnu bɛ lamini na — baarakɛminɛnw, popovers, navbars, dropdowns, modals — walasa an ka se ka kɛ cogo bɛnnen na kɛwalew la. Kun t'a la an tun tɛ se ka baara kɛ ni 100+ walima 500+ ye.

An t’a ɲini ka nin nafa kelen-kelen ninnu kɛ ka kɛɲɛ ni mɔgɔw sago ye; ni i ye kelen Changé, a ka c’a la i ka kan k’u bɛɛ Changé.

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

Walasa ka dancɛw ɲɛnabɔ minnu bɛ ɲɔgɔn kan yɔrɔw kɔnɔ (misali la, butɔni ni dontaw donna kuluw kɔnɔ), an bɛ baara kɛ ni , , jateden kelen nafa z-indexdɔgɔmanw ye ani ka ɲɛsin default, hover ani active states ma. Hover/focus/active kan, an bɛ na ni fɛn kɛrɛnkɛrɛnnen dɔ ye ɲɛfɛ ni nafa caman ye walasa k’u dancɛ jira balimakɛ fɛnw kan.123z-index