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 . Weelasha waxaa loo isticmaalaa in lagu daro, suuf, iyo (mararka qaarkood) xuddun u ah waxa ku jira. Iyadoo weelasha buul la dhigi karo, badi qaabaynta uma baahna weel buul leh.

Bootstrap waxay la socotaa saddex weel oo kala duwan:

• .container, kaas oo dejinaya meel max-widthkasta oo jawaab celin ah
• .container-fluid, kaas oo width: 100%ah dhammaan meelaha jaban
• .container-{breakpoint}, kaas oo ah width: 100%ilaa inta la cayimay goynta

Jadwalka hoose wuxuu muujinayaa sida weel kastaa u max-widthbarbar dhigo kan asalka ah .containeriyo .container-fluidmeel kasta oo jaban.

Ficil ku arag iyaga oo ku barbar dhig tusaalahayaga Grid .

All-in-one

Fasalkayaga caadiga .containerah waa jawaab celin, weel ballaadhkiisu go'an yahay, taasoo la macno ah max-widthisbeddelkiisa meel kasta oo nasashada.

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

Dheecaan

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

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

Ka jawaaba

Weelasha jawaab celinta ayaa ku cusub Bootstrap v4.4. Waxay kuu oggolaanayaan inaad qeexdo fasal 100% ballac ah ilaa barta goynta ee la cayimay laga gaarayo, ka dib waxaan codsaneynaa max-widths mid kasta oo ka mid ah meelaha sare ee jabinta. Tusaale ahaan, .container-smwaa 100% ballaaran in la bilaabo ilaa barta smgoynta laga gaarayo, halkaas oo ay ku kordhin doonto md, lg, iyo 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>

Meelo jaban oo jawaab ah

Maadaama Bootstrap loo hormariyay inuu noqdo mobilka marka hore, waxaan isticmaalnaa dhowr su'aalood oo warbaahin ah si aan u abuurno go'aan macquul ah qaabayntayada iyo isku xidhkayada. Meelahan jaban waxay inta badan ku salaysan yihiin ballaadhka ugu yar ee daawashada waxayna noo ogolaanayaan inaan kor u qaadno walxaha marka muuqaalku isbeddelo.

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

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

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

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

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 galinta), waxaanu isticmaalnaa z-indexqiimayaal hal lambar oo hooseeya ee 1, 2, iyo 3kuwa caadiga ah, duleelka, iyo gobolada firfircoon. Kor-u-qaadista/fiirsashada/firfircoonida, waxaanu keenaynaa shay gaar ah safka hore oo leh z-indexqiime sare si ay u muujiyaan xuduudkooda canaasirta walaalaha ah.