Kunnafoni kunbabaw

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 . Minɛnw bɛ kɛ ka kɔnɔkow mara, ka u pad, ani (tuma dɔw la) u cɛmancɛ la. Hali ni minɛnw bɛ Se ka Kɛ 'kɔnɔ, layidu fanba tɛ 'kɔnɔna-minɛn de wajibiya.

Bootstrap bɛ na ni minɛn saba ye minnu tɛ kelen ye:

• .container, min bɛ a sigi max-widthjaabi kariyɔrɔ kelen-kelen bɛɛ la
• .container-fluid, min bɛ width: 100%kɛ kariyɔrɔ bɛɛ la
• .container-{breakpoint}, o ye width: 100%fo ka se kariyɔrɔ kofɔlen ma

Tablo min bɛ duguma, o bɛ a jira cogo min na minɛn kelen-kelen bɛɛ ta max-widthbɛ suma ni fɔlɔ ta ye .containerani ka .container-fluidtɛmɛn kariyɔrɔ kelen-kelen bɛɛ kan.

aw ye u ye wale la k' u suma ɲɔgɔn na an ka Grid misali la .

Bɛɛ-kɔnɔ-fɛn

An ka .containerkalasi dafalen ye jaabi-minɛn ye, min bonya bɛ jɔ, o kɔrɔ ye ko a max-widthbɛ fɛn caman Changements (Yɛlɛma) kariyɔrɔ kelen-kelen bɛɛ la.

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

Ji

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

Jaabi-minɛnw ye kura ye Bootstrap v4.4 kɔnɔ. U b’a To i bɛ se ka kalasi dɔ Jira min bonya ye 100% ye fo ka Se kariyɔrɔ kofɔlen ma, o kɔ fɛ an bɛ max-widths Kɛ kariyɔrɔ sanfɛla kelen-kelen bɛɛ la. Misali la, .container-sma bɛ 100% bonya ka daminɛ fo ka se smkariyɔrɔ ma, a bɛna sɛgɛsɛgɛli kɛ yɔrɔ min na ni md, lg, ani 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>

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

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