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 . Khetha esitsheni esiphendulayo, esinobubanzi obugxilile (okusho max-widthizinguquko zaso endaweni ngayinye yokuphumula) noma ububanzi obuketshezi (okusho ukuthi 100%sibanzi ngaso sonke isikhathi).

Nakuba iziqukathi zingafakwa , izakhiwo eziningi azidingi isiqukathi esinesidleke.

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

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

<div class="container-fluid">
  ...
</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 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:

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

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

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.

Lawa manani aphezulu aqala enombolweni engafanele, ephezulu futhi ecacile ngokwanele ukugwema ukungqubuzana. Sidinga isethi evamile yalokhu kuzo zonke izingxenye zethu ezinengqimba—amathuluzi, ama-popovers, ama-navbar, okwehliswayo, amamodeli—ukuze sikwazi ukungaguquguquki ngendlela enengqondo ekuziphatheni. Asikho isizathu sokuthi singasebenzisanga 100+ noma 500+.

Asikukhuthazi ukwenziwa ngendlela oyifisayo lawa manani angawodwana; uma ushintsha eyodwa, cishe udinga ukuwashintsha wonke.

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

Ukusingatha imingcele egqagqene ngaphakathi kwezingxenye (isb, izinkinobho nokokufaka emaqenjini okokufaka), sisebenzisa amanani aphansi edijithi eyodwa z-indexethi 1, 2, kanye nezimo 3ezizenzakalelayo, ezihamba phezulu, nezisebenzayo. Kokuhambisa phezulu/okugxilile/okusebenzayo, siletha into ethile phambili enevelu eliphezulu z-indexukubonisa umngcele wayo phezu kwama-elementi ayizelamani.