Uhlolojikelele

Izingxenye nezinketho zokubeka iphrojekthi yakho ye-Bootstrap, okuhlanganisa iziqukathi zokugoqa, isistimu yegridi enamandla, into yemidiya eguquguqukayo, namakilasi ezinsiza eziphendulayo.

Izitsha

Iziqukathi ziyisici sesakhiwo esiyisisekelo ku-Bootstrap futhi siyadingeka uma kusetshenziswa uhlelo lwethu lwegridi oluzenzakalelayo . Iziqukathi zisetshenziselwa ukuqukatha, iphedi, futhi (ngezinye izikhathi) beka phakathi okuqukethwe ngaphakathi kwazo. Nakuba iziqukathi zingafakwa , izakhiwo eziningi azidingi isiqukathi esinesidleke.

I-Bootstrap iza neziqukathi ezintathu ezihlukene:

• .container, osetha u-a max-widthendaweni ngayinye esabelayo
• .container-fluid, okungama width: 100%-breakpoints
• .container-{breakpoint}, width: 100%okungaze kube indawo yokuphumula eshiwo

Ithebula elingezansi libonisa ukuthi isiqukathi ngasinye max-widthsiqhathaniswa kanjani nesokuqala .containerkanye nakuyo .container-fluidyonke indawo yokuhlukana.

Zibone zisebenza futhi uziqhathanise esibonelweni sethu seGridi .

Konke-kokukodwa

Isigaba sethu esizenzakalelayo siyisitsha esisabelayo, esinobubanzi obugxilile .container, okusho max-widthizinguquko zaso endaweni ngayinye yokuphumula.

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

Uketshezi

Sebenzisa .container-fluidisitsha esinobubanzi obugcwele, esihlanganisa bonke ububanzi bembobo yokubuka.

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

Iyasabela

Iziqukathi eziphendulayo zintsha ku-Bootstrap v4.4. Zikuvumela ukuthi ucacise ikilasi elibanzi ngo-100% kuze kube yilapho kufinyelelwa khona i-breakpoint, ngemva kwalokho sifaka max-widthu-s endaweni ngayinye ephakeme kakhulu. Isibonelo, .container-smibanzi ngo-100% ukuze iqale kuze smkufinyelelwe indawo yokuphumula, lapho izokhuphuka ngo- md, lg, kanye 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>

Ama-breakpoints asabelayo

Njengoba i-Bootstrap ithuthukiswe ukuthi ibe yiselula kuqala, sisebenzisa imibuzo embalwa yemidiya ukuze sakhe izindawo zokunqamuka ezinengqondo zezakhiwo zethu nezixhumi ezibonakalayo. Lawa maphoyinti okunqamuka kakhulu asekelwe kububanzi obuncane bembobo yokubuka futhi asivumela ukuba sikhulise izici njengoba imbobo yokubuka ishintsha.

I-Bootstrap ngokuyinhloko isebenzisa ububanzi bemibuzo yemidiya elandelayo—noma ama-breakpoint—kumafayela wethu we-Sass ongumthombo wesakhiwo sethu, isistimu yegridi, nezingxenye.

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

Njengoba sibhala umthombo wethu we-CSS kwa-Sass, yonke imibuzo yethu yemidiya itholakala ngamamiksi e-Sass:

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

Ngezinye izikhathi sisebenzisa imibuzo yemidiya eya ngakolunye uhlangothi (usayizi wesikrini onikeziwe noma omncane ):

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

Nakulokhu futhi, le mibuzo yemidiya iyatholakala nangemiksi ye-Sass:

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

Kukhona nemibuzo yemidiya kanye nezingxube zokukhomba ingxenye eyodwa yamasayizi wesikrini kusetshenziswa ubuncane kanye nobubanzi be-breakpoint.

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

Le mibuzo yemidiya iyatholakala futhi nge-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) { ... }

Ngokufanayo, imibuzo yemidiya ingase idlulele kububanzi be-breakpoint multiple:

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

Imiksi ye-Sass yokukhomba ububanzi bosayizi wesikrini obufanayo izoba:

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

Z-inkomba

Izingxenye ezimbalwa ze-Bootstrap zisebenzisa z-index, isici se-CSS esiza ukulawula isakhiwo ngokunikeza i-eksisi yesithathu ukuhlela okuqukethwe. Sisebenzisa isikali esizenzakalelayo se-z-inkomba ku-Bootstrap esiklanyelwe ukusendlalela ngokufanele ukuzulazula, amathiphu wamathuluzi nama-popovers, amamodeli, nokuningi.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

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

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.