Isishwankathelo

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

Izikhongozeli

Izikhongozeli yeyona nto isisiseko uyilo kwiBootstrap kwaye iyafuneka xa usebenzisa inkqubo yethu yegridi engagqibekanga . Izikhongozeli zisetyenziselwa ukuqulatha, iphedi, kwaye (ngamanye amaxesha) iziko lomxholo ophakathi kwazo. Ngelixa izikhongozeli zinokubekwa kwindlwane, uninzi lwezakhiwo azifuni sikhongozeli esinendlwane.

I-Bootstrap iza nezikhongozeli ezintathu ezahlukeneyo:

• .container, emisela a max-widthkwindawo nganye yokusabela esabelayo
• .container-fluid, ekuthi width: 100%kuzo zonke iindawo zokuqhawuka
• .container-{breakpoint}, elide libe yindawo width: 100%ekhankanyiweyo yokwaphuka

Itheyibhile engezantsi ibonisa ukuba isikhongozeli ngasinye sithelekiseka njani max-widthnesokuqala .containernakwindawo .container-fluidyoqhawulo nganye.

Zibone zisebenza kwaye uzithelekise kumzekelo wethu weGridi .

Zonke kwenye

Udidi lwethu olungagqibekanga .containersisikhongozeli esiphendulayo, esinobubanzi obusisigxina, okuthetha ukuba max-widthutshintsho lwaso kwindawo nganye yoqhawulo.

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

Ulwelo

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

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

Ukusabela

Izikhongozeli eziphendulayo zintsha kwiBootstrap v4.4. Bakuvumela ukuba uchaze udidi oluyi-100% ububanzi de kufike indawo yokuqhawula ekhankanyiweyo, emva koko sisebenzise max-widthi-s kwi-breakpoints nganye ephezulu. Umzekelo, .container-smi-100% ububanzi ukuqala de kufike indawo smyokuphumla, apho iya kunyuka nge md, lg, kunye 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>

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

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.