Source

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 ɲininkaliw ye—walima kariyɔrɔw—an ka sɔrɔyɔrɔ Sass filenw kɔnɔ an ka labɛncogo, grid system ani a yɔrɔw kama.

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

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

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

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

A kɔlɔsi ko ikomi navigatɔrɔw tɛ dɛmɛ don sisan range context queries , an bɛ baara kɛ ni dantigɛliw ye min-ani max-prefixes ani viewports ni fractional widths (min bɛ se ka kɛ cogoya dɔw la dpi sanfɛ minɛnw kan, misali la) ni nafaw ye minnu bɛ ni tiɲɛni caman ye o sangaɲɔgɔnmaw kama .

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

Media ɲininkaliw ni mixins fana bɛ yen walasa ka ekran hakɛw tilayɔrɔba 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ɔ damadɔ 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 walasa 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ɛ dusu don mɔgɔw kɔnɔ u 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 kunbɛn 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ɔmanninw 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