Dulmar

Qaybaha iyo xulashooyinka dejinta mashruucaaga Bootstrap, oo ay ku jiraan weelasha duubida, nidaam awood badan, shay warbaahin oo dabacsan, iyo fasalo tasiilaad ah.

Konteenarada

Konteenarada ayaa ah sheyga ugu aasaasiga ah ee qaabaynta ee Bootstrap waxaana loo baahan yahay marka la isticmaalayo nidaamkayaga khadka caadiga ah . Ka dooro weel jawaab celin leh, oo ballac go'an (macneheedu waa max-widthisbeddelkiisa barta jabinta) ama ballac dareere ah (macneheedu waa 100%ballaaran yahay mar walba).

Iyadoo weelasha buul la dhigi karo, badi qaabaynta uma baahna weel buul leh.

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

U isticmaal .container-fluidweel ballac buuxa ah, oo ku dhereraya ballaca goobta daawashada oo dhan.

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

Meelo jaban oo jawaab ah

Maadaama Bootstrap loo horumariyay inuu noqdo mobilka ugu horreeya, waxaan isticmaalnaa sacab muggeed oo weydiimo warbaahin ah si aan u abuurno meelo macquul ah qaab-dhismeedkayada iyo is-dhexgalkayada. Meelahan jaban waxay inta badan ku salaysan yihiin ballaadhka ugu yar ee daawashada waxayna noo ogolaanayaan inaan kor u qaadno walxaha marka aragtidu is beddesho.

Bootstrap waxay u isticmaashaa kala duwanaanshaha su'aalaha warbaahinta ee soo socda-ama meelaha jaban-ee ishayada faylasha Sass ee qaabayntayada, nidaamka grid, iyo qaybahayada.

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

Maadaama aan ku qorno ishayada CSS ee Sass, dhammaan weydiimahayada warbaahinta waxaa laga heli karaa Sass mixins:

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

Waxaan marmar isticmaalnaa weydiimaha warbaahinta ee jihada kale u socda ( cabbirka shaashadda la bixiyay ama ka yar ):

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

Mar labaad, weydiimahan warbaahinta ayaa sidoo kale laga heli karaa Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Waxa kale oo jira su'aalo warbaahineed iyo iskudhafyo lagu beegsanayo hal qayb oo cabbirrada shaashadda ah iyadoo la adeegsanayo ballaadhka ugu yar iyo ugu badnaan.

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

Weydiimahan warbaahinta waxaa sidoo kale laga heli karaa 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) { ... }

Sidoo kale, su'aalaha warbaahintu waxay koobi karaan balaadhyo kala duwan:

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

Isku darka Sass ee lagu beegsanayo cabbirka cabbirka isku midka ah wuxuu noqon lahaa:

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

Z-index

Qaybo badan oo Bootstrap ah ayaa isticmaala z-index, hantida CSS ee ka caawisa xakamaynta qaabeynta iyadoo la siinayo dhidibka saddexaad si loo habeeyo nuxurka. Waxaan u isticmaalnaa cabbirka z-index-ka caadiga ah ee Bootstrap kaas oo loo qaabeeyey inuu si sax ah lakabka ugu dhejiyo navigation, tabaha aaladaha iyo popovers, moodooyinka, iyo in ka badan.

Qiimayaashan sare waxay ku bilowdaan tiro aan sabab lahayn, sare oo gaar ah oo ku filan si looga fogaado isku dhacyada. Waxaan u baahanahay jaangooyooyin kuwan ka kooban qaybahayada lakabyada ah - qalab-tips, popovers, navbars, dropdowns, modals - si aan si macquul ah ugu socono dabeecadaha. Ma jirto sabab aanaan u isticmaali karin 100+ ama 500+.

Ma dhiirigelineyno habeynta qiyamkan shaqsiyeed; Haddii aad mid bedesho, waxay u badan tahay inaad u baahan tahay inaad wada beddesho.

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

Si loo xakameeyo soohdimaha is dulsaaran ee ka kooban qaybaha (tusaale, badhamada iyo gelinta kooxaha wax galinta), waxaanu isticmaalnaa z-indexqiimayaasha hal lambar oo hooseeya ee 1, 2, iyo 3kuwa caadiga ah, duleelka, iyo gobolada firfircoon. Markay duleellaan/fiirsasho/firfircoon tahay, waxaanu keenaynaa shay gaar ah safka hore oo leh z-indexqiime sare si ay u muujiyaan xuduudkooda canaasirta walaalaha ah.