Source

Isishwankathelo

Amacandelo kunye neenketho zokubeka iprojekthi yakho yeBootstrap, kubandakanya nezikhongozeli zokusonga, inkqubo yegridi enamandla, into yemidiya ebhetyebhetye, kunye neeklasi eziluncedo eziphendulayo.

Izikhongozeli

Imigqomo yeyona nto isisiseko uyilo kwiBootstrap kwaye iyafuneka xa usebenzisa inkqubo yethu yegridi engagqibekanga . Khetha kwisingxobo esiphendulayo, esinobubanzi obusisigxina (okuthetha ukuba max-widthutshintsho lwaso kwindawo nganye yoqhawulo) okanye ububanzi bolwelo (okuthetha ukuba 100%sibanzi ngalo lonke ixesha).

Ngelixa izikhongozeli zinokubekwa kwindlwane, uninzi lwezakhiwo azifuni sikhongozeli esinendlwane.

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

Sebenzisa .container-fluidkwisikhongozeli esibanzi esigcweleyo, esinaba bonke ububanzi bendawo yokujonga.

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

Izaphulelo eziphendulayo

Kuba iBootstrap iphuhliswe ukuba ihambe kuqala, sisebenzisa imibuzo embalwa yemithombo yeendaba ukwenza iindawo zokuqhawula ezinengqondo zoyilo lwethu kunye nojongano. Ezi ndawo zokuqhawuka zisekwe ubukhulu becala kobubanzi obuncinci bendawo yokujonga kwaye zisivumela ukuba sinyuse umgangatho njengoko utshintsho lwemboniselo.

I-Bootstrap ikakhulu isebenzisa olu luhlu lulandelayo lwemibuzo yemidiya-okanye iindawo zokuqhawula-kwimithombo yethu yeefayile ze-Sass zoyilo lwethu, inkqubo yegridi, kunye nezixhobo.

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

Kuba sibhala umthombo wethu we-CSS e-Sass, yonke imibuzo yethu yeendaba iyafumaneka ngokuxutywa kwe-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;
  }
}

Ngamanye amaxesha sisebenzisa imibuzo yemidiya eya kwelinye icala (ubungakanani obunikiweyo besikrini okanye encinci ):

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

Qaphela ukuba njengoko abakhangeli beencwadi okwangoku bengayixhasi imibuzo yomxholo woluhlu , sisebenza malunga nemida min-kunye max-nezimaphambili kunye neendawo zokujonga ezinobubanzi obuqhekekileyo (okwenzeka phantsi kweemeko ezithile kwizixhobo eziphezulu ze-dpi, umzekelo) ngokusebenzisa amaxabiso anochaneka oluphezulu kolu thelekiso. .

Kwakhona, le mibuzo yemidiya iyafumaneka ngokuxutywa kweSass:

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

Kukwakho imibuzo yemidiya kunye nemixube yokujolisa kwisegmenti enye yobukhulu besikrini usebenzisa ubuncinci kunye nobubanzi bendawo yokuqhawuka.

// 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 iyafumaneka ngokuxutywa kweSass:

@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 yemithombo yeendaba inokufikelela kububanzi bendawo yokuphumla:

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

Umxube we-Sass wokujolisa kuluhlu lwesayizi yeskrini efanayo iya kuba:

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

Z-isalathisi

Amacandelo amaninzi eBootstrap asebenzisa z-index, ipropati yeCSS enceda ukulawula uyilo ngokubonelela nge-axis yesithathu ukulungiselela umxholo. Sisebenzisa isikali sesalathiso sika-z esingagqibekanga kwiBootstrap eyilelwe ukuba ingamaleko ngokufanelekileyo, iingcebiso zesixhobo kunye neepopovers, iimodyuli, kunye nokunye.

La maxabiso aphezulu aqala kwinani elingenasizathu, eliphezulu kwaye lithe ngqo ngokwaneleyo ukuphepha iingxabano. Sifuna iseti esemgangathweni yazo zonke iinxalenye zethu ezineleyile-iingcebiso zezixhobo, iipopovers, ii-navbar, ukwehla, iimodyuli-ukuze sikwazi ukungaguquguquki kwindlela yokuziphatha. Akukho sizathu singakhange sisebenzise 100+ okanye 500+.

Asikukhuthazi ukwenza ezi nqobo zobuntu; ukuba utshintshe enye, kuya kufuneka utshintshe zonke.

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

Ukujongana nemida ethelelanayo ngaphakathi kwezixhobo (umzekelo, amaqhosha kunye negalelo kumaqela egalelo), sisebenzisa amanani asezantsi amadijithi omnye z-indexwe 1, 2, kunye 3nokungagqibekanga, i-hover, kunye neemeko ezisebenzayo. Kwi-hover/focus/esebenzayo, sizisa into ethile ngaphambili z-indexenexabiso eliphezulu ukubonisa umda wabo phezu kwezinto ezizalanayo.